Розробка системи управління банерами сайту під ключ

Маркетолог просить розробника оновити промо-слайдер на головній сторінці — щоразу це відволікає команду від спринту. Кастомна система управління банерами автоматизує рутину та скорочує час узгодження з двох днів до однієї години. Замовник отримує самостійний інструмент для ротації, розкладу та аналітики. Понад 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%.

Порівняння стратегій кешування:

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. Гарантуємо стабільні метрики продуктивності.

Процес роботи на прикладі проєкту інтернет-магазину

1. Аудит поточних рекламних слотів (5-10 слотів) — 2 години.
2. Проєктування схеми БД з урахуванням таргетингу по сторінках та A/B-тестування — 1 день.
3. Реалізація REST API з кешуванням на Redis — 2 дні.
4. Інтеграція з React-фронтендом через кастомний хук useBanners — 1 день.
5. Налаштування аналітики показів та кліків з інтеграцією в Google Analytics — 1 день.
6. Тестування продуктивності з Lighthouse — 0.5 дня.
7. Деплой та навчання маркетологів — 2 години.

Типові помилки при розробці банерної системи:

• Неправильне налаштування кешу призводить до показу застарілих банерів.
• Відсутність обмеження кількості банерів веде до перевантаження сторінки.
• Ігнорування адаптивних зображень погіршує мобільний UX.

Що входить в роботу

• Документація: опис API, інструкція для маркетологів.
• Адаптивна верстка: мобільна та десктопна версії кожного банера.
• Кешування: налаштування Redis або файлового кешу для високої продуктивності.
• Аналітика: база показів та кліків, автоматичні звіти.
• Тестовий період: 2 тижні безкоштовної підтримки після запуску.
• Навчання: 2 години дзвінка для команди маркетологів.

Термін розробки: від 2 днів до 2 тижнів залежно від складності. Вартість розраховується індивідуально — обговоріть ваше завдання з нашим інженером. Отримайте консультацію: ми проаналізуємо поточні банери та запропонуємо оптимізацію.