Отслеживание событий и конверсий Jivo с помощью Яндекс Тег Менеджера

Этот гайд - адаптация моего другого руководства по отслеживанию целей для чата Jivo с использованием Яндекс Тег Менеджера и Jivo API.

Читайте еще:

• Настройка JivoSite для Яндекс Метрики с помощью Google Tag Manager
• Отслеживание событий и конверсий Jivo в Google Analytics и Яндекс Метрике (официальная документация)
• Цели Jivo (справка Яндекс Метрики)

Автоматические цели Jivo

В официальной документации Jivo есть материал по настройке событий и конверсий в Google Analytics 4 и Яндекс Метрике. С его помощью вы можете настроить отслеживания различных событий с чатом Jivo и отправлять их в ваши счетчики аналитики. Но работать это будет только для тарифов VIP и PRO.

Поэтому если не вы видите данных в Яндекс Метрике и Google Analytics, скорее всего, вы используете бесплатный тариф.

У Яндекс Метрики и чата Jivo также существует встроенная интеграция, которая позволяет отслеживать и анализировать статистику по действиям с чатом в отчетах Метрики с помощью автоматических целей. В официальной справке Яндекса есть даже отдельная таблица со списком отслеживаемых действий Jivo.

• Автоцель Jivo: запуск чата клиентом (Jivo_Client_initiate_chat) - чат начат со стороны клиента. Возникает при отправке клиентом сообщения в форму чата при условии, что активное приглашение ранее не было показано;
• Автоцель Jivo: автоприглашение в чат (Jivo_Proactive_invitation_accepted) - клиент принял активное приглашение, написав сообщение в ответ. Также срабатывает при нажатии кнопки чата в мобильной версии, если до этого сработало активное приглашение;
• Автоцель Jivo: ручное приглашение в чат (Jivo_Client_answer_on_agent_request) - оператор вручную начал диалог с клиентом через функцию Посетители, а посетитель ответил, отправив сообщение в чат;
• Автоцель Jivo: офлайн-сообщение (Jivo_Offline_message_sent) - клиент отправил оффлайн-сообщение.

Чтобы автоматические цели регистрировались в вашем счетчике, вам необходимо проверить, чтобы в интерфейсе Метрики они были включены. Для этого перейдите в раздел Настройки - Счетчик и убедитесь, что напротив блока Автоматические цели стоит Вкл.:

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

Вы можете управлять автоцелями Jivo так же, как другими автоматическими целями: редактировать и удалять. Если вам нужно отслеживать в Метрике другие события Jivo, их можно добавить вручную с помощью официального руководства.

Ограничения

• автоматические цели не учитываются в общем количестве целей счетчика;
• Данный тип цели невозможно использовать в составной цели;
• сервис фиксирует достижение посетителем одной и той же цели на одном счетчике не чаще, чем раз в секунду;
• во время одного визита посетителя сервис может фиксировать до 1000 достижений офлайн-целей и 400 достижений онлайн-целей, созданных для счетчика;
• при редактировании счетчика или цели накопленная ранее информация не изменяется;
• если вы удалите цель, собранная по ней информация будет недоступна в отчетах;
• автоматическая цель не будет создана, если на счетчике уже есть цель с точно таким же условием.

Jivo API

Но вы можете использовать Jivo API (Widget API) и фиксировать нужные события с помощью кодов и Яндекс Тег Менеджера, а затем отправлять эту информацию в Яндекс Метрику.

Jivo вызывает различные функции на странице, чтобы сообщить о возникновении того или иного события. Вы можете объявить на странице любую из нижеперечисленных функций и выполнять в ней логику обработки возникшего события. Например, с помощью события jivo_onMessageSent вы можете передать в Яндекс Метрику факт отправки пользователем первого сообщения в чат.

В Widget API доступны следующие Callback-функции:

• jivo_onLoadCallback - событие вызывается при завершении инициализации виджета Jivo;
• jivo_onOpen - событие вызывается при открытии окна диалога Jivo;
• jivo_onMessageSent - событие вызывается когда посетитель отправил первое сообщение в чат;
• jivo_onAccept - событие срабатывает, когда оператор нажал кнопку Ответить в уведомлении о новом чате или принял диалог в интерфейсе сервиса;
• jivo_onClose - событие срабатывает, когда происходит сворачивание окна диалога Jivo (нажатие на крестик онлайн-чата);
• jivo_onIntroduction - событие активируется, когда посетитель ввел контактные данные;
• jivo_onResizeCallback - событие срабатывает при любом изменении размеров виджета, например, при его сворачивании или разворачивании, а также при перемещении окна онлайн-чата по странице;
• jivo_onCallStart - событие вызывается при начале звонка на клиентский номер, а также при показе виджета на странице;
• jivo_onCallEnd - событие вызывается при окончании звонка с результатом звонка;
• jivo_onChangeState - событие активируется при переключении виджета из одного состояния в другое, например, при сворачивании и разворачивании окна онлайн-чата;
• jivo_onMessageReceived - событие регистрируется когда от оператора поступило новое сообщение в чат;
• jivo_onClientStartChat - событие сработает, когда пользователь инициирует диалог, отправив сообщение в чат. И только в том случае, если ранее в чате не появлялось активное приглашение от лица оператора;
• jivo_onWidgetDestroy - событие вызывается при полном удалении виджета со страницы. Срабатывает при вызове метода jivo_destroy().

