Интеграция через Яндекс Тег Менеджер

Введение

Яндекс Тег Менеджер позволяет установить основной трекинг-код и настроить передачу событий в Retail Rocket без добавления отдельных скриптов в шаблоны страниц сайта.

В интерфейсе Тег Менеджера необходимо создать:

основной тег Retail Rocket, который загружает JS SDK на всех страницах;
переменные, которые получают значения из dataLayer;
триггеры, которые реагируют на события в dataLayer;
теги событий, которые вызывают соответствующие методы Retail Rocket;

На стороне сайта должен быть создан и корректно заполнен глобальный массив window.dataLayer. Когда пользователь просматривает категорию или товар, выполняет поиск, подписывается на рассылку, регистрируется либо авторизуется, сайт добавляет в массив объект с названием события и необходимыми параметрами. Триггер в Яндекс Тег Менеджере распознаёт событие, после чего связанный с ним тег передаёт данные в Retail Rocket.

Перед началом работы

Для настройки понадобятся:

установленный на сайте счётчик Яндекс Метрики;
включённый Яндекс Тег Менеджер и разрешённый шаблон «Пользовательский HTML»;
ID аккаунта Retail Rocket (partnerId);
товарная база, передаваемая в Retail Rocket;
настроенный на сайте dataLayer.

Если Тег Менеджер ещё не подключён, выполните шаги из руководства Яндекса «Как включить Яндекс Тег Менеджер».

В настройках счётчика включите Тег Менеджер и установите флажок Пользовательский HTML. Без этого шаблон, который используется в руководстве, будет недоступен.

Включение Тег Менеджера и Пользовательского HTML

Идентификаторы товаров и категорий в событиях должны совпадать с идентификаторами, которые передаются в товарной базе в Retail Rocket.

Убедитесь, что dataLayer подготовлен

До настройки Яндекс Тег Менеджера убедитесь, что на сайте создан и корректно работает глобальный массив window.dataLayer. Он должен содержать события и данные, которые используются в переменных и триггерах этого руководства.

Товарные события рекомендуется передавать в формате электронной коммерции Яндекс Метрики. Проверьте структуру ecommerce.detail, ecommerce.add и ecommerce.purchase по руководствам Яндекса «Передача данных об электронной коммерции» и «Как включить электронную коммерцию».

События должны поступать в dataLayer после соответствующего действия пользователя. Например, add_to_cart передаётся после успешного добавления товара, а purchase — после подтверждения заказа. Если на сайте используются другие названия событий или пути к данным, укажите фактические значения при создании переменных и триггеров.

Персональные данные

Передавайте событие subscribe только после того, как пользователь указал email и дал согласие на получение маркетинговых сообщений. Учитывайте требования вашей политики обработки персональных данных.

Соответствие событий методам Retail Rocket

Событие `dataLayer`	Поле с данными	Метод Retail Rocket
`view_category`	`category_id`	`rrApi.categoryView()`
`view_item`	`ecommerce.detail.products.0.id`	`rrApi.view()`
`add_to_cart`	`ecommerce.add.products.0.id`	`rrApi.addToBasket()`
`search`	`search_phrase`	`rrApi.search()`
`subscribe`	`email`	`rrApi.setProfile()`
`login`, `sign_up`	`customer_id`, `email`, `is_agreed_to_receive_marketing_mail`	`rrApi.setCustomer()`
`purchase`	`email`, `customer_id` для авторизованного покупателя, `ecommerce.purchase.actionField.id`, `ecommerce.purchase.products`	`rrApi.setProfile()` или `rrApi.setCustomer()`, затем `rrApi.order()`

Настройте Яндекс Тег Менеджер

Шаг 1. Создайте основной тег Retail Rocket

Основной тег загружает основной трекинг-код JS SDK Retail Rocket, он должен срабатывать один раз на каждой странице.

В Яндекс Тег Менеджере откройте раздел Теги и нажмите Добавить тег.

Добавление тега в Яндекс Тег Менеджере

Укажите название Retail Rocket — основной трекинг-код.
Выберите шаблон Пользовательский HTML.
Добавьте код ниже и замените <partner_id> на ID аккаунта Retail Rocket.

<script>
  var rrPartnerId = "<partner_id>";
  var rrApi = window.rrApi || {};
  var rrApiOnReady = window.rrApiOnReady || [];
  var rrDisabledCookies = false;

  (function(d) {
    var ref = d.getElementsByTagName("script")[0];
    var apiJs;
    var apiJsId = "rrApi-jssdk";

    if (d.getElementById(apiJsId)) return;

    apiJs = d.createElement("script");
    apiJs.id = apiJsId;
    apiJs.async = true;
    apiJs.src = "https://cdn.retailrocket.ru/content/javascript/tracking.js";
    ref.parentNode.insertBefore(apiJs, ref);
  })(document);
