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

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

Система управління баннерами дозволяє маркетологам самостійно оновлювати рекламні матеріали на сайті — слайдери головної сторінки, промо-блоки в каталозі, сповіщувальні полоси — без залучення розробників.

Модель даних

banner_zones (
  id, name, slug, description,
  max_banners,     -- обмеження кількості активних баннерів
  aspect_ratio,    -- '16:9', '4:1', тощо для підказок при завантаженні
  recommended_size -- '1920x400 px'
)

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())
            );
    }
}

API для фронтенду

// GET /api/banners/{zone_slug}
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);
}

React-компонент слайдера

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>
    );
}

Аналітика баннерів

Відстеження показів та кліків:

// При показі (server-side rendering)
BannerImpression::create(['banner_id' => $banner->id, 'date' => today()]);

// При кліку (webhook або перенаправлення)
Route::get('/banner-click/{banner}', function (Banner $banner, Request $request) {
    BannerClick::create(['banner_id' => $banner->id, 'ip' => $request->ip()]);
    return redirect($banner->url);
});

CTR = клікі / покази — ключова метрика для оцінки ефективності баннерів.

Термін розробки: 2–3 дні для системи з розкладом, адаптивними зображеннями та базовою аналітикою.