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