, или как настроить передачу событий в аналитику, если разработчик виджета не предусмотрел это или нас не устраивает то, как он это реализовал.
В маркетинге, как правило, используются разнообразные виджеты обратной связи. Например, Callback (заказ звонка), онлайн-чат, форма сбора контактных данных. Естественно, нам важно собирать данные о взаимодействии с этими виджетами. Но механизм отслеживания событий в них может либо отсутствовать, либо не отвечать задачам нашей веб-аналитики. В таких случаях мы создаём свой механизм сбора необходимых нам данных.
В статье рассмотрены три разных кейса. Они отличаются методами, которые были применены для отслеживания событий.
Виджеты без iframe
Первый кейс о виджете, который не имеет интеграции с системами аналитики. Метод достаточно прост, но применим только к виджетам, которые не используют iframe и их работа реализована на Java Script. В таких виджетах события взаимодействия пользователя с ним отображаются через изменение DOM-модели страницы нашего сайта: добавление элемента или изменение его видимости.
Общая схема работы механизма такая. В виджетах, как правило, есть уведомление об успешном заказе звонка, об отправке данных и других подобных событиях. Это похоже на «Страницу благодарности», которая показывается после отправки формы на сайте. Если мы научим наш сайт «замечать» такие уведомления, то сможем отправлять в аналитику нужные нам события.
На уровне кода у этих уведомлений есть селектор или селекторы, который идентифицирует эти уведомления. Поэтому регистрировать их появление мы можем, как изменения видимости элементов с селекторами этих уведомлений. Для этого настраиваем стандартный триггер Google Tag Manager’а — «Доступность элемента».
Если вы еще не используете Google Tag Manager, рекомендую освоить его и использовать в работе. В итоге, сэкономите себе массу времени.
Находим для всех нужных нам уведомлений их селекторы и создаём под них триггеры «Доступность элемента». При этом обязательно проверяем, какие селекторы у уведомлений на мобильных версиях виджета. Например, у виджета Callback от LPTracker эти селекторы разные. В настройках триггера нужно поставить галочку «Регистрация изменений DOM». Без неё триггер не будет срабатывать.
Далее, получив нужные триггеры, мы можем настроить отправку событий в нашу аналитику.
Виджеты с iframe
Второй кейс появился, когда нужно было начать отслеживать события в онлайн-чате для сайта от Битрикс24. Этот виджет загружает во фрейм отдельную страницу со своего домена и все события и уведомления происходят фактически не на странице нашего сайта (домена), а на странице поддомена bitrix24.ru.
Для безопасности браузеры запрещают одной странице «узнавать» о событиях на другой странице. Но сама страница может посылать сообщения другой странице методом Window.postMessage(). Было бы отлично, если бы мы могли сами настроить отправку таких сообщений, но у нас нет доступа для редактирования страницы, которая загружается в iframe. Тогда можно предположить, что разработчик сам реализовал отправку таких сообщений.
Чтобы узнать это, можно поступить так. Регистрируем методом EventTarget.addEventListener() (для поддержки IE8 добавляем attachEvent) на своем сайте функцию, которая будет выполнятся при получении сообщений от домена iframe. Сама функция, например, будет выводить содержание сообщения в консоли панели разработчика. Затем совершаем в виджете тестовые действия, которые нужно отслеживать и проверяем приходят ли сообщения и какое у них содержание.
Таким способом я выяснил, что виджет Битрикс24 — каждый раз при отправке пользователем сообщения в чате — передаёт об этом информацию на страницу, где он установлен. Такие сообщения нам и нужны!
Переписываем нашу функцию, которая «слушает» эти сообщения, так, чтобы она передавала на уровень данных (с которым работает Google Tag Manager) пользовательское событие. Например, так: dataLayer.push({‘event’ : ‘b24SendMessage’}). Для этого события создаём в GTM триггер, который далее будем использовать для передачи событий в аналитику.
Детали отправки событий в аналитику не буду описывать в этой статье. Только отмечу, на что нужно обратить внимание. Чат — это переписка и сообщений в нём может быть отправлено много. Надо решить, что мы хотим отправлять в аналитику:1) факт того, что пользователь хоть раз написал в чат, 2) количество отправленных им сообщений, 3) количество разных диалогов пользователя в чате. Также надо учесть, чтобы при переходе на другую страницу сайта и продолжения переписки не отправлялось снова событие о начале переписки. Кроме этого нужен механизм, который отделяет одну переписку пользователя от новой переписки. Эти и другие важные для нашей аналитики нюансы можно реализовать, используя cookie.
Виджеты, которые отправляют события, но не так, как нам нужно
Третий кейс посвящён виджетам, которые умеют отправлять нужные нам события, но делают они это не так, как нам нужно, и не туда, куда нам нужно. Появился этот кейс при работе с виджетом от perezvoni.com. Этот виджет сам отправляет события в Google Analytics, Яндекс Метрику и рекламный кабинет Facebook. Но, например, не может отправлять их в рекламный кабинет ВКонтакте. Также нет возможности настроить, что будет отправляться, когда будет отправляться, а когда не будет отправляться. В итоге у нас есть отправка событий, но использовать её для наших задач мы не можем.
Первое, что приходит в голову, — воспользоваться методом из первого кейса. Но виджет достаточно гибкий и у него много разных сценариев работы и они могут различаться на разных устройствах. Поэтому есть риск упустить какие-то варианты уведомлений и собирать неполные данные.
Хорошо, что сам виджет знает, какие события он должен отправлять. Поэтому надежнее воспользоваться этим его умением. Эта идея лежит в основе третьего метода отслеживания событий в виджетах. Мы используем механизм отлавливания событий, заложенный в самом виджете, но обрабатываем отправку этих событий сами. В итоге получаем ту гибкость в настройке, которой нам не хватало.
Чтобы это реализовать, пишем скрипт, который перехватывает вызов функции, отвечающей за обработку нужных нам событий. Это нам позволит «слушать» интересующие нас события и далее работать с ними уже в соответствии с нашей логикой их обработки.
Важное замечание
Если разработчик виджета внесёт в его работу изменения, которые затронут часть, используемую нами в нашем механизме отслеживания, то наше отслеживание перестанет работать. Но на наше счастье, такое случается не так часто и это можно отловить и внести нужные изменения.