При использовании виджета чата Битрикс24 требуется отслеживать его использование в системе аналитики Google Analytics, что будет разобрано в инструкции ниже.
Подготовка счетчика Google Analytics к отслеживанию обращений в чат Битрикс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.
Даем ему понятное название и переходим к выбору конфигурации.
Кликаем на «Пользовательский HTML».
Копируем представленный выше код и переходим к выбору триггера.
Выбираем All Pages.
Сохраняем созданный тег.
Публикуем новую версию.
Готово, теперь система сможет передавать события в DataLayer.
Передача событий и конверсий в Google Analytics при взаимодействии с чатом Bitrix24
Переходим в интерфейс GTM во вкладку «Переменные» и в «Пользовательских» нажимаем на «Создать».
Даем название eventAction и выбираем конфигурацию переменной.
В выпавшем списке выбираем «Переменная уровня данных».
В имя переменной вводим «eventAction» и сохраняем ее.
Аналогичным методом создаем еще одну переменную «eventCategory».
Переходим к созданию нового тега.
Даем название и выбираем тип тега.
Кликаем на «Google Аналитика – Universal Analytics».
Открываем список и нажимам на «Событие».
Далее заполняем:
- Категория: {{eventCategory}}
- Действие: {{eventAction}}
- Ярлык: {{Page URL}}
- Значение: пустое поле.
В качестве настройки Google Analytics выбираем нужную переменную (созданную заранее или можно завести новую, отвечает за выбор нужного ID Google Analytics) и переходим к выбору триггера.
Выбираем All Pages (Все страницы).
Публикуем новую версию.
Все готово, можно переходить к проверке.
Тестирование и проверка результата
После этого необходимо дождаться выполнения события, соответственно написания в чат.
Далее переходим в отчет в Google Analytics в Отчет в реальном времени»-«События», где можно увидеть:
- Категорию: bx24chat
- Действие: sessionStart
Можно посмотреть «Лучшие события» или сделать сегмент в «Источниках трафика».
Для этого кликаем на «Все пользователи» или «Добавить сегмент».
Создаем новый.
Выбираем «Условия» и в качестве Действия выбираем нужное нам действие.
Аналогично можно будет создать цель для 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», позволяет отслеживать лишь часть событий.
Доработать код под собственные цели можно используя подсказки из события Метрики или же взяв исходник:
Подписывайтесь на наш канал в Яндекс.Дзен
Подписывайтесь на наш Telegram-канал
Подписывайтесь на наш Youtube-канал
Подписывайтесь на нашу группу ВКонтакте