Рекомендательный виджет: определение и место в воронке

Рекомендательный виджет — точка, где алгоритм встречается с пользователем. Движок персонализации может формировать идеальную подборку, но без UI-компонента, который её отображает, пользователь её не увидит.

Виджет выполняет три функции в e-commerce воронке:

  • Удержание — при неудовлетворённости текущим товаром предлагает альтернативы.
  • Монетизация — cross-sell и upsell увеличивают средний чек.
  • Возврат — напоминает о просмотренных или оставленных в корзине товарах.

Типы и форматы

Формат Описание Подходит для
Карусель Горизонтальный скролл, 3–6 видимых карточек PDP, главная, мобайл
Сетка 2–4 карточки в ряд, фиксированный блок Корзина, pop-up
Компактный список Текст + миниатюра, без развернутых карточек Сайдбар, футер
Full-width блок Широкий баннерный формат Главная, хиро-зона

Размещение по типу страниц

PDP (карточка товара): главное место для рекомендательных виджетов. Стандартная схема — два виджета: «Похожие товары» (альтернативы) и «Часто покупают вместе» (дополнение к покупке). Позиция: под основным контентом товара, выше отзывов.

Главная: персонализированный виджет с товарами на основе истории пользователя. Для новых — trending или bestsellers.

Корзина: cross-sell к содержимому корзины. Размещается под списком товаров, чтобы не отвлекать от оформления заказа.

404 / пустой поиск: «Недавно просмотренные» или «Популярные товары» — помогает не потерять пользователя на тупике.

Технические форматы интеграции

<!-- Клиентский сниппет: контейнер + скрипт -->
<div id="gf-widget" data-strategy="similar" data-item-id="SKU-12345"></div>
<script src="//cdn.platform.ai/widget.js" async></script>

Для server-side рендеринга (Next.js, Nuxt, SSR-фреймворки): запрос к API рекомендаций на стороне сервера при генерации страницы — товары рендерятся в HTML сразу, без мигания при загрузке.

Совет: добавьте skeleton-заглушки на время загрузки виджета — они убирают layout shift и воспринимаются как более быстрая загрузка, даже если реальное время не изменилось.