Отслеживание виджета чата Битрикс24 в Google Analytics

При использовании виджета чата Битрикс24 требуется отслеживать его использование в системе аналитики Google Analytics, что будет разобрано в инструкции ниже.

Подготовка счетчика Google Analytics к отслеживанию обращений в чат Битрикс24

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

Пример виджета чата Битрикс24 на сайте

После этого потребуется добавить следующий скрипт через Google Tag Manager.

<script type=»text/javascript»>

window.addEventListener(‘onBitrixLiveChat’, function(event)

{

 var widget = event.detail.widget;

 widget.subscribe({

 type: BX.LiveChatWidget.SubscriptionType.every,

 callback: function(event) {

 if (typeof(dataLayer) == ‘undefined’)

 {

   dataLayer = [];

 }

 dataLayer.push({‘event’ : ‘bx24chatonline’, ‘eventCategory’:’bx24chat’,’eventAction’: event.type});

 }

 });

});

</script>

Важно! Данный код передает события с категорией bx24chatonline, а в качестве действия передает действия, описанные ниже.

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

Важно! Чтобы передавать лишь часть событий можно будет воспользоваться кодом, описанным в конце статьи (вторая версия).

Для этого создается новый тег в интерфейсе GTM.

Создание нового тега для фиксации целей с виджета чата Bitrix24 в Google Менеджер Тегов

Даем ему понятное название и переходим к выбору конфигурации.

Выбор типа тега для фиксации целей для Google Analytics из чата Битрикс24 в Google Tag Manager

Кликаем на «Пользовательский HTML».

Выбор типа тега для обработки событий с Битрикс24 в GTM

Копируем представленный выше код и переходим к выбору триггера.

Ввод кода для отслеживания целей Google Analytics через dataLayer из чата Битрикс 24 в Google Analytics

Выбираем All Pages.

Выбор триггера All Pages из GTM для размещения кода для отслеживания конверсий Битрикс24 в Google Analytics

Сохраняем созданный тег.

Сохранение тегас кодом для отслеживания целей Google Analytics через dataLayer из чата Bitrix 24 в Google Analytics

Публикуем новую версию.

Публикация новой версии с кодом для отслеживания целей Google Analytics через dataLayer из чата Bitrix 24 в Google Analytics

Готово, теперь система сможет передавать события в DataLayer.

Передача событий и конверсий в Google Analytics при взаимодействии с чатом Bitrix24

 Переходим в интерфейс GTM во вкладку «Переменные» и в «Пользовательских» нажимаем на «Создать».

Создание новой переменной в Google Менеджер Тегов

Даем название eventAction и выбираем конфигурацию переменной.

Выбор типа переменной eventAction и eventCategory в Google Tag Manager для передачи целей из чата Битрикс24

В выпавшем списке выбираем «Переменная уровня данных».

Выбор переменной уровня данных в Google Tag Manager

В имя переменной  вводим «eventAction» и сохраняем ее.

Сохранение переменной eventCategory в GTM для отслеживания виджета чата Битрикс24

Аналогичным методом создаем еще одну переменную «eventCategory».

Создание переменной уровня данных eventCategory в Google Менеджер тегов для отслеживания виджета чата Битрикс24

Переходим к созданию нового тега.

Создание нового тега в Google Менеджер Тегов (GTM)

Даем название и выбираем тип тега.

Выбор типа тега в Google Tag Manager

Кликаем на «Google Аналитика – Universal Analytics».

Выбор типа тега Google Analytics для отслеживания чата Битрикс24 в Google Менеджер Тегов

Открываем список и нажимам на «Событие».

Создание тега и выбор передачи событий в GA для передачи событий чата Битрикс24

Далее заполняем:

  • Категория: {{eventCategory}}
  • Действие: {{eventAction}}
  • Ярлык: {{Page URL}}
  • Значение: пустое поле.
Выбор ID счетчика Гугл Аналитикс для передачи конверсий с виджета чата Битрикс24 в Google Analytics

В качестве настройки Google Analytics выбираем нужную переменную (созданную заранее или можно завести новую, отвечает за выбор нужного ID Google Analytics) и переходим к выбору триггера.

Введеный ID счетчика Гугл Аналитикс для передачи конверсий с виджета чата Битрикс24 в Google Analytics

Выбираем All Pages (Все страницы).

Выбор триггера All Pages из GTM для размещения кода для отслеживания конверсий Битрикс24 в Google Analytics

Публикуем новую версию.

Публикация новой версии с кодом для отслеживания целей Google Analytics через dataLayer из чата Bitrix 24 в Google Analytics

Все готово, можно переходить к проверке.

Тестирование и проверка результата

После этого необходимо дождаться выполнения события, соответственно написания в чат.

Написали в чат виджета Битрикс24

Далее переходим в отчет в Google Analytics в Отчет в реальном времени»-«События», где можно увидеть:

  • Категорию: bx24chat
  • Действие: sessionStart
Отчет в реальном времени и события из виджета чата Bitrix24 в Google Analytics

Можно посмотреть «Лучшие события» или сделать сегмент в «Источниках трафика».

Создание сегмента с целями из виджета чата Bitrix24 в Google Analytics

Для этого кликаем на «Все пользователи» или «Добавить сегмент».

Создание сегмента с целями из виджета чата Bitrix24 в Google Analytics

Создаем новый.

Создание нового сегмента с целями из виджета чата Bitrix24 в Google Аналитики

Выбираем «Условия» и в качестве Действия выбираем нужное нам действие.

Создание нового на основе события из виджета чата Битрикс24 сегмента в Google Аналитики

Аналогично можно будет создать цель для Google Analytics.

Доработка кода

Чтобы передавать лишь конкретные действия потребуется использовать код:

<script type=»text/javascript»>

window.addEventListener(‘onBitrixLiveChat’, function(event)

{

 var widget = event.detail.widget;

 widget.subscribe({

 type: BX.LiveChatWidget.SubscriptionType.every,

 callback: function(event) {

 if (typeof(dataLayer) == ‘undefined’)

 {

   dataLayer = [];

 }

 if (event.type == (BX.LiveChatWidget.SubscriptionType.sessionStart || BX.LiveChatWidget.SubscriptionType.userForm || BX.LiveChatWidget.SubscriptionType.userFile || BX.LiveChatWidget.SubscriptionType.userVote)) {

 dataLayer.push({‘event’ : ‘bx24chatonline’, ‘eventCategory’:’bx24chat’,’eventAction’: event.type});}

 }

 });

});

</script>

В этом случае конструкция «if», позволяет отслеживать лишь часть событий.

Доработать код под собственные цели можно используя  подсказки из события Метрики или же взяв исходник:

https://helpdesk.bitrix24.ru/open/7180919/#events

Подписывайтесь на наш канал в Яндекс.Дзен

Подписывайтесь на наши социальные сети

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (7 оценок, среднее: 5,00 из 5)
Загрузка...