Розробка Smart-банерів з персоналізацією під кожного користувача

Розробка Smart-банерів з персоналізацією під кожного користувача

Ви витрачаєте бюджет на рекламні банери, але їх CTR не дотягує до 1%. Проблема в тому, що всі бачать одну й ту саму пропозицію. Ми вирішуємо це за допомогою smart-банерів: динамічних блоків, які показують кожному користувачеві саме ті товари, які він переглядав або які алгоритм вважає релевантними. Результат — зростання CTR у 2–3 рази та конверсії на 15–30%. Знижується і вартість залучення клієнта (CAC) на 20–30% за рахунок більш релевантного таргетингу. Замовте розробку smart-банерів — отримайте консультацію інженера для попередньої оцінки.

Як працює трекінг переглядів?

Персоналізація починається зі збору даних. Ми використовуємо JavaScript-клас ViewHistoryTracker, який зберігає історію переглядів у localStorage та синхронізує з сервером для авторизованих користувачів. Це мінімально інвазивне рішення — не вимагає cookie-банера та GDPR-згод для анонімних сесій.

class ViewHistoryTracker { private readonly KEY = 'view_history'; private readonly MAX_ITEMS = 50; track(item: ViewedItem): void { const history = this.get(); const filtered = history.filter(i => i.id !== item.id); const updated = [ { ...item, viewed_at: Date.now() }, ...filtered, ].slice(0, this.MAX_ITEMS); localStorage.setItem(this.KEY, JSON.stringify(updated)); this.syncToServer(item); } get(): ViewedItem[] { try { return JSON.parse(localStorage.getItem(this.KEY) ?? '[]'); } catch { return []; } } getRecent(count = 10): ViewedItem[] { return this.get().slice(0, count); } private async syncToServer(item: ViewedItem): Promise<void> { if (!getAuthToken()) return; await fetch('/api/views', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(item), }); } } 

Що дає колаборативна фільтрація?

Простий показ останніх переглянутих товарів дає низький CTR — користувач уже бачив їх. Ми використовуємо ранжування з урахуванням ваг категорій та популярності, а також колаборативну фільтрацію для побудови матриці "користувач-товар". Нещодавні перегляди отримують більшу вагу, а дублі виключаються. Такий підхід збільшує CTR у 2–3 рази за нашими вимірами.

function rankItems(history: ViewedItem[], candidates: CatalogItem[]): CatalogItem[] { const categoryWeights: Record<string, number> = {}; const viewedIds = new Set(history.map(i => i.id)); history.forEach((item, index) => { const recencyWeight = 1 / (index + 1); categoryWeights[item.category] = (categoryWeights[item.category] ?? 0) + recencyWeight; }); return candidates .filter(c => !viewedIds.has(c.id)) .map(candidate => ({ ...candidate, score: (categoryWeights[candidate.category] ?? 0) * (candidate.popularity ?? 1), })) .sort((a, b) => b.score - a.score) .slice(0, 6); } 

Для великих проектів (від 10k товарів) виносимо двигун на сервер на PHP/Laravel з матрицею в PostgreSQL. Кешуємо рекомендації в Redis — час відповіді API не перевищує 50 мс.

Кейс: інтернет-магазин електроніки з каталогом 5000 товарів. Після впровадження smart-банера CTR виріс з 0,8% до 2,4%, конверсія з банера в покупку — 12%. Середній чек збільшився на 8% за рахунок крос-сейлів.

Порівняння підходів до реалізації

Порівняння алгоритмів рекомендацій

Як ми реалізуємо рендеринг smart-банера?

Компонент на React (або Vue) вбудовується в потрібне місце: sidebar, inline або sticky-bottom. Він запитує рекомендації через API та відображає товари з фото, назвою та ціною. При кліку відправляється подія в Google Analytics.

interface SmartBannerProps { placement: 'sidebar' | 'inline' | 'sticky-bottom'; title?: string; } function SmartBanner({ placement, title = 'Ви дивились' }: SmartBannerProps) { const [items, setItems] = useState<CatalogItem[]>([]); const [loading, setLoading] = useState(true); useEffect(() => { const history = tracker.getRecent(); if (history.length === 0) { setLoading(false); return; } fetch('/api/recommendations', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ viewed_ids: history.map(i => i.id), categories: [...new Set(history.map(i => i.category))], limit: placement === 'sidebar' ? 4 : 6, }), }) .then(r => r.json()) .then(data => setItems(data.items)) .finally(() => setLoading(false)); }, [placement]); if (loading) return <BannerSkeleton count={4} />; if (items.length === 0) return null; return ( <div className={`smart-banner smart-banner--${placement}`}> <h3 className="smart-banner__title">{title}</h3> <div className="smart-banner__grid"> {items.map(item => ( <a key={item.id} href={item.url} className="smart-banner__item" onClick={() => trackBannerClick(item, placement)} > <img src={item.image} alt={item.title} loading="lazy" /> <span className="smart-banner__name">{item.title}</span> <span className="smart-banner__price">{formatPrice(item.price)}</span> </a> ))} </div> </div> ); } function trackBannerClick(item: CatalogItem, placement: string): void { gtag('event', 'smart_banner_click', { item_id: item.id, item_name: item.title, placement, item_category: item.category, }); } 

Серверний ендпоінт рекомендацій

Ми використовуємо Laravel-контролер, який виключає переглянуті товари та ранжує за категорією та популярністю. Для прискорення запитів додаємо Redis-кеш.

class RecommendationsController extends Controller { public function index(Request $request): JsonResponse { $viewedIds = $request->input('viewed_ids', []); $categories = $request->input('categories', []); $limit = min($request->input('limit', 6), 12); $items = Product::query() ->whereNotIn('id', $viewedIds) ->where('is_active', true) ->where(function ($q) use ($categories) { $q->whereIn('category_slug', $categories) ->orWhere('is_bestseller', true); }) ->orderByRaw(' CASE WHEN category_slug = ANY(?) THEN 1 ELSE 2 END, popularity DESC ', ['{' . implode(',', $categories) . '}']) ->limit($limit) ->get(['id', 'title', 'price', 'image', 'url', 'category_slug']); return response()->json(['items' => $items]); } } 

Коли підключати зовнішні платформи?

Для магазинів з каталогом від 10k товарів або коли потрібна готова ML-модель, інтегруємо Retail Rocket або Mindbox. Базова інтеграція Retail Rocket займає 1-2 дні:

rrApi.view(123456); rrApi.addToBasket(123456); rrApiOnReady(function() { rrApi.recommend('block_id_from_rr_panel', { callback: function(items) { renderRecommendations(items); } }); }); 

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

• Проектування схеми трекінгу та зберігання даних
• Розробка клієнтського компонента банера з підтримкою різних placement
• Серверний ендпоінт рекомендацій з кешуванням
• Інтеграція з аналітикою (GA/Яндекс.Метрика)
• Документація API та інструкція з вбудовування
• Передача доступів до репозиторію та хостингу
• Навчання вашого розробника (1 година онлайн)
• Гарантія 3 місяці на коректну роботу алгоритмів

Терміни та вартість

Терміни реалізації: від 3 до 8 днів залежно від складності. Вартість розраховується індивідуально — оцінимо проект після брифу. За час роботи ми реалізували smart-банери для десятків інтернет-магазинів, середній ріст CTR склав 180%. Наша команда має 5+ років досвіду в e-commerce персоналізації.

Якщо ви хочете збільшити конверсію з рекламних блоків без зайвих витрат, зв'яжіться з нами — обговоримо вашу задачу та запропонуємо оптимальне рішення. Отримайте консультацію інженера для попередньої оцінки.