Персонализация сайта

1. Установите код Javascript SDK на сайт

Подробнее об этом можно прочитать в статье про Javascript SDK

Далее необходимо сделать одно из двух:

• включить тарификацию модуля «Персонализация сайта»
• создать или отредактировать любую механику персонализации сайта (виджет рекомендаций, попап или встроенный блок) в административной панели Mindbox

В течение двух часов после выполнения пункта выше, на сайте подгрузится трекер персонализации сайта. Для ускорения до 1 часа можно воспользоваться комбинацией клавиш CTRL+F5 или CMD+SHIFT+R на странице вашего сайта.

Для проверки наличия кода персонализации на сайте можно ввести в консоль команду: PopMechanic.
Если в ответ приходит loaded: true, значит код персонализации на сайте установлен.

Здесь же в поле client можно увидеть уникальный id проекта.

2. Установите операции отслеживания посещения страниц

Есть три варианта интеграции для трех разных случаев:

• данные о просмотрах страниц и категорий ещё не передаются в Mindbox
• данные о просмотрах страниц и категорий уже передаются в Mindbox с фронтенда сайта с помощью JavaScript SDK Mindbox
• данные о просмотрах страниц и категории уже передаются в Mindbox с бекенда сайта или из сторонней системы

Необходимо выбрать тот вариант интеграции, который подходит под ваши условия, и выполнить только его.

2.1. Данные о просмотрах страниц и категорий ещё не передаются в Mindbox

С фронтенда сайта с помощью JavaScript SDK Mindbox на страницах продуктов и категорий необходимо вызывать операцию с соответствующим шагом:

• Продукт - Просмотреть - для передачи информации о просмотре страницы продукта. Подробнее
• Продукт - Просмотреть категорию - для передачи информации о просмотре страницы категории. Подробнее

В таком случае в Mindbox будут передаваться действия просмотра продуктов и категорий, которые также можно использовать для таргетинга механик персонализации.

Далее в настройках точки интеграции необходимо выбрать те операции, которые отвечают за просмотр продуктов и категорий:

2.2. Данные о просмотрах страниц и категорий уже передаются в Mindbox с фронтенда сайта с помощью JavaScript SDK Mindbox

Необходимо только выбрать в настройках точки интеграции те операции, которые отвечают за просмотр продуктов и категорий:

2.3. Данные о просмотрах страниц и категории уже передаются в Mindbox с бекенда сайта или из сторонней системы

Никакие новые операции на проекте для использования этого типа интеграции на проекте заводить не нужно.

Для того, чтобы использовать просмотры продуктов и категорий для таргетинга, но при этом не дублировать действия в системе, необходимо вызывать в трекере следующие методы.

Для просмотра продукта:

Code
mindbox("personalization.viewProduct", {
  data: {
    viewProduct: {
      product: {
      	ids: {
        	"<Идентификатор>": "<Значение идентификатора продукта>"
      	}
    	}
    }
  }
});

Для просмотра категории:

Code
mindbox("personalization.viewCategory", {
  data: {
    viewProductCategory: {
      productCategory: {
          ids: {
        	"<Идентификатор>": "<Значение идентификатора категории>"
      	}
    	}
    }
  }
});

Идентификатор продукта и категории настраиваются в системе Майндбокс.

Далее необходимо выбрать в настройках точки интеграции методы personalization.viewProduct и personalization.viewCategory для просмотра продукта и категории:

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

Проверка правильности интеграции для любого из трех вариантов

Для проверки, что данные передаются корректно, в консоли браузера можно исполнить следующую команду:

Code
mindbox("personalization.invokeWithPageData", pd => console.log(pd));

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

3. Установите операции отслеживания корзин

Есть три варианта интеграции для трех разных случаев:

• данные об установке списка корзины ещё не передаются в Mindbox
• данные об установке списка корзины уже передаются в Mindbox с фронтенда сайта с помощью JavaScript SDK Mindbox
• данные о просмотрах страниц и категории уже передаются в Mindbox с бекенда сайта, из сторонней системы или при помощи шага "Продукт - Добавить в список"

Необходимо выбрать один тип интеграции, который подходит под ваши условия и выполнить только его.

3.1. Данные о составе корзин ещё не передаются в Mindbox

С фронтенда сайта с помощью JavaScript SDK Mindbox при изменении состава корзины (добавлении или удалении продуктов из нее) необходимо вызывать операцию с шагом Продукт - Установить список (подробнее) передавая в нее полный актуальный состав корзины.

В таком случае в Mindbox будет передаваться состав корзины, который также можно использовать для таргетинга механик персонализации.

Далее в настройках точки интеграции необходимо выбрать операцию, которая отвечает за установку списка корзины:

3.2. Данные о составе корзин уже передаются в Mindbox с фронтенда сайта с помощью JavaScript SDK Mindbox

Необходимо только выбрать в настройках точки интеграции необходимо выбрать операцию, которая отвечает за установку списка корзины:

3.3. Данные о составах корзин уже передаются в Mindbox с бекенда сайта или из сторонней системы

Никакие новые операции на проекте для использования этого типа интеграции на проекте заводить не нужно.

Для того, чтобы использовать состав корзины для таргетинга, но при этом не дублировать действия в системе, необходимо при любом изменении состава корзины вызывать в трекере следующий метод со списком всего актуального состава корзины:

