Найти в Дзене
SeoPulses

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

Оглавление

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

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

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

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

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

-2

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

  • Название: Написали в чат Bitrix24
  • Идентификатор цели: chatbitrix
-3

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

-4

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

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

-5

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

-6

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

-7

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

-8

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

-9

Доработка кода чата 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).

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

-10

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

-11

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

-12

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

-13

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

-14

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

-15

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

-16

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

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

-17

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

-18

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

-19

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

-20

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

-21

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

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

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>

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

Метод - Описание

widget.open() - открытие

widget.close() - закрытие

widget.subscribe() - подписка на событие

widget.setUserRegisterData() - Авторизация

widget.setCustomData() - установка дополнительных данных

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

Источник: https://seopulses.ru/otslejivaniye-chata-bitrix24-v-yandex-metrike/

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

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

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