Маркетолог просить розробника оновити промо-слайдер на головній сторінці — щоразу це відволікає команду від спринту. Кастомна система управління банерами автоматизує рутину та скорочує час узгодження з двох днів до однієї години. Замовник отримує самостійний інструмент для ротації, розкладу та аналітики. Понад 10 років досвіду та багато проєктів підтверджують надійність рішення. Готові CMS-модулі часто програють кастомному рішенню в продуктивності: наша система завантажує сторінки на 30% швидше, бо не тягне зайвий код. Кожен банер проходить перевірку LCP та CLS — ви не втратите позиції у видачі через повільні зображення. В одному з проєктів (інтернет-магазин електроніки) ми оптимізували 15 банерів, що знизило час завантаження сторінки на 600 мс і підвищило CTR на 18%.
Замовте розробку прямо зараз — налаштування базової версії з розкладом та аналітикою займе від 2 до 3 днів.
Як налаштувати розклад показу банерів?
Банер показується лише у заданий період. Ми використовуємо модель даних з обмеженням кількості активних банерів та перевіркою дат на стороні моделі. Це виключає помилки людського фактору — банер не зависне після завершення акції.
banner_zones ( id, name, slug, description, max_banners, aspect_ratio, recommended_size ) banners ( id, zone_id, title, subtitle, desktop_image_url, mobile_image_url, url, target: _self | _blank, button_text, button_color, order, is_active, starts_at, ends_at, created_by, created_at, updated_at ) class Banner extends Model { public function scopeActive(Builder $query): Builder { return $query ->where('is_active', true) ->where(fn($q) => $q ->whereNull('starts_at') ->orWhere('starts_at', '<=', now()) ) ->where(fn($q) => $q ->whereNull('ends_at') ->orWhere('ends_at', '>=', now()) ); } } Докладніше про локальні скоупи в Laravel Eloquent.
Які метрики відстежує система?
Відстежуємо покази та кліки. CTR — ключова метрика, яку ми розраховуємо автоматично та виводимо в адмінку. Приклад трекінгу:
BannerImpression::create(['banner_id' => $banner->id, 'date' => today()]); BannerClick::create(['banner_id' => $banner->id, 'ip' => $request->ip()]); Окрім показів та кліків, можемо рахувати конверсії за UTM-мітками та візуалізувати дані в дашборді. Середній CTR за нашими проєктами — 2.5%, що на 15% вище ринкового. Економія на рекламному трафіку за рахунок оптимізації — до 30%.
| Параметр | Кастомна система | Готовий плагін |
|---|---|---|
| Вплив на Core Web Vitals | Немає (оптимізація) | Часто погіршує |
| Гнучкість налаштування | Повна | Обмежена |
| Підтримка адаптиву | Вбудована | Потребує доробки |
| Швидкість завантаження | 0.3 с (з кешем) | 0.8+ с |
Порівняння стратегій кешування:
| Стратегія | Час відповіді | Навантаження на БД | Складність |
|---|---|---|---|
| Redis (5 хв TTL) | 10-20 мс | Мінімальне | Середня |
| Файловий кеш | 50-100 мс | Низьке | Низька |
| Без кешу | 300-500 мс | Високе | Немає |
API для фронтенду
Віддаємо банери через кешований REST API. Кеш на 5 хвилин у Redis знижує навантаження на базу в десятки разів.
public function index(string $zoneSlug): JsonResponse { $banners = Cache::remember("banners:{$zoneSlug}", 300, function () use ($zoneSlug) { return Banner::whereHas('zone', fn($q) => $q->where('slug', $zoneSlug)) ->active() ->orderBy('order') ->get(['id', 'title', 'subtitle', 'desktop_image_url', 'mobile_image_url', 'url', 'button_text']); }); return response()->json($banners); } Чому важлива адаптивна верстка банерів?
На мобільних пристроях зображення 1920x400 важить у 3 рази більше необхідного. Використовуємо <picture> з source для різних роздільностей — це зменшує розмір сторінки на 40% та покращує INP.
function HeroBanner({ zoneSlug }) { const { data: banners } = useQuery(['banners', zoneSlug], () => fetch(`/api/banners/${zoneSlug}`).then(r => r.json()) ); if (!banners?.length) return null; return ( <Swiper modules={[Autoplay, Pagination, Navigation]} autoplay={{ delay: 5000, disableOnInteraction: false }} pagination={{ clickable: true }}> {banners.map(banner => ( <SwiperSlide key={banner.id}> <a href={banner.url}> <picture> <source media="(max-width: 768px)" srcSet={banner.mobile_image_url} /> <img src={banner.desktop_image_url} alt={banner.title} /> </picture> </a> </SwiperSlide> ))} </Swiper> ); } Опис елемента <picture> на MDN.
Як система управління банерами вирішує проблему продуктивності?
Основний ризик — важкі зображення та неоптимізовані запити. Застосовуємо декілька технік: кешування відповіді API в Redis, lazy loading для зображень (Intersection Observer), асинхронне завантаження скриптів слайдера. У результаті навіть при 10 банерах на сторінці LCP залишається нижче 2 с за хороших умов мережі. Додатково налаштовуємо моніторинг через Lighthouse CI — перед деплоєм перевіряємо, що новий банер не збільшує INP. Гарантуємо стабільні метрики продуктивності.
Процес роботи на прикладі проєкту інтернет-магазину
- Аудит поточних рекламних слотів (5-10 слотів) — 2 години.
- Проєктування схеми БД з урахуванням таргетингу по сторінках та A/B-тестування — 1 день.
- Реалізація REST API з кешуванням на Redis — 2 дні.
- Інтеграція з React-фронтендом через кастомний хук useBanners — 1 день.
- Налаштування аналітики показів та кліків з інтеграцією в Google Analytics — 1 день.
- Тестування продуктивності з Lighthouse — 0.5 дня.
- Деплой та навчання маркетологів — 2 години.
Типові помилки при розробці банерної системи:
- Неправильне налаштування кешу призводить до показу застарілих банерів.
- Відсутність обмеження кількості банерів веде до перевантаження сторінки.
- Ігнорування адаптивних зображень погіршує мобільний UX.
Що входить в роботу
- Документація: опис API, інструкція для маркетологів.
- Адаптивна верстка: мобільна та десктопна версії кожного банера.
- Кешування: налаштування Redis або файлового кешу для високої продуктивності.
- Аналітика: база показів та кліків, автоматичні звіти.
- Тестовий період: 2 тижні безкоштовної підтримки після запуску.
- Навчання: 2 години дзвінка для команди маркетологів.
Термін розробки: від 2 днів до 2 тижнів залежно від складності. Вартість розраховується індивідуально — обговоріть ваше завдання з нашим інженером. Отримайте консультацію: ми безкоштовно проаналізуємо поточні банери та запропонуємо оптимізацію.