</script>

Настройка основного тега Retail Rocket

В блоке Триггеры нажмите Добавить триггер.
Создайте триггер Retail Rocket — просмотр страницы с типом Просмотр страницы.
Оставьте период подсчёта срабатываний По умолчанию, а в условиях активации выберите Все события.
Сохраните триггер, добавьте его к основному тегу и сохраните тег.

Триггер просмотра всех страниц

Управление файлами cookie

В примере rrDisabledCookies имеет значение false. Подробнее об этом параметре смотрите в описании основного трекинг-кода Retail Rocket.

Шаг 2. Создайте переменные dataLayer

Откройте раздел Переменные и нажмите Добавить переменную.

Добавление переменной в Яндекс Тег Менеджере

Укажите название, например для переменной ID категории - dataLayer_category_id.
Выберите шаблон Переменная уровня данных.
В поле Имя переменной уровня данных укажите category_id и сохраните переменную.

Настройка переменной category_id

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

Название переменной в примерах	Ключ в `dataLayer`
`dataLayer_category_id`	`category_id`
`dataLayer_product_id`	`ecommerce.detail.products.0.id`
`dataLayer_basket_product_id`	`ecommerce.add.products.0.id`
`dataLayer_search_phrase`	`search_phrase`
`dataLayer_email`	`email`
`dataLayer_customer_id`	`customer_id`
`dataLayer_marketing_consent`	`is_agreed_to_receive_marketing_mail`
`dataLayer_transaction_id`	`ecommerce.purchase.actionField.id`
`dataLayer_order_products`	`ecommerce.purchase.products`

Состав события просмотра товара

Переменная dataLayer_product_id и тег с методом rrApi.view() в этом руководстве рассчитаны на негрупповые товары: событие просмотра должно содержать один актуальный ID товара.

Если в товарной базе используются групповые товары, передавайте массив ID всех товаров, объединённых одним group_id, и вызывайте rrApi.groupView() вместо rrApi.view(). Сам group_id в метод не передаётся.

Подробнее о методе описано на странице «Просмотр группового товара».

Шаг 3. Создайте триггеры событий

Откройте раздел Триггеры и нажмите Добавить триггер.

Добавление триггера в Яндекс Тег Менеджере

Например, для добавления триггера просмотра категории, укажите название RR - Просмотр категории и выберите тип Специальное событие.
В поле Название события укажите view_category.
Таким же способом создайте остальные триггеры из таблицы. В каждом триггере укажите точное значение поля event:

Название триггера	Значение события
`RR - Просмотр категории`	`view_category`
`RR - Просмотр товара`	`view_item`
`RR - Добавление в корзину`	`add_to_cart`
`RR - Поиск`	`search`
`RR - Подписка`	`subscribe`
`RR - Авторизация`	`login`
`RR - Регистрация`	`sign_up`
`RR - Заказ`	`purchase`

Названия событий чувствительны к регистру. Значение в триггере должно полностью совпадать со значением event, которое сайт передаёт в dataLayer.

Шаг 4. Создайте тег просмотра категории

Создайте тег Retail Rocket — просмотр категории с шаблоном Пользовательский HTML.
Добавьте код:

<script>
  window.rrApiOnReady = window.rrApiOnReady || [];
  window.rrApiOnReady.push(function() {
    try {
      rrApi.categoryView({{dataLayer_category_id}});
    } catch (e) {}
  });
</script>

Добавьте триггер RR - Просмотр категории и сохраните тег.

Если товарная база передаётся через Product API, вместо ID категории используйте строковый categoryPath, который в точности совпадает со значением в товарной базе. Подробнее о методе см. на странице «Трекинг-код просмотра товарной категории».

Шаг 5. Создайте тег просмотра товара

Создайте тег Retail Rocket — просмотр товара с шаблоном Пользовательский HTML.
Добавьте код:

<script>
  window.rrApiOnReady = window.rrApiOnReady || [];
  window.rrApiOnReady.push(function() {
    try {
      rrApi.view({{dataLayer_product_id}});
    } catch (e) {}
  });
</script>

Добавьте триггер RR - Просмотр товара и сохраните тег.

