Как создать виджет рекомендаций
  • 01 Aug 2022
  • 2 минуты
  • Темная тема
    Светлая тема
  • формат pdf

Как создать виджет рекомендаций

  • Темная тема
    Светлая тема
  • формат pdf

Для работы с данными из корзины и посещенных страниц требуется полная интеграция:

нужно выполнить настройки по инструкции: https://developers.mindbox.ru/page/рекомендации-на-сайт

Рекомендации, созданные на проекте, можно выводить на сайте в виде виджета.

Создание виджета на проекте

  1. Открываем нужную кампанию:

Снимок экрана 2021-01-28 в 12.00.42.png

  1. Нажимаем Добавить -> Виджет рекомендаций:

Снимок экрана 2021-01-28 в 12.04.18.png

Шаблон виджета

2. Выбираем шаблон
На данный момент доступны два шаблона:

  • базовый шаблон — содержит информацию о названии, цене, старой цене и скидке на продукт. Подходит для самостоятельной верстки виджета
  • расширенный шаблон — позволяет вывести большее количество полей продукта, привязать JS обработчики на кнопки добавления в корзину и/или в избранное

image.png

Настраиваем виджет

4. Задаём название:
Снимок экрана 2021-02-03 в 14.22.26.png

5. Общие настройки:

Снимок экрана 2022-08-01 в 17.54.28.png

Выбираем:

6. Алгоритм рекомендаций:
Снимок экрана 2021-01-28 в 12.29.24.png

  • Алгоритмы — в список попадают алгоритмы со страницы рекомендаций (Кампании -> Товарные рекомендации):

Снимок экрана 2021-01-28 в 12.31.21.png

  • Число рекомендаций — сколько товаров из рекомендации выводим в виджете.

Если добавить несколько алгоритмов, после товаров первой рекомендации будут показаны рекомендации по второму алгоритму. Всё это в одном виджете.
Можно добавить до трёх алгоритмов.

Так как div-блок формируется по первому алгоритму, используйте алгоритмы одного типа — для них создаётся div-блок одного формата.

Группы:
— только персональные рекомендации;
— рекомендации товар-товар (похожие, сопутствующие), можно добавить персональные;
— рекомендации к категории (популярные в категории); можно добавить персональные.

7. Внешний вид формы

Основные настройки

Общие настройки для всех шаблонов
Снимок экрана 2021-02-02 в 16.01.20.png

Какие кастомные поля выгружать — какие поля возвращать для отображения; для их вывода надо будет править вёрстку.
Отправить все кастомные поля — то же, но возвращаются все поля.
Фильтровать по другим рекомендациям на странице — отмечаем, чтобы не было товарных пересечений с другими виджетами на странице.
Использовать оптимизированные картинки — все картинки будут 500px к 500px.

Отображение виджета:
Снимок экрана 2021-02-02 в 16.01.32.png

Настраиваем отображения на разных экранах:

  • ширина — при какой ширине экрана,
  • товаров — сколько товаров выводить разом,
  • отступы — отступы между товарами,
  • шаг — сколько товаров прокручивается за раз.

Дальше:

  • зациклить скролл — переход дальше с последнего слайда вернёт на первый слад;
  • кнопки «вперёд/назад» — для перехода между слайдами;
  • включить слайдер — отмечаем, когда товаров в выборке больше, чем показывается за раз.

Дополнительные параметры:

  • Код для извлечения id продуктов (0 — извлекать из параметра div) — JS код для определения id продукта для получения рекомендаций к продукту. Например, для код для извлечения id продукта из URL страницы:
return window.location.pathname.split(’/’)[2]
  • Выключить если рекомендаций меньше (0 — показывать всегда)«: выбираем минимальное количество товаров, при котором отображаем виджет.
  • Если вам нужны остальные дополнительные параметры в коде установки формы — например, ID продукта или категории — вам нужно обратиться к разработчику, чтобы он проанализировал страницу и добавил в код установку этих дополнительных параметров.

Также на странице редактирования шаблона доступны код и просмотр отображения на разных гайджетах:
Снимок экрана 2021-02-02 в 22.25.32.png

8. Таргетинг
Отбираем кому и при каких условиях показываем виджет. Можно ограничить выборку сегментом, днём недели, источником перехода и т.д.

Например, выводим форму только для женщин:
Снимок экрана 2021-01-28 в 12.54.33.png

Подробнее о таргетинге — в статье.

9. Место отображения

  • Встроить блок в селектор:

  • где показать блок — перед/после элемента, в начало/конец блока

    • селектор
      Снимок экрана 2021-01-28 в 12.57.29.png
  • Поместить блок в нужное место самостоятельно:
    копируем код и вставляем в нужное место в шаблоне сайта:

Снимок экрана 2021-02-03 в 14.19.01.png

Как выбрать селектор

CSS селектор — это элемент в верстке вашей страницы сайта, до/после которого мы собираемся поместить встроенную форму.

Какие селекторы существуют?
.someClass — соответствует любому элементу с классом «someClass».
#someid — соответствует элементу с идентификатором «someid».
Детальная статья о поиске нужного селектора на странице
Еще одна статья об Определении CSS селеторов

Рекомендуем:

  1. Установите себе расширение Selector Gadget для Google Chrome.
    Оно значительно облегчит работу с поиском нужного селектора
  2. Перейдите на сайт, куда вы хотите поставить форму, выберите место на странице, где она должна располагаться.
  3. Активируйте Selector Gadge**t, поднесите курсор мыши к этому месту скопируйте его селектор.

Пример:
Мы хотим на сайте поставить блок встроенный подписки в футере:
— активируем Selector Gadget
— выделяем футер или другой нужный элемент, куда нужно вставить форму
— копируем полученное значение внизу.

10. Тестируем отображение на сайте

  • Нажимаем на знак меню -> Проверить на сайте:

Снимок экрана 2021-02-03 в 14.26.32.png

  • Вводим название сайта и получаем ссылку для перехода:
    Снимок экрана 2021-02-03 в 14.26.59.png

  • Проверяем отображение на сайте:
    Снимок экрана 2021-02-03 в 14.41.45.png

  1. Если виджет соответствует требованиям, запускаем его:
    Снимок экрана 2021-02-03 в 14.47.03.png

Была ли эта статья полезной?