JS SDK для веб-сайта

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

Установка на сайт выполняется в два шага:

1. Установить скрипт.
2. Запустить сессию.

Шаг 1. Установка SDK на сайт

На каждой странице сайта в теге <head> нужно установить скрипт:

(function(r){
    window.r46=window.r46||function(){(window.r46.q=window.r46.q||[]).push(arguments)};
    var c="https://cdn.rees46.ru",v="/v3.js",s={link:[{href:c,rel:"dns-prefetch"},{href:c,rel:"preconnect"},{href:c+v,rel:"preload",as:"script"}],script:[{src:c+v,async:""}]};
    Object.keys(s).forEach(function(c){s[c].forEach(function(d){var e=document.createElement(c),a;for(a in d)e.setAttribute(a,d[a]);document.head.appendChild(e)})});
})();

Скрипт асинхронный, его загрузка не замедляет загрузку сайта. И типичное время загрузки составляет не более 30ms.

Шаг 2. Запуск сессии

Запуск сессии восстанавливает или создает новый did, продлевает или начинает новую сессию, а также автоматически инициализирует все стандартные витринные инструменты: товарные рекомендации, поиск, попапы, баннеры, сторис и пр.

Для запуска сессии сразу же после скрипта из предыдущего раздела пропишите эту строку:

r46('init', 'SHOP_ID');

Вместо SHOP_ID укажите открытый API-ключ из личного кабинета.

С этого момента SDK готов к работе и можно вызывать остальные методы для трекинга событий, запроса рекомендаций и пр.

Стрим

Если у вас несколько сайтов и вы хотите разделять в CDP данные по источникам, вы можете задать параметр stream. Если он не указан, то по умолчанию в CDP передается null, что трактуется как "сайт".

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

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

// На магазине
 r46('init', 'SHOP_ID', 'shop');

// На блоге
 r46('init', 'SHOP_ID', 'blog');

Стрим может быть любой короткой строкой латинскими буквами и цифрами.

Коллбэки

Для обработки удачного или неудачного старта сессии используйте коллбэки:

 r46('init', 'SHOP_ID', null, success_callback, failure_callback);

SPA сайт

Метод init должен выполняться на каждой открытой странице сайта. В обычном режиме достаточно просто разместить скрипт инициализации в теге <head> и все происходит само.

В single-page application скрипты в <head> не выполняются при каждом перемещении по сайту, поэтому инициализация не будет работать автоматически. Для того, чтобы SDK автоматически обрабатывал переходы, инициализируйте его с параметром:

const isSpa = true;
r46('init', 'SHOP_ID', 'STREAM', success_callback, failure_callback, options, isSpa);

Режим без cookie

Если вы работаете в стране, где от посетителя в обязательном порядке требуется согласие на cookie и посетитель его не дал, инициализировать сессию можно с опцией, заменяющей cookie на localStorage:

const options = {
  cookieless: true
}
r46('init', 'SHOP_ID', 'STREAM', success_callback, failure_callback, options);

Режим "без согласия"

Если же посетитель вообще не дал никакого согласия, то можно инициализировать SDK в режиме отсутствия согласия. В этом режиме трекинг работать не будет, посетитель так и останется анонимным.

Ряд инструментов платформы работать не будут. При этом поиск по сайту и некоторые алгоритмы товарных рекомендаций все равно будут работать.

const options = {
  consent: false
}
r46('init', 'SHOP_ID', 'STREAM', success_callback, failure_callback, options);

Свой did

Важно

Эта опция существует только для интеграций, когда REES46 внедряется внутрь другой маркетинговой платформы в режиме white-label. Не используйте ее для сайтов обычных клиентов.

Вы можете заменить did от SDK своим внутренним идентификатором, тем самым связывая данные CDP REES46 и вашей маркетинговой платформы:

const options = {
  did: "$p4wXaS6*"
}
r46('init', 'SHOP_ID', 'STREAM', success_callback, failure_callback, options);

Кастомные API-домены

Платформа может работать в режиме упрощенного white-label, когда все endpoint'ы платформы находятся на вашем домене. В этом случае SDK можно инициализировать, перезаписав базовые значения.

Если значение не указано (пустая строка или undefined), будет использоваться значение по умолчанию.

const options = {
  api_host: 'api.custom.com',
  cdn_host: '',
  pictures_host: undefined,
}
r46('init', 'SHOP_ID', 'STREAM', success_callback, failure_callback, options);

On-premise

Эти настройки в том числе применяются при инициализации SDK, когда платформа работает в режиме on-premise.

Отключение загрузки CSS

SDK автоматически загружает собственные CSS-файлы для своих инструментов. Если вы оформляете блоки своими стилями, лишние файлы можно не загружать — для этого в опциях укажите load_css.

Доступны флаги для каждого типа CSS:

Флаг	Что оформляет
shop_css	Товарные рекомендации
search	Поиск по сайту
stories	Сторис
popup	Попапы
collection	Товарные коллекции
reputation	Отзывы о товарах

Все флаги по умолчанию true. Укажите false у тех типов, CSS которых загружать не нужно:

const options = {
  load_css: {
    shop_css: false,
    search: false,
    stories: false,
    popup: false,
    collection: false,
    reputation: false,
  }
}
r46('init', 'SHOP_ID', 'STREAM', success_callback, failure_callback, options);

Например, чтобы оставить стили только у поиска, а остальные отключить:

const options = {
  load_css: {
    shop_css: false,
    stories: false,
    popup: false,
    collection: false,
    reputation: false,
  }
}
r46('init', 'SHOP_ID', 'STREAM', success_callback, failure_callback, options);

Важно

Если отключить CSS, инструменты платформы будут выводиться без оформления. Стили для них нужно описать самостоятельно.

Контрольная группа

Контрольная группа — это доля посетителей сайта, которым не показывается персонализация. Она нужна, чтобы сравнить показатели посетителей без персонализации с остальными и оценить реальный вклад платформы.

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

Размер контрольной группы задается в личном кабинете в разделе «CDP → Настройки → Контрольная группа»: от 0% до 50%. Значение 0% означает, что контрольная группа выключена.

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

Важно

Если профили посетителя объединяются (например, после авторизации на другом устройстве), посетитель может сменить группу.

Узнать, входит ли посетитель в контрольную группу, можно двумя способами.

Через метод SDK:

r46('in_control_group', function(inControlGroup) {
  if (inControlGroup) {
    // Посетитель в контрольной группе: не показываем персонализированный блок
  }
});

Через коллбэк запуска сессии:

r46('init', 'SHOP_ID', null, function(response) {
  console.log(response.in_control_group); // true или false
});

INFO

Метод можно вызывать сразу после init: SDK дождется запуска сессии и только потом вызовет коллбэк. Если контрольная группа выключена, всегда возвращается false.