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

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

Система управления баннерами позволяет маркетологам самостоятельно обновлять рекламные материалы на сайте — слайдеры главной страницы, промо-блоки в каталоге, уведомительные полосы — без привлечения разработчиков.

Модель данных

banner_zones (
  id, name, slug, description,
  max_banners,     -- ограничение количества активных баннеров
  aspect_ratio,    -- '16:9', '4:1', etc. для подсказки при загрузке
  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 или redirect)
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 дня для системы с расписанием, адаптивными изображениями и базовой аналитикой.