Отслеживание действий онлайн-чата Битрикс24 с помощью Google Tag Manager

Руководство по установке на сайт онлайн-чата Битрикс24 и отслеживанию событий с помощью Google Tag Manager для Яндекс.Метрики, Universal Analytics и Google Analytics 4.

Обновление: я выпустил электронное руководство по Google Analytics 4. Бесплатно скачать его можно в формате .PDF по ссылке.

Примечание: если на вашем сайте размещены формы Битрикс24, то вы можете отслеживать отправку формы и создать составную цель по заполнению отдельных полей форм. О том, как это сделать, читайте в этих материалах:

• Отслеживание отправки формы Битрикс24 с помощью Google Tag Manager
• Визуализация последовательности заполнения полей формы Битрикс24

Создание онлайн-чата

После того, как вы создали личный кабинет в Битрикс24, вам нужно активировать Виджет на сайт. Он объединяет все цифровые каналы коммуникаций с клиентами в вашем Битрикс24: онлайн-чат, обратный звонок, CRM-формы. Делается это в разделе CRM - Интеграции - Виджет на сайт:

По умолчанию в Битрикс24 доступен стандартный виджет, но вы можете создать свой и наполнить его нужными инструментами.

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

Вы можете скопировать этот код и установить на сайт через Google Tag Manager, использовав тег Пользовательский HTML тег и триггером активации All Pages (Все страницы):

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

После добавления кода виджета через диспетчер тегов Google он появится на вашем сайте. Если вы используете предустановленный виджет от самого Битрикс24, то в него уже добавлена CRM-форма "Обратная связь" и онлайн-чат:

Подробно про отслеживание CRM-форм Битрикс24 разобрано в этой статье. Сейчас нас интересует только онлайн-чат.

Если вы откроете режим отладки Google Tag Manager и перейдете к себе на сайт, открыв онлайн-чат, то увидите, что на шкале событий автоматически отобразятся два события:

• crm-form
• VirtualPageview

Если вы нажмете поочередно на каждое из них и посмотрите уровень данных (dataLayer), то обнаружите, что событие crm-form и VirtualPageView содержат в себе точно такие же данные, как и для обычных CRM-форм Битрик24.

Расширенные настройки виджета онлайн-чата

Для отслеживания событий онлайн-чата мы будем использовать не их, а расширенные настройки виджета, о которых подробно написано в официальной документации Битрикс24.

Событий, которые можно отслеживать для онлайн-чата, достаточно много:

1. BX.LiveChatWidget.SubscriptionType.configLoaded – событие загрузки информации об Открытой линии;
2. BX.LiveChatWidget.SubscriptionType.widgetOpen – событие открытия виджета;
3. BX.LiveChatWidget.SubscriptionType.widgetClose – событие закрытия виджета;
4. BX.LiveChatWidget.SubscriptionType.sessionStart – событие старта сессии;
5. BX.LiveChatWidget.SubscriptionType.sessionOperatorChange – событие смены оператора;
6. BX.LiveChatWidget.SubscriptionType.sessionFinish – событие окончания сессии;
7. BX.LiveChatWidget.SubscriptionType.operatorMessage – событие сообщения оператора;
8. BX.LiveChatWidget.SubscriptionType.userForm – событие заполнения формы пользователем;
9. BX.LiveChatWidget.SubscriptionType.userMessage – событие сообщения пользователя;
10. BX.LiveChatWidget.SubscriptionType.userVote – событие голосования пользователем;
11. BX.LiveChatWidget.SubscriptionType.every – событие, в котором можно выводить результаты всех событий за один раз.

В зависимости от того, что вы хотите отслеживать и передавать в аналитические инструменты (Яндекс.Метрику, Universal Analytics и Google Analytics 4), вы выбираете необходимый перечень событий. Часть этих событий будет полезна для улучшения работы всей вашей команды, часть - для донастройки виджета онлайн-чата разработчиками, поскольку внутри обработчика событий можно передавать дополнительные данные о действиях пользователей, их контактной информации (name, phone, email и т.д.), а также о смене оператора, его сообщениях, начале старта сессии или закрытии формы пользователем.

Я предлагаю использовать последнее событие BX.LiveChatWidget.SubscriptionType.every, в котором можно выводить результаты всех событий за один раз, и затем передавать только нужную информацию в счетчики аналитики.

В официальной документации Битрикс24 обработка событий происходит с помощью данного кода:

, где:

• BX.LiveChatWidget.SubscriptionType.ТИП_ПОДПИСКИ_НА_СОБЫТИЕ - в нашем случае будет BX.LiveChatWidget.SubscriptionType.every
• // любая команда - здесь будет передаваться конструкция с dataLayer, которую можно будет использовать для передачи данных в аналитику.

Тег для событий