Пример рассчитан на числовые ID товаров. Для строковых идентификаторов добавьте параметр isProductIdString. Подробнее о методе см. на странице «Просмотр негруппового товара».

Шаг 6. Создайте тег поиска

Создайте тег Retail Rocket — поиск с шаблоном Пользовательский HTML.
Добавьте код:

<script>
  window.rrApiOnReady = window.rrApiOnReady || [];
  window.rrApiOnReady.push(function() {
    try {
      rrApi.search({{dataLayer_search_phrase}});
    } catch (e) {}
  });
</script>

Добавьте триггер RR - Поиск и сохраните тег.

Отправляйте событие после того, как пользователь ввёл поисковую фразу и запустил поиск. Не вызывайте тег при вводе каждого символа. Подробнее о методе см. на странице «Поисковый трекинг-код».

Создайте тег Retail Rocket — подписка с шаблоном Пользовательский HTML.
Добавьте код:

<script>
  window.rrApiOnReady = window.rrApiOnReady || [];
  window.rrApiOnReady.push(function() {
    try {
      rrApi.setProfile({
        email: {{dataLayer_email}},
        isAgreedToReceiveMarketingMail: true
      });
    } catch (e) {}
  });
</script>

Добавьте триггер RR - Подписка и сохраните тег.

Этот тег сохраняет email в профиле посетителя и передаёт согласие на маркетинговые сообщения. Подробнее о методе см. на странице «Трекинг-код сбора данных незарегистрированного пользователя».

Шаг 8. Создайте тег авторизации и регистрации

Создайте тег Retail Rocket — авторизация и регистрация с шаблоном Пользовательский HTML.
Добавьте код:

<script>
  window.rrApiOnReady = window.rrApiOnReady || [];
  window.rrApiOnReady.push(function() {
    try {
      rrApi.setCustomer({
        customerId: {{dataLayer_customer_id}},
        email: {{dataLayer_email}},
        isAgreedToReceiveMarketingMail: {{dataLayer_marketing_consent}}
      });
    } catch (e) {}
  });
</script>

Добавьте к тегу два триггера: RR - Авторизация и RR - Регистрация.
Сохраните тег.

Метод должен вызываться после успешной авторизации или регистрации. Передавайте в customerId постоянный уникальный ID покупателя на стороне магазина, в email — его email, а в isAgreedToReceiveMarketingMail — фактическое значение согласия на маркетинговые сообщения. Один и тот же покупатель должен получать одинаковый ID при повторных входах и на разных устройствах.

Если сайт использует другие названия событий вместо login и sign_up, укажите их в триггерах. Подробнее о методе см. на странице «Метод создания карточки покупателя».

Шаг 9. Создайте тег добавления в корзину

Создайте тег Retail Rocket — добавление в корзину с шаблоном Пользовательский HTML.
Добавьте код:

<script>
  window.rrApiOnReady = window.rrApiOnReady || [];
  window.rrApiOnReady.push(function() {
    try {
      rrApi.addToBasket({{dataLayer_basket_product_id}});
    } catch (e) {}
  });
</script>

Добавьте триггер RR - Добавление в корзину и сохраните тег.

Событие add_to_cart должно поступать после успешного добавления товара. Вызывайте тот же метод для кнопок быстрого заказа и покупки в один клик. Для строковых идентификаторов добавьте параметр isProductIdString. Подробнее о методе см. на странице «Трекинг-код добавления товара в корзину».

Шаг 10. Создайте тег совершения заказа

Создайте тег Retail Rocket — заказ с шаблоном Пользовательский HTML.
Добавьте код:

<script>
  window.rrApiOnReady = window.rrApiOnReady || [];
  window.rrApiOnReady.push(function() {
    try {
      var products = {{dataLayer_order_products}} || [];
      var customerId = {{dataLayer_customer_id}};
      var items = products.map(function(product) {
        return {
          id: product.id,
          qnt: product.quantity,
          price: product.price
        };
      });

      if (customerId) {
        rrApi.setCustomer({
          customerId: customerId,
          email: {{dataLayer_email}},
          isAgreedToReceiveMarketingMail: {{dataLayer_marketing_consent}}
        });
      } else {
        rrApi.setProfile({
          email: {{dataLayer_email}},
          isAgreedToReceiveMarketingMail: {{dataLayer_marketing_consent}}
        });
      }

      rrApi.order({
        transaction: {{dataLayer_transaction_id}},
        items: items
      });
    } catch (e) {}
  });
</script>

Добавьте триггер RR - Заказ и сохраните тег.

