1.В Битрикс24 заходим в "Контакт центр" и выбираем пункт "Виджет на сайт". Нажимаем "Добавить новый" и даем Виджету понятное название. Выбираем местоположение на сайте и проводим остальные необходимые настройки виджета.

2. Создаем открытую линию.
В пункте "Подключить" необходимо выбрать созданный нами ранее виджет.

Затем нажимаем "Настроить" и вносим изменения по пунктам, расположенным в левой части окна.

Далее заходим в созданный ранее виджет и выбираем только что созданную открытую линию в пункте открытые линии. В виджете можно настроить кроме онлайн-чата форму обратной связи и обратный звонок. Но мы этого делать не будем.

Копируем код виджета в буфер обмена.

Идем в GTM и создаем Новый тег - Пользовательский HTML и в пустое поле вставляем скопированный код. Триггер активации - All pages. Отправляем изменения. И можем проверять, Виджет установлен на сайт!

Для того, чтобы отслеживать взаимодействие пользователей с чатом необходимо настроить цели в аналитических системах Яндекс.Метрика и Google.Analytics.


Начнем с Яндекс.Метрики.

1. Для начала в Яндекс.Метрике данного сайта создаем цель "JavaScript-событие".

Называем цель так, чтобы нам было понятно B24_user_write - пользователь написал в чат
И включаем в настройках яндекс метрики e-commerce.

2. Затем создаем новый тег в GTM.
Выбираем "Пользовательский html" и вставляем следующий код:

<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" : "B24_user_write",
"goal_id" : "164495728"
},
"products": [ {} ]
}
}
});
}
});
});
</script>

Красным выделены те значения, которые мы должны заменить на собственные, которые прописаны во вновь созданной цели в Метрике.

Триггер активации - all pages.
Аналогично создаем цель для события "Пользователь открыл чат".
Сохраняем изменения в GTM и отправляем их на сервер.

3. Теперь проверяем как отображаются события в Яндекс.Метрике. Срабатывают ли они.
Открываем виджет, пишем тестовое сообщение в чат, ждем 20-30 минут, пока данные поступят в Яндекс.Метрику.
Переходим в Отчеты->Стандартные отчеты->Конверсии и проверяем, что у нас получилось:

Цели работают отлично!

1. Создаем новый тег в Google Tag Manager с логичным наименованием "Обработка событий для виджета B24".
   Тип - Пользовательский html

Вставляем следующий код в чистое поле:

<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>

Триггер активации - all pages.
Сохраняем новый тег.

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

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

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


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

2. Передача событий в Google Analytics при взаимодействии с чатом Битрикс 24.
Переходим в интерфейс GTM во вкладку «Переменные» и в «Пользовательских» нажимаем на «Создать».

Даем название eventAction и выбираем «Конфигурация переменной».
В выпавшем списке выбираем «Переменная уровня данных».

В имя переменной вводим «eventAction» и нажимаем «Сохранить»
Аналогичным методом создаем еще одну переменную «eventCategory».

3. Создаем триггер События виджета Б24 ГА.
Типом триггера будет специальное событие: bx24chatonline.
Условия активации триггера: Все специальные события.

4. Теперь необходимо создать новый тег для передачи событий виджета Б24 в GA.

Выбираем Тип тега - «Google Аналитика – Universal Analytics».
Тип отслеживания - событие.

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

• Категория: {{eventCategory}}
  
  
• Действие: {{eventAction}}
  
  
• Ярлык: {{Page URL}}
  
  
• Не взаимодействие: true
  
  

В качестве триггера Выбираем События виджета Б24 ГА и нажимаем "Сохранить".
Отправляем сохраненные изменения.

5.Проверяем в Google.Analytics передаются ли наши события виджета.
Для этого заходим в отчеты в реальном времени - События.

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

6. Далее настраиваем Цели на данные события.

Переходим в пункт Администратор - Цели - Создать цель.
Установка цели:
Собственная.
Далее - Даем понятное название.

Будем настраивать 2 цели - Открытие виджета и Пользователь написал в чат виджета Б24

Тип цели - Событие -Далее
И заполняем данные для каждого пункта следующим образом

Аналогичным способом настраиваем цель Пользователь написал в чат виджета Б24.

Проверяем как работают наши настройки.
В Отчете реального времени сразу появилось множество событий:

Но мы настроили только на 2 Действия по событию.

Увидеть достижение целей можно увидеть в отчете Конверсии -Цели - Обзор, но не сразу, а по прошествию нескольких часов, так как для обработки событий Гугл. Аналитике требуется время. Обычно около 2 часов.

Проверяем через пару часов отчет, и у нас отобразились наши вновь созданные цели.

Вот так легко и просто устанавливается виджет Битрикс24 на сайт!