Skip to main content

Подключение к сайту

Чтобы MoodRec корректно работал с сайтом, необходимо обеспечить два условия:

  • На сайте установлен SDK MoodRec — через него сервис взаимодействует с сайтом.
  • События сайта передаются в формате ecommerce-событий — это нужно для корректной обработки и учёта действий пользователей в MoodRec.

Встраивание SDK на сайт​

Чтобы встроить SDK MoodRec на сайт, добавьте код подключения. Код отображается при первом входе в сервис, также его можно найти в настройках проекта на вкладке Подключение:

html
<script src="https://demo.example.com/static/moodrec-tracker.js" data-token="ТОКЕН_ПРОЕКТА"></script>
ПараметрОписание
Адрес скриптаАдрес, по которому размещён SDK. Зависит от того, где развёрнут MoodRec: в примере указан условный домен demo.example.com, в рабочей интеграции будет адрес вашего сервиса
data-tokenТокен проекта, генерируется в настройках проекта на вкладке Подключение. Уникален для каждого проекта

Код нужно добавить на каждую страницу сайта. Его можно вставить:

  • между тегами <head> и </head>, либо
  • между тегами <body> и </body>.

Рекомендуется встраивать SDK через менеджер тегов, например Google Tag Manager или Яндекс Тег Менеджер.

Передача данных о пользователе​

После инициализации библиотеки передайте информацию о пользователе:

javascript
document.addEventListener('moodrec-sdk-ready', () => {
  MOODREC_SDK.setUserId({ id: USER_ID });
});
ПараметрОписание
USER_IDИдентификатор пользователя — хэш телефона/email или внутренний ID в вашей платформе

Вместо id можно передать email или phone — SDK сам вычислит хэш (setUserId({ email: EMAIL }) или setUserId({ phone: PHONE })).

Настройка событий​

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

MoodRec автоматически настроит соответствие событий, если на сайте они размечены как ecommerce (формат Google Analytics или Яндекс Метрики). В этом случае ничего дополнительно настраивать не нужно.

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

События

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

Работа без ecommerce-событий

Если у вас не настроены ecommerce-события, вы можете передавать данные о действиях пользователя напрямую. Для этого настройте собственную логику через API-вызов events/event.

Рекомендуем настроить ecommerce-разметку и использовать нативный способ, описанный выше.

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

Сами рекомендации выводятся на сайт при помощи плейсментов. Способ интеграции плейсмента на сайт зависит от выбранного при создании метода подключения.

API-размещение​

Если при создании выбран способ размещения через API, то плейсмент через запрос /catboss/getOffers возвращает на сайт список ID продуктов. Дальше вы сами решаете, где и как показывать эти продукты: в блоке «Похожие товары», в ленте «Часто покупают» или в любом другом месте, которое соответствует вашей бизнес-логике и выбранной модели рекомендаций.

Далее вы строите выдачу на сайте в два шага: получаете список ID из MoodRec и по этим ID запрашиваете актуальные данные о товарах в своём каталоге (название, цена, изображение), чтобы отрисовать карточки.

Предположим, вы настроили плейсмент и хотите разместить ленту с рекомендованными товарами на сайте. Вы можете реализовать это следующим образом:

js
function initPlacement(el, placement_id, context, limit){
    // через SDK получаем список продуктов для рекомендаций
    MOODREC_SDK.getRecommendation(placement_id, context, limit).then((recomData)=>{
        if (recomData.recoms){
            // собираем id в массив
            const recomIds = recomData.recoms.map((item)=>{ return item.offer_id})
            // запрашиваем актуальные данные по товарам с сайта и формируем карточки
            getProductsFromSite(recomIds).then((items)=>{
                items.forEach((item)=>{
                    // выводим карточки в нужный нам блок
                    el.innerHTML += buildProductItem(item);
                })
            })
        }
    })
}

В этом коде:

  • получен список продуктов (offer_id) через SDK сервиса;
  • по ID продукта запрошены актуальные данные по товарам (название, цена, изображение);
  • карточки продуктов выведены в отдельном блоке.

В результате пользователь на сайте увидит ленту продуктов:

Лента продуктов на сайте