Тег преобразует массив ecommerce.purchase.products из формата Яндекс Метрики в массив items Retail Rocket: поле quantity передаётся как qnt, а id и price сохраняются без изменений. Для авторизованного покупателя вызывается rrApi.setCustomer(), для неавторизованного — rrApi.setProfile().

Событие purchase авторизованного покупателя должно содержать тот же customer_id, который передавался после авторизации или регистрации. Значение is_agreed_to_receive_marketing_mail должно отражать фактический выбор пользователя. Для строковых ID товаров добавьте в объект заказа параметр isProductIdString: true. Подробнее о методе см. на странице «Трекинг-код совершения транзакции».

Проверьте интеграцию

Перед публикацией проверьте контейнер в режиме предварительного просмотра:

Нажмите Предварительный просмотр и откройте тестовый сайт.
Перейдите на страницу категории. В отладчике должно появиться событие view_category, а тег Retail Rocket — просмотр категории должен получить актуальное значение dataLayer_category_id и сработать один раз.
Откройте карточку товара. Для события view_item проверьте значение dataLayer_product_id и срабатывание тега просмотра товара.
Добавьте товар в корзину. Убедитесь, что событие add_to_cart содержит dataLayer_basket_product_id, а связанный тег сработал после успешного добавления.
Выполните поиск. Убедитесь, что переменная dataLayer_search_phrase содержит полную поисковую фразу.
Отправьте тестовую форму подписки. Убедитесь, что dataLayer_email содержит тестовый адрес, а тег подписки сработал только после успешной отправки формы.
Авторизуйтесь или зарегистрируйте нового тестового покупателя. Проверьте событие login или sign_up, значения dataLayer_customer_id, dataLayer_email, dataLayer_marketing_consent и срабатывание тега авторизации и регистрации.
Оформите тестовый заказ. Проверьте dataLayer_transaction_id, dataLayer_order_products, email, dataLayer_customer_id для авторизованного покупателя и значение согласия на маркетинговые сообщения. Тег заказа должен сработать один раз на странице подтверждения заказа.
На вкладках Теги и Переменные проверьте, что для каждого события активирован только нужный тег и все значения заполнены.
Проверьте вызовы Retail Rocket по инструкции «Проверка трекинг-кодов».

Подробное описание инструментов отладки приведено в руководстве Яндекса «Режим предварительного просмотра».

После успешной проверки опубликуйте контейнер. До публикации теги, триггеры и переменные доступны только в рабочей области и режиме предварительного просмотра.

Частые ошибки

Событие не появляется в отладчике

Убедитесь, что сайт передаёт событие в window.dataLayer и заполняет поле event. Название события должно совпадать со значением в триггере с учётом регистра.

Тег срабатывает, но значение переменной пустое

Проверьте путь к полю в переменной и структуру текущего события. Для просмотра товара значение находится по пути ecommerce.detail.products.0.id. Не рассчитывайте на данные из предыдущего события dataLayer: каждый объект должен содержать все параметры, необходимые связанному с ним тегу.

Retail Rocket получает неверный товар или категорию

Сравните передаваемый ID со значением в товарной базе Retail Rocket. Для строковых ID товаров используйте параметр isProductIdString. При передаче категорий через Product API используйте полный categoryPath вместо числового ID.

Заказ передаётся без товаров или с неверной суммой

Проверьте, что ecommerce.purchase.products является массивом, а у каждого товара заполнены id, quantity и price. Количество должно быть больше нуля, цена не может быть отрицательной. Значение ecommerce.purchase.actionField.id должно содержать уникальный номер заказа.

Введение​

Перед началом работы​

Убедитесь, что dataLayer подготовлен​

Соответствие событий методам Retail Rocket​

Настройте Яндекс Тег Менеджер​

Шаг 1. Создайте основной тег Retail Rocket​

Шаг 2. Создайте переменные dataLayer​

Шаг 3. Создайте триггеры событий​

Шаг 4. Создайте тег просмотра категории​

Шаг 5. Создайте тег просмотра товара​

Шаг 6. Создайте тег поиска​

Шаг 7. Создайте тег подписки​

Шаг 8. Создайте тег авторизации и регистрации​

Шаг 9. Создайте тег добавления в корзину​

Шаг 10. Создайте тег совершения заказа​

Проверьте интеграцию​

Частые ошибки​

Событие не появляется в отладчике​

Тег срабатывает, но значение переменной пустое​

Retail Rocket получает неверный товар или категорию​

Заказ передаётся без товаров или с неверной суммой​