Подключение трекера к сайту без готового модуля CMS: порядок действий и отладка

Скопировать ссылку на статью

Скопировано

Содержание

1. Кому подходит эта статья и что потребуется
   • Что понадобится со стороны CRM
   • Что потребуется на стороне сайта
2. Шаг 1. Настроить трекер в CRM и разместить код на сайте
3. Шаг 2. Настроить отслеживание событий в CRM
4. Шаг 3. Настроить события через JS API
5. Проверка и отладка отправки событий
   • Проверка через DevTools в браузере
   • Отладка через юзерскрипт в production
   • Установка скрипта
   • Расшифровка сообщений
6. Что подготовить для обращения в поддержку
7. Связанные статьи

Кому подходит эта статья и что потребуется

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

• на сторонней CMS (не через готовый модуль обмена);
• на кастомной интеграции;
• на сайте со сложной фронтенд-архитектурой (например, SPA).

Что понадобится со стороны CRM

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

Что потребуется на стороне сайта

Для подключения трекера требуется участие разработчика сайта. На стороне сайта необходимо:

• разместить JS-код трекера на страницах сайта;
• настроить передачу идентификаторов клиентов в трекер — без этого события не будут связываться с карточками клиентов в CRM.

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

Шаг 1. Настроить трекер в CRM и разместить код на сайте

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

Следует обратиться к инструкции по настройке со стороны CRM и размещению кода.

На этом шаге важно обеспечить передачу ID клиентов с сайта в трекер. Если идентификаторы не передаются, трекер не сможет определить, в карточку какого клиента CRM привязать событие.

Шаг 2. Настроить отслеживание событий в CRM

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

Обратитесь к инструкции по настройке ограниченного перечня событий.

Примечание

Такой способ подходит для сайтов со статичной HTML-вёрсткой. Если сайт работает как SPA (например, на React) или стандартных событий недостаточно, используйте JS API.

Шаг 3. Настроить события через JS API

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

С практическим руководством и примерами можно ознакомиться в соответствующей статье

Настройка отправки событий с сайта в трекер описаны в этой статье

Этот вариант предполагает участие разработчика и работу с JavaScript-кодом на стороне сайта.

Проверка и отладка отправки событий

Проверка через DevTools в браузере

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

1. Откройте DevTools и перейдите во вкладку Network.
2. В строке фильтра укажите c.retailcrm.tech, чтобы отфильтровать запросы трекера.
3. В списке запросов найдите события вида event?user=user_id. Их наличие означает, что сайт отправил данные в трекер.
4. Откройте любой такой запрос и перейдите во вкладку Payload — в блоке Request Payload будет виден фактически отправленный набор данных (тип события, идентификаторы и прочие параметры).

Отладка через юзерскрипт в production

Для отладки работы с событиями трекера и отслеживания вызовов API-методов можно использовать отладочный юзерскрипт. Он добавляет в консоль браузера логирование вызовов к API (аналогично отладчику GTM).

Важно!

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

Установка скрипта

1. Установите менеджер юзерскриптов для вашего браузера:
   • Chrome: Tampermonkey
   • Firefox: Violentmonkey, Greasemonkey
   • Microsoft Edge: Tampermonkey
   • Opera: Tampermonkey
   • Safari: Userscripts
2. Установите отладочный юзерскрипт по ссылке https://c.retailcrm.tech/widget/debug.user.js или скопируйте его содержимое и установите вручную.
3. Если потребуется, следуйте инструкциям менеджера (например, Tampermonkey может запросить включение режима разработчика).

Для браузеров на базе Chromium (Chrome, Microsoft Edge, Brave и другие): при использовании Tampermonkey может потребоваться дополнительно разрешить выполнение пользовательских скриптов:

1. Перейдите в список установленных расширений браузера (как правило, Настройки → Расширения).
2. Включите переключатель «Режим разработчика».
3. Откройте карточку расширения Tampermonkey (Сведения).
4. Включите переключатель «Разрешить пользовательские скрипты».
5. Перезапустите браузер.

После установки на всех сайтах с JS API будет вестись логирование работы в консоли браузера.

Расшифровка сообщений

Все сообщения отладчика имеют префикс [OCAPI], по которому их можно отфильтровать во вкладке Console.

Примеры сообщений:

• window.ocapi detected, verbose logging has been enabled. — API обнаружен, скрипт активирован.
• window.ocapi not found after 30000ms — API на сайте не обнаружен.
• _rcct was not defined as window property but rather as a global scope variable... — переменная (_rcct или _rcco) объявлена не в window, а в глобальной области видимости (например, через const или let). Это может нарушать работу. Рекомендуется изменить объявление на var.
• Found site token in window._rcct: 0 — значение токена сайта, используемого виджетом/трекером.
• Found widget settings in window._rcco: {} — содержимое window._rcco.
• _rcco has non-falsy customer.customer_id but it was NOT set in the tracker. — в window._rcco указан customer_id, но он не установился в трекере. В этом случае события не будут связываться с клиентами.
• Incorrect onOcapiReady definition, should be available on window: — некорректно определена функция onOcapiReady.
• tracker event 'page_view' — отправлено событие трекера (сообщение можно раскрыть, чтобы увидеть данные события).
• flushing tracker events — отправка накопленных событий (сообщение можно раскрыть, чтобы увидеть отправляемые данные).

Среди логов вызовов методов ocapi наиболее полезны:

• on() — подписка на событие.
• event() — программная отправка события трекера.

Что подготовить для обращения в поддержку

Если события отправляются (запросы видны в DevTools/логах), но результат в CRM отличается от ожидаемого, перед обращением в поддержку подготовьте:

1. Лог запроса на передачу события с сайта в трекер:
   • данные из Payload (Request Payload) конкретного запроса event?user=user_id;
   • URL страницы сайта, на которой выполнялась отправка события;
   • время отправки события.
2. Уточнение, что именно не произошло «как ожидается»:
   • в карточку какого клиента должны были попасть данные;
   • какое событие отправлялось;
   • какие параметры должны были передаться и какие передались фактически (по Payload/логам).

Эти данные позволяют быстрее сопоставить отправку события на сайте и обработку события на стороне CRM.