Как отслеживать онлайн-чат SiteHeart в Google Analytics

Один из видов взаимодействия пользователем с сайтом, может служить онлайн-чат. Но большинство систем, реализующих такой функционал не дает возможности передавать в Google Analytics данные о взаимодействии с чатом.

На примере SiteHeart разберем, как можно настроить отслеживание событий связанных с использованием чата.

Всю настройку будем проводить через Google Tag Manager, что значительно упростит процесс. Базовую настройку GTM опустим, сейчас в сети множество статей по этому поводу, и разобраться не сложно, начинаем с места, что у нас настроен Google Analytics. Для начала необходимо включить теги автоматических событий:

1. Прослушивание отправки формы (в разделе Блок прослушивания событий)

2. Прослушивание кликов (в разделе Блок прослушивания событий)

3. И по аналогии, можно включить прослушивание кликов по ссылке, всё равно пригодится.

При настройки этих тегов, обязательно устанавливаем правила активации тегов — «Все страницы».

Настраиваем отслеживание взаимодействие с SiteHeart

У нас будет три события:

• нажатие на кнопку чата;
• отправка сообщения офлайн;
• отправка сообщения онлайн.

1. Нажатие на кнопку чата

Для отслеживания этого события, создаем новый тег:

Тут всё стандартно, новое событие в Google Analytics, с категорией SH Window Open, на которое, в дальнейшем можно настроить цель в GA.

Активация правила (тег активируется если пользователь нажал на окно — событие gtm.click, при чем класс элемента — shc sh_btn_char):

Т.е. нам нужно отследить успешное выполнение формы, после нажатия кнопки «отправить». Для этого делаем новый тег:

Где активация правил будет (так как это форма, мы используем событие — gtm.formSubmit и id элемента, а не класс как в прошлый раз — sh_form_shi_1):

После чего сохраняем и этот тег.

3. Отправка сообщения онлайн

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

Для этого необходимо создать новый тег (тип тега — Пользовательский HTML):

<script type="text/javascript">// <![CDATA[
document.getElementsByClassName('shc')[0].onkeydown = function(e){   var e=window.event || e;   if (e.keyCode == 13) { dataLayer.push({event:'shChat'}); } } document.getElementsByClassName('shc sh_enter_ico')[0].onclick=function() { dataLayer.push({ event:'shChat' });}
// ]]></script>

И правило активации будет:

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

И на последок, делаем еще один тег, который передает в GA событие о факте взаимодействия с полем чата:

Где правило активации будет:

Сохраняем, создаем версию, публикуем и наслаждаемся новыми событиями в Google Analytics.

PS: В примере, для простоты понимания, я показал разбивку на несколько тегов, хотя в реальности всё эти события можно формировать в рамках одного тега, просто подставляя макрос в поле «Категория событий».