Code
mindbox("personalization.setCart", {
    data: {
        productList: [
            {
                product: {
                    ids: {
                      	<Идентификатор>: '<Значение идентификатора продукта>'
                    }
                },
                customFields: {
                  	<Идентификатор>: '<Значение идентификатора дополнительного поля>'
                },
                count: <Количество товара>,
                pricePerItem: <Цена за единицу товара>,
                priceOfLine: <Цена за линию>
            }
        ]
    }
});

Идентификатор продукта настраивается в системе Майндбокс.

Далее необходимо выбрать в настройках точки интеграции метод personalization.setCart для установки корзины:

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

Проверка правильности интеграции для любого из трех вариантов

Для проверки, что данные передаются корректно, в консоли браузера можно исполнить следующую команду:

Code
mindbox("personalization.invokeWithPageData", pd => console.log(pd));

В ответе будет массив cart, в котором указан тот состав корзины, который используется для таргетинга. Если он не совпадает с тем, что видит пользователь на фронтенде сайта, то необходимо проверить правильность интеграции.

4. Установка виджетов рекомендаций и встроенных блоков

Для отображения встроенного блока или виджета рекомендаций подставьте div-блок в нужное место на сайте.

Для встроенных блоков
<div data-popmechanic-embed="{Ваш id}"></div>

Рекомендации товар-товар и популярные в категории можно установить на страницы без передачи параметра data-popmechanic-argument если:

1. Операции просмотра продукта и категории не устаревшие и вызываются с фронтенда сайта с помощью Javascript SDK.
2. Операции отслеживания посещения страниц настроены по пункту 2.3 из этой статьи.

Для рекомендации товар-товар (Похожие товары, Сопутствующие товары итд):
<div data-popmechanic-embed="{Ваш id}" data-popmechanic-argument="{ID продукта}"></div>

Для рекомендации Популярные в категории:
<div data-popmechanic-embed="{Ваш id}" data-popmechanic-argument="{ID категории}"></div>

Для Персональных рекомендаций:
<div data-popmechanic-embed="{Ваш id}"></div>

Для рекомендаций Популярные товары, Новинки итд
<div data-popmechanic-embed="{Ваш id}"></div>

4. Как получить код виджета рекомендаций или встроенного блока

Для получения кода виджета или встроенного блока необходимо на странице механики найти блок "Место отображения" и скопировать его.

Если сайт работает как SPA (сменяет страницы без перезагрузки)

Перед трекером Mindbox нужно добавить тег:

Code
<script>
window.PopMechanic = { watchLocation: false };
</script>

После смены страницы нужно вызывать в JS:

Code
window.PopMechanic && window.PopMechanic.update && window.PopMechanic.update()

Устаревшая интеграция [только для справки, сейчас не применяется]

Скрипт персонализации сайта

NNN - уникальный id проекта

Code
<!--Start of PopMechanic script-->
<script id="popmechanic-script" src="https://static.popmechanic.ru/service/loader.js?c=NNN"></script>
<!--End of PopMechanic script-->

Передача данных о текущей странице

Для идентификации текущей страницы необходимо передавать следующие данные в теле страницы:

Code
window.PopMechanicPageData = {
  type: "product" // "category"/"checkout"/"info"/"personal",
  // если это страница продукта
  product: {
    id: идТовара,
    price: ценаТовара,
    priceWithDiscount: ценаТовараСоСкидкой,
    name: имяТовара,
    pictureUrl: адресКартинки,
    brand: названиеБренда,
    brandId: идБренда,
    hasDiscount: true/false, //true - со скидкой, false - без
    category: названиеКатегории,
    categoryId: идКатегории,
  },
  // если это страница категории
  category: {
    id: идКатегории,
    name: имяКатегории,
  },
};

Для проверки есть команда, которую можно ввести в консоль на сайте: PopMechanicPageData

Передача данных корзины клиента

На все страницы сайта нужно добавить такой JS-код, когда есть товары в корзине с данными из корзины. Если корзина пустая, то необходимо передавать пустой список товаров и нулевую стоимость.

Code
window.PopMechanicCartData = {
  total: суммарнаяСтоимость,
  totalWithDiscount: суммарнаяСтоимостьСоСкидками,
  products: [
    {
      id: идТовара,
      price: ценаТовара,
      priceWithDiscount: ценаТовараСоСкидкой,
      name: имяТовара,
      quantity: количествоТовара,
      pictureUrl: адресКартинки,
      url: адресТовара,
      brand: названиеБренда,
      brandId: идБренда,
      hasDiscount: true/false, //true - со скидкой, false - без
      category: названиеКатегории,
      categoryId: идКатегории
    },
  ]
}

Для возможности реагирования на добавление в корзину нужно добавить следующий код в добавление товара в корзину:

Code
window.PopMechanicAddToCart && window.PopMechanicAddToCart
(
  {
    id: идТовара,
    price: ценаТовара,
    priceWithDiscount: ценаТовараСоСкидкой,
    name: имяТовара,
    quantity: количествоТовара,
    pictureUrl: адресКартинки,
    url: адресТовара,
    brand: названиеБренда,
    brandId: идБренда,
    hasDiscount: true/false, //true - со скидкой, false - без
    category: названиеКатегории,
    categoryId: идКатегории
	} 
);

Перед реагированием на добавлению в корзину нужно еще раз вызвать переменную window.PopMechanicCartData для актуальной информации.

Для проверки есть команда, которую можно ввести в консоль на сайте: PopMechanicCartData

Если консоль отвечает ошибкой, значит интеграции с кодом персонализации сайта нет: