Разработка 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% за счёт кросс-сейлов.
Сравнение подходов к реализации
| Параметр | Клиентский трекинг + серверный движок | Внешняя платформа (Retail Rocket) |
|---|---|---|
| Время внедрения | 3–5 дней | 1–2 дня |
| Точность рекомендаций | Высокая (собственные алгоритмы) | Высокая (ML-модели) |
| Стоимость обслуживания | Низкая (свой сервер) | Ежемесячная подписка |
| Контроль над данными | Полный | Частичный (передача данных) |
| Масштабируемость | До 100k товаров | От 10k до 1M+ товаров |
Сравнение алгоритмов рекомендаций
| Критерий | Клиентское ранжирование | Серверная коллаборативная фильтрация |
|---|---|---|
| Данные | История в localStorage | Матрица покупок и просмотров |
| Точность | Средняя | Высокая |
| Загрузка сервера | Нет | Умеренная (с кэшем) |
| Холодный старт | Не проблема | Требует данных |
Типичные ошибки при внедрении
- Показывать товары, которые пользователь только что видел. Всегда исключайте просмотренные позиции.
- Игнорировать популярность товара — категорийный вес без учёта популярности даёт слабые рекомендации.
- Не кэшировать серверные запросы. Без Redis каждый просмотр генерирует SQL-запрос — при 10k пользователей БД ляжет.
- Не отслеживать клики по баннеру. Без аналитики вы не узнаете реальный CTR.
- Забыть про мобильную адаптацию — баннер должен корректно отображаться на всех устройствах.
Как мы реализуем рендеринг 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 персонализации.
Если вы хотите увеличить конверсию с рекламных блоков без лишних затрат, свяжитесь с нами — обсудим вашу задачу и предложим оптимальное решение. Получите консультацию инженера для предварительной оценки.