Отслеживание виджета чата Битрикс24 в Яндекс.Метрике

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

Подготовка счетчика Яндекс.Метрики для отслеживания чата Битрикс24

Пример установленного виджета онлайн-консультанта Битрикс24

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

Создание цели

В первую очередь потребуется перейти в интерфейсе системы аналитики Метрики во вкладке «Настройки»-«Цели» и кликнуть на кнопку «Добавить цель».

Добавление новой цели в счетчике Яндекс Метрики для написания в виджет чата Bitrix24

Теперь выбираем тип «JavaScript-событие» и вводим «Название» и «Идентификатор цели». Например:

  • Название: Написали в чат Bitrix24
  • Идентификатор цели: chatbitrix
Создание цели идентификатор конверсии в счетчике Яндекс Метрики для написания в виджет чата Bitrix24

Далее проверяем результат где можно будет увидеть ID конверсии (в примере это 104612323).

Созданная цель JS событие в счетчике Яндекс Метрики для написания в виджет чата Bitrix24

Включение электронной коммерции

Работать способ будет при включенном сборе данных через DataLayer, а сделать это можно в настройках счетчика, переключив тумблер у пункта «Электронная коммерция».

Включенная электронная коммерция и DataLayer в счетчике Яндекс Метрики для написания в виджет чата Битрикс 24

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

Копирование и замена кода счетчика метрики с включенной электронной коммерцией DataLayer

Когда использовался Google Tag Manager потребуется перейти в нужный тег.

Созданный тег в Google Tag Manager для фиксации цели виджета чата Битрикс24 в Яндекс.Метрике

Меняем код так, чтобы в нем была строка ecommerce:”dataLayer” и сохраняем тег.

Ввод кода в Google Менеджер тегов для фиксации цели виджета чата Bitrix24 в Яндекс Метрике

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

Публикация новой версии Google Tag Manager для фиксации цели виджета чата Bitrix24 в Yandex Metrika

Доработка кода чата Bitrix24 для отслеживания в Yandex Metrika

Передавать конверсию можно при помощи дополнительного кода:

<script type=”text/javascript”>

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

{

                var widget = event.detail.widget;

                // Обработка событий

                widget.subscribe({

                               type: BX.LiveChatWidget.SubscriptionType.userMessage,

                               callback: function(data) {

                               // любая команда

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

                                               {

                                                 dataLayer = [];

                                               }

                                               dataLayer.push({

                                                               “ecommerce”: {

                                                                              “purchase”: {

                                                                                              “actionField”: {

                                                                                                              “id” : “indentificator”,

                                                                                                              “goal_id” : “IDceli”

                                                                                              },

                                                                                              “products”: [ {} ]

                                                                              }

                                                               }

                                               });

                               }

                });

});

</script>

В этом случае:

  • Indentificator — это идентификатор цели (в примере это chatbitrix);
  • IDceli — это ID конверсии (из примера 104612323).

Далее необходимо добавить этот код под счетчиком метрики.

Ввод кода для передачи целей событий в Яндекс.Метрику из виджета чата для сайта Bitrix24

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

Создание нового тега в Google Tag Manager для фиксации цели виджета чата Битрикс24 в Яндекс.Метрике

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

Выбор типа тега в Google Tag Manager для фиксации цели виджета чата Битрикс24 в Яндекс Метрике

В качестве типа выбираем «Пользовательский HTML».

Выбор типа тега Пользовательский HTML в Google Tag Manager для фиксации цели виджета чата Битрикс24 в Яндекс Метрике

После добавляем триггер.

Выбор типа триггера для тега в Google Tag Manager для фиксации цели виджета чата Битрикс24 в Яндекс.Метрике

Выбираем «All pages».

Выбор триггера All Pages в GTM

Сохраняем тег и публикуем новую версию.

Сохранения тега в Google Tag Manager для фиксации цели виджета чата Битрикс24 в Яндекс.Метрике

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

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

Написание в виджет чата Битрикс24 для тестирования цели в Яндекс Метрике

Далее переходим в отчет конверсии.

Отчет конверсии в Яндекс Метрика

Здесь можно будет увидеть все диалоги через виджет чата Битрикс24.

Проверка цели написавших пользователей в отчете конверсии в Yandex Metrika

Дополнительно можно будет использовать эти данные при просмотре отчета по источникам трафика.

Сегментация источников трафика по пользователям написавшим в чат Битрикс24 в Яндекс.Метрике

Или же создавать по нему сегмент.

Созданный сегмент в Яндекс.Метрике по написавшим пользователям в чат Bitrix 24

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

Данный код является переработкой уже имеющегося материала:

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

Где использовался каркас в виде:

<script type=”text/javascript”>

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

{

  var widget = event.detail.widget;

  // 1. Установка внешней авторизации пользователя

  …

  // 2. Установка дополнительных данных

  …

  // 3. Обработка событий

  …

});

</script>

Скачать код можно здесь:

https://drive.google.com/drive/folders/1tKsRRdZaRGLr2_9ZzyDE9tbf3PGdGB4r?usp=sharing

А в виде методов при работе с виджетом:

МетодОписание
widget.open()открытие
widget.close()закрытие
widget.subscribe()подписка на событие
widget.setUserRegisterData()Авторизация
widget.setCustomData()установка дополнительных данных

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

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

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

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

Подписывайтесь на нашу группу ВКонтакте