Виджеты рекомендаций на сайте

Виджет — готовый блок товаров на сайте: «Вам может понравиться» на главной, «С этим покупают» в карточке товара, «Недавно просмотренные» в корзине. Вы настраиваете его в OneTrace.pro, а на сайт вставляете короткий код один раз. Дальше вид, оформление и включение меняются без правки сайта.

Для работы нужны установленный трекер (Подключение сайта), товарный каталог и события просмотров, корзины и покупок (Рекомендации и каталог товаров). Создавать и менять виджеты могут «Владелец», «Администратор» и «Менеджер».

Как создать виджет

1. Откройте Коммуникации → Сайт, вкладку Виджеты.
2. Нажмите Создать виджет.
3. Заполните настройки слева — справа сразу виден предпросмотр.
4. Нажмите Сохранить.

Настройки

Предпросмотр

Предпросмотр рисует виджет так же, как на сайте, на настоящих товарах вашего каталога. Для «С этим смотрят» и похожих берётся пример — первый товар в наличии, его id указан над предпросмотром. Если подходящих товаров нет, показываются серые заглушки, чтобы оценить оформление. Переключатель Компьютер / Телефон сужает место до ширины телефона.

На сайте раскладка подстраивается под ширину места, а не экрана: в узкой колонке и на телефоне карточки встают по две в ряд. Шрифт и цвет текста виджет берёт у сайта.

Код для сайта

У каждого виджета в списке есть блок Код для сайта. Вставьте его в шаблон страницы там, где должен быть блок:

<div data-cdp-widget="a1b2c3d4e5f6" data-item="SKU-1"></div>

Атрибуты:

• data-item — id товара страницы или товаров корзины через запятую: data-item="SKU-1,SKU-7". Обязателен для видов «С этим смотрят», «С этим покупают» и «Похожие» — подставьте его из шаблона страницы.
• data-category — id категории для популярных товаров, если на разных страницах нужны разные категории.
• data-exclude — id товаров через запятую, которые не нужно показывать, например уже лежащие в корзине.

Персональные и недавно просмотренные товары подбираются по посетителю, им data-item не нужен.

Если подходящих товаров нет, место на странице остаётся пустым — вёрстка не ломается.

Включение и выключение

Переключатель Показывать на сайте в карточке виджета выключает его без правки сайта: статус меняется на «Выключен», блок на странице очищается. Включите снова — товары вернутся. Кнопка с корзиной удаляет виджет совсем: на сайте он перестанет показываться.

Кнопка с карандашом открывает Настроить виджет. Изменения видны на сайте при следующей загрузке страницы, код менять не нужно.

Статистика

Под названием виджета — статистика за 30 дней:

Общий эффект рекомендаций на сайте по видам — в разделе Рекомендации.

Одностраничные сайты

Трекер сам находит виджеты после загрузки страницы, при появлении новых элементов и при смене data-item. Поэтому на сайтах на React, Vue и подобных достаточно менять атрибут — блок перерисуется.

Если товары нужно обновить без изменения атрибутов, например после изменения корзины, вызовите:

cdp.widgets({ force: true });

Свой код вместо виджета

Разработчики могут вывести блок рекомендаций из кода, без настройки в админке:

window.addEventListener('load', () => {
  cdp.renderRecommendations('#recs', {
    type: 'viewed_with', item: 'SKU-1', title: 'С этим смотрят', layout: 'carousel', columns: 4,
  });
});

Блок выглядит так же, как виджет, показы и клики учитываются сами. Вызов можно делать и до загрузки трекера: он подождёт в очереди. Элемент должен уже быть на странице, поэтому в примере вызов ждёт события load. Пустая выдача очищает элемент. Цвет, скругление и кнопку удобнее настраивать в виджете из админки.