При использовании виджета чата Битрикс24 требуется отслеживать его использование в системе аналитики Яндекс.Метрика, что будет разобрано в инструкции ниже.
Подготовка счетчика Яндекс.Метрики для отслеживания чата Битрикс24
Пример установленного виджета онлайн-консультанта Битрикс24
![Пример виджета чата Битрикс24 на сайте](https://seopulses.ru/wp-content/uploads/2020/05/11-5-1024x700.png)
Создание цели
В первую очередь потребуется перейти в интерфейсе системы аналитики Метрики во вкладке «Настройки»-«Цели» и кликнуть на кнопку «Добавить цель».
![Добавление новой цели в счетчике Яндекс Метрики для написания в виджет чата Bitrix24](https://seopulses.ru/wp-content/uploads/2020/05/1-15-1024x740.png)
Теперь выбираем тип «JavaScript-событие» и вводим «Название» и «Идентификатор цели». Например:
- Название: Написали в чат Bitrix24
- Идентификатор цели: chatbitrix
![Создание цели идентификатор конверсии в счетчике Яндекс Метрики для написания в виджет чата Bitrix24](https://seopulses.ru/wp-content/uploads/2020/05/2-19.png)
Далее проверяем результат где можно будет увидеть ID конверсии (в примере это 104612323).
![Созданная цель JS событие в счетчике Яндекс Метрики для написания в виджет чата Bitrix24](https://seopulses.ru/wp-content/uploads/2020/05/3-19.png)
Включение электронной коммерции
Работать способ будет при включенном сборе данных через DataLayer, а сделать это можно в настройках счетчика, переключив тумблер у пункта «Электронная коммерция».
![Включенная электронная коммерция и DataLayer в счетчике Яндекс Метрики для написания в виджет чата Битрикс 24](https://seopulses.ru/wp-content/uploads/2020/05/4-17.png)
Теперь копируем код счетчика и меняем на сайте. Если это код счетчика был внедрен напрямую, то можно поменять нужный файл через ftp.
![Копирование и замена кода счетчика метрики с включенной электронной коммерцией DataLayer](https://seopulses.ru/wp-content/uploads/2020/05/5-16.png)
Когда использовался Google Tag Manager потребуется перейти в нужный тег.
![Созданный тег в Google Tag Manager для фиксации цели виджета чата Битрикс24 в Яндекс.Метрике](https://seopulses.ru/wp-content/uploads/2020/05/6-16-1024x676.png)
Меняем код так, чтобы в нем была строка ecommerce:»dataLayer» и сохраняем тег.
![Ввод кода в Google Менеджер тегов для фиксации цели виджета чата Bitrix24 в Яндекс Метрике](https://seopulses.ru/wp-content/uploads/2020/05/8-12-1024x774.png)
Публикуем новую версию.
![Публикация новой версии Google Tag Manager для фиксации цели виджета чата Bitrix24 в Yandex Metrika](https://seopulses.ru/wp-content/uploads/2020/05/7-16-1024x533.png)
Доработка кода чата 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](https://seopulses.ru/wp-content/uploads/2020/05/9-8-1024x633.png)
Для тех, кто установил Google Tag Manager потребуется создать новый тег.
![Создание нового тега в Google Tag Manager для фиксации цели виджета чата Битрикс24 в Яндекс.Метрике](https://seopulses.ru/wp-content/uploads/2020/05/10-7-1024x548.png)
Даем ему название и выбираем его конфигурацию.
![Выбор типа тега в Google Tag Manager для фиксации цели виджета чата Битрикс24 в Яндекс Метрике](https://seopulses.ru/wp-content/uploads/2020/05/12-5-1024x608.png)
В качестве типа выбираем «Пользовательский HTML».
![Выбор типа тега Пользовательский HTML в Google Tag Manager для фиксации цели виджета чата Битрикс24 в Яндекс Метрике](https://seopulses.ru/wp-content/uploads/2020/05/13-4-1024x680.png)
После добавляем триггер.
![Выбор типа триггера для тега в Google Tag Manager для фиксации цели виджета чата Битрикс24 в Яндекс.Метрике](https://seopulses.ru/wp-content/uploads/2020/05/15-3-1024x784.png)
Выбираем «All pages».
![Выбор триггера All Pages в GTM](https://seopulses.ru/wp-content/uploads/2020/05/14-4-1024x197.png)
Сохраняем тег и публикуем новую версию.
![Сохранения тега в Google Tag Manager для фиксации цели виджета чата Битрикс24 в Яндекс.Метрике](https://seopulses.ru/wp-content/uploads/2020/05/16-3-1024x765.png)
Тестирование и проверка результата
После этого необходимо дождаться выполнения события, соответственно написания в чат.
![Написание в виджет чата Битрикс24 для тестирования цели в Яндекс Метрике](https://seopulses.ru/wp-content/uploads/2020/05/18-3-1024x705.png)
Далее переходим в отчет конверсии.
![Отчет конверсии в Яндекс Метрика](https://seopulses.ru/wp-content/uploads/2020/05/17-3.png)
Здесь можно будет увидеть все диалоги через виджет чата Битрикс24.
![Проверка цели написавших пользователей в отчете конверсии в Yandex Metrika](https://seopulses.ru/wp-content/uploads/2020/05/19-2-1024x635.png)
Дополнительно можно будет использовать эти данные при просмотре отчета по источникам трафика.
![Сегментация источников трафика по пользователям написавшим в чат Битрикс24 в Яндекс.Метрике](https://seopulses.ru/wp-content/uploads/2020/05/20-3-1024x652.png)
Или же создавать по нему сегмент.
![Созданный сегмент в Яндекс.Метрике по написавшим пользователям в чат Bitrix 24](https://seopulses.ru/wp-content/uploads/2020/05/21-3-1024x657.png)
Доработка кода
Данный код является переработкой уже имеющегося материала:
Где использовался каркас в виде:
<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) для того, чтобы передавать и иные типы событий.
Подписывайтесь на наш канал в Яндекс.Дзен
Подписывайтесь на наш Telegram-канал
Подписывайтесь на наш Youtube-канал
Подписывайтесь на нашу группу ВКонтакте
пишет. что ошибка.
Ошибка в строке 3 (символ 25): Parse error. Character ‘‘’ (U+2018) is not a valid identifier start char
Добрый день, спасибо за обратную связь, да к сожалению в коде появились лишние символы из-за верстки, можете скачать код здесь:
https://drive.google.com/drive/folders/1tKsRRdZaRGLr2_9ZzyDE9tbf3PGdGB4r?usp=sharing