Отслеживание окон alert () с помощью GTM
Сайты, на которых после заполнения заявки открывается диалоговое окно об успешной отправке формы, еще существуют! В этой статье разберем как можно отслеживать такие окна с помощью Google Tag Manager.
Команда alert () выводит на экран окно с сообщением, приостанавливает выполнение сценария и дальнейшее взаимодействие пользователя со страницей до тех пор, пока это окно не закроется. В рассматриваемом примере это делается с помощью кнопки ОК:
Диалоговое окно alert ()
У таких окон нет ни классов, ни идентификаторов, ни CSS-селекторов. К этому объекту таким образом нельзя достучаться. Но можно использовать готовое решение – заместитель (Proxy pattern), который позволит отслеживать такие модальные окна. Оригинал статьи и пример кода доступны по ссылке (Автор: David Vallejo).
Чтобы это сделать, необходимо в Google Tag Manager вставить в тег типа Пользовательский тег HTML следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
if(!(document.all && !document.addEventListener)) { if(!window.proxied_alert) { window.proxied_alert = window.alert; window.alert = function() { var message = (!arguments[0]) ? 'null': arguments[0]; dataLayer.push({'event': 'alert_showed','alert_message': message}); return proxied_alert.apply(this, arguments); } } } |
В GTM это выглядит так:
Код для отслеживания alert () в Google Tag Manager
Триггер активации – All Pages (Все страницы). Можно задать и другое условие. Например, активировать тег только на тех страницах, где появляются такие окна.
К сожалению, это не будет работать для Internet Explorer ниже 9 версии, поскольку в них alert не функция (function), а объект (object). Поэтому в самом начале кода добавлена проверка для браузеров до IE9.
С помощью такой конструкции мы передаем информацию в dataLayer. Теперь нам необходимо создать триггер типа Пользовательское событие - alert_showed и alert_message. При этом можно использовать регулярные выражения:
Триггер - Пользовательское событие
Сохраняем. Также можно создать соответствующие теги для отправки данных в Google Analytics и Яндекс.Метрику.
Теперь при заполнении формы будет открываться всплывающее окно, срабатывать событие и активироваться тег.
В режиме предварительного просмотра GTM это выглядит так:
В режиме отладки GTM
В alert_message передалось и сообщение, которое пользователь видит в диалоговом окне после отправки формы:
alert_message
Эта информация может пригодиться, поскольку бывают такие сайты, на которых нет проверки валидации заполненной формы, и тогда событие alert_showed будет фиксироваться каждый раз, когда пользователь просто будет нажимать на кнопку Отправить. Однако клик по кнопке не равноценен отправленной заявке.
В этом случае alert_message в Google Tag Manager можно использовать пользовательскую переменную типа Переменная уровня данных.
Переменная уровня данных
И тогда наш триггер нужно немного изменить, поскольку мы будем фиксировать не все события, а только те, в которых выводится сообщение об успешной отправке заявки.
Отслеживание некоторых специальных событий
Сохраняем изменения и публикуем обновленный контейнер GTM.