Как видите, список отслеживаемых событий достаточно большой, но все равно есть различия с теми событиями, которые сейчас автоматически отправляются в Яндекс Метрику. Я рекомендую отслеживать как минимум четыре из перечисленных выше:

• jivo_onOpen - когда открывается окно онлайн-чата;
• jivo_onMessageSent - когда посетитель отправил первое сообщение в чат;
• jivo_onAccept - когда оператор начинает диалог с пользователем;
• jivo_onIntroduction - когда посетитель ввел контактные данные.

Настройка в Яндекс Тег Менеджере

Теперь перейдем в интерфейс Яндекс Тег Менеджера и начнем настройку.

Активация функции “Пользовательский HTML”

Первым делом вам необходимо активировать опцию Пользовательский HTML в настройках счетчика Яндекс Метрики.

Для этого перейдите в раздел Настройки - Счетчик:

И включите функцию Пользовательский HTML:

Пользовательский HTML в Yandex Tag Manager (YTM) - это тип тега, который позволяет добавлять на сайт произвольный HTML-код, JavaScript или другие скрипты, которые не поддерживаются стандартными тегами и которых нет в каталоге шаблонов. Код будет выполняться при срабатывании триггера, в нем также можно использовать переменные для динамической подстановки нужных значений.

Сохраните изменения.

Создание триггера

Перейдите в Яндекс Тег Менеджере на вкладку Триггеры и создайте триггер типа Просмотр страницы:

Задайте ему название (например - All Pages (Все страницы)) и сохраните его.

Создание тега

Теперь перейдите в раздел Теги создайте тег типа Пользовательский HTML с таким кодом:

В Яндекс Тег Менеджере:

В качестве триггера активации выберите All Pages (Все страницы). Задайте тегу название и сохраните его.

Скрипт работает следующим образом: для каждой callback-функции мы прописываем уровень данных (dataLayer) с соответствующим названием события в event. Оно может быть произвольным. Его в дальнейшем вы будете использовать при настройке триггера. Поскольку общего коллбэка, который бы отдавал все параметры, в Jivo нет, потребуется прописать каждую функцию отдельно.

События будут фиксироваться в следующих случаях:

• когда открывается окно онлайн-чата;
• когда посетитель отправил первое сообщение в чат;
• когда оператор начинает диалог с пользователем;
• когда посетитель ввел контактные данные.

Создание триггера специального события

Вновь перейдите на вкладку Триггеры и создайте триггер типа Специальное событие. В поле Название события вставьте следующую конструкцию:

Обязательно поставьте галочку

С помощью регулярного выражения через символ | перечисляются все события, которые вы будете отслеживать. Задайте название триггеру и сохраните его.

Создание целей в интерфейсе Яндекс Метрики

В Яндекс Тег Менеджере для отслеживания всех событий Jivo можно использовать один триггер и тег. А вот чтобы эта информация корректно фиксировалась в конверсиях Метрики, вам необходимо создать для каждого события свою собственную цель.

Для этого перейдите в раздел Цели и создайте поочередно столько целей с типом JavaScript-событие, сколько событий вы отслеживаете. В моем примере их четыре:

1. jivo_onOpen
2. jivo_onMessageSent
3. jivo_onAccept
4. jivo_onIntroduction

Для каждого из них пропишите условие - Идентификатор цели совпадает и затем название callback-функции:

Примечание: задавать идентификаторы цели для каждого события нужно точно так же, как они прописаны у вас в триггере специального события в Яндекс Тег Менеджере!

Создание тега Яндекс Метрики

Вернитесь в Яндекс Тег Менеджер, перейдите на вкладку Теги и создайте тег типа Яндекс Метрика:

В открывшемся окне задайте следующую конфигурацию тега:

• ID счетчика - вставьте идентификатор вашего счетчика Яндекс Метрики. Он отображается вверху страницы;
• Идентификатор цели - {{Event}}

В качестве триггера активации выберите триггер специального события, созданный на предыдущем шаге. Задайте тегу название и сохраните его.

Как только будет совершено событие(я), которое(ые) вы задали в триггере, активируется тег событий Яндекс Метрики, и он передаст информацию о совершенном событии с названием, которое автоматически будет подставлено из встроенной переменной Event в момент его срабатывания. Именно поэтому мы ссылаемся на нее {{ }} в поле Идентификатор цели.

Проверка настроек

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

Поскольку в рамках этой статьи мы настроили четыре из них (jivo_onOpen, jivo_onMessageSent, jivo_onAccept и jivo_onIntroduction), по очереди нажмите на каждое на шкале по мере их срабатывания, а затем убедитесь, что тег Яндекс Метрики срабатывает как надо.

Например, для события jivo_onIntroduction триггер и тег срабатывают после того, как пользователь ввел свои контактные данные:

Посмотрев тег детальнее и переключив опцию Отображать переменные как на Значения, вы увидите, как вместо переменной {{Event}}, которую мы задали в теге Яндекс Метрика, отображается значение конкретного события (=динамически). В данном случае - jivo_onIntroduction:

Конверсии в Яндекс Метрике

После того, как вы проверите все события Jivo в режиме предварительного просмотра Яндекс Тег Менеджера, вернитесь в интерфейс Яндекс Метрики, откройте раздел Конверсии и убедитесь, что данные о совершенных событиях поступают в ваш счетчик:

Если это так, то вы все сделали правильно. В противном случае пройдитесь по всем шагам руководства и еще раз проверьте свои настройки.

О том, как настраивается Jivo для Google Analytics 4 с помощью Google Tag Manager и Jivo API, читайте в этом материале.