Создайте тег с типом Пользовательский HTML и триггером активации All Pages (Все страницы). Добавьте в него следующий код:

В Google Tag Manager это будет выглядеть так:

Сохраните тег.

Принцип работы этого кода достаточно простой: мы берем обработчик для онлайн-чата Битрикс24, который прописан в их официальной документации, добавляем к нему конструкцию if с перечислением нужных нам событий через оператор ИЛИ || (см. выше) из списка, а далее при совершении одного из этих событий формируем уровень данных с названием события b24chat и двумя переменными - eventCategory, в которую подставляется одно и то же значение b24OnlineChat, и eventAction, в которую динамически подставляется тип события, который предопределен системой Битрикс24:

• configLoaded – событие загрузки информации об Открытой линии;
• widgetOpen – событие открытия виджета;
• widgetClose – событие закрытия виджета;
• sessionStart – событие старта сессии;
• sessionOperatorChange – событие смены оператора;
• sessionFinish – событие окончания сессии;
• operatorMessage – событие сообщения оператора;
• userForm – событие заполнения формы пользователем;
• userMessage – событие сообщения пользователя;
• userVote – событие голосования пользователем;
• userFile – событие отправки файла пользователем;

Именно eventAction позволит нам отличить одно действие пользователя/оператора от другого. Однако не все события так интересны для отслеживания, поэтому вы можете скорректировать вышеописанный код под свои задачи, убрав часть событий из:

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

Переменные уровня данных

Перейдите в раздел Переменные и создайте две пользовательские переменные типа Переменные уровня данных:

1. eventCategory с версией 2
2. eventAction с версией 2

Важно: если вы используйте отслеживания для CRM-форм, в которых тоже есть уровень данных с переменными eventCategory и eventAction, необходимо в одном из вариантов использовать другое название в коде, например, eventCategory2 и eventAction2, чтобы не было проблем и ошибок с пересечением отслеживаний CRM-форм и онлайн-чата Б24.

Сохраните переменные.

Триггер специального события

Поскольку в коде dataLayer передается событие 'event': 'b24chat', необходимо создать триггер специального события с этим названием:

Сохраните триггер.

Код событий, представленный выше в этой статье, отслеживает абсолютно все события, которые есть в Битрикс24. Но это не всегда нужно. Вполне вероятно, что для Яндекс.Метрики, Universal Analytics и Google Analytics 4 вам будет достаточно событий старта сессии, сообщения пользователя, сообщения оператора и заполнения формы пользователем в чате.

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

• eventAction содержит userMessage

Тег для Яндекс.Метрики

Перед тем, как начать регистрировать события в счетчике Яндекс.Метрики, вы должны определить для себя те события, которые являются для вас наиболее важными и которые требуется настроить. Предположим, что вы будете отслеживать только отправленные пользователем сообщения в чат. Тогда вы можете создать цель с типом JavaScript-событие, задав ему название. Например, userMessage:

Скопируйте код цели для сайта и вставьте его в новый тег типа Пользовательский HTML:

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

Проверить корректность срабатывания тега на настроенное событие можно с помощью режима предварительного просмотра Google Tag Manager, а также с помощью расширения Yandex Metrica Debugger:

Тег для Universal Analytics

Чтобы передать данные в Google Analytics 3, создайте тег Google Аналитика: Universal Analytics с типом отслеживания Событие и следующей конфигурацией:

Для категории задайте переменную уровня данных eventCategory, а для действия по событию - переменную уровня данных eventAction. В качестве триггера активации вы выбираете триггер специального события b24chat, созданный на предыдущем шаге, причем не с конкретным условием на userMessage, а без уточнения -> на все события. Тогда в Universal Analytics вы будете видеть все события, которые совершит пользователь и ваш оператор.

Сохраните тег. Проверить корректность передачи данных можно с помощью отчета В режиме реального времени. Все события, которые будут фиксироваться, будут отправлены событиями в Google Analytics:

После этого на каждое из передаваемых событий вы можете отдельно настроить цель (конверсию) с типом Событие, задав нужные категорию и действие:

Тег для Google Analytics 4

Поскольку в Google Analytics 4 все обращения - это события, то аналогично Universal Analytics создайте тег с типом Google Аналитика: событие GA4 и следующей конфигурацией:

• Тег конфигурации - ваш тег Google Analytics 4
• Название события - встроенная переменная {[Event}}
• Параметр события - event_type со значением eventAction

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

Сохраните тег. От момента совершения события до момента, когда вы увидите данные в отчетах GA4, может пройти до 24 часов. Но проверить передачу данных вы можете с помощью отчета В реальном времени или инструмента DebugView.

В заключение в интерфейсе GA4 создайте специальный параметр с произвольным названием, областью действия Событие и параметром события event_type, чтобы в ваших отчетах фиксировались дополнительные данные по событиям онлайн-чата Битрикс24: