Отслеживание исчезающих элементов с помощью GTM

Три способа, которые позволяют отслеживать исчезающие элементы с экрана и настраивать их с помощью Google Tag Manager.

На моем курсе по веб-аналитике у одного из слушателей возникла проблема извлечения элементов DOM у формы, которая исчезает практически сразу же после заполнения заявки. Окно с текстом «Спасибо! Данные успешно отправлены» появляется на 1-2 секунды, а затем сразу же пропадает.

В такой ситуации мы никак не сможем успеть исследовать элемент, выделить его и скопировать нужный CSS-селектор, чтобы затем применить его в каком-нибудь триггере. Бывают случаи, когда элемент исчезает при отведении от него фокуса. Например, такое происходит у раскрывающихся списков, или подсказок на сайте. Что же тогда делать?

Оказывается, решение есть! И даже не одно. Я «загуглил» и нашел 3 способа:

1. использование функции setTimeout(function(){debugger;}, interval) в консоли разработчика;
2. клавиша F8 в консоли разработчика, которая отвечает за остановку выполнения скриптов;
3. отключение выполнения JavaScript с помощью настройки в консоли разработчика.

Разберем каждый из этих способов.

1. setTimeout(function(){debugger;}, interval)

setTimeout() вызывает функцию или выполняет некоторый код после указанной задержки (в миллисекундах). Объединив его с оператором debugger, можно активировать режим отладки в консоле, когда автоматически скрываемый элемент виден, и не беспокоится о том, что он может исчезнуть. А interval – это и есть задержка в миллисекундах, по истечении которой будет выполнена функция. Если аргумент не задан, то значение равно 0.

Чтобы использовать этот способ, откройте консоль разработчика (клавиша F12 в Google Chrome), выберете вкладку Console и в строке введите:

Нажмите Enter. В окне браузера наведите курсор мыши на нужный элемент. Через заданный промежуток времени выполнение JavaScript прекратится. То есть у вас есть ровно 3 секунды (в этом примере), чтобы выделить нужный элемент. После этого вы можете исследовать его как вам захочется. Можно перейти на вкладку Elements, найти CSS-селектор и добавить его в GTM.

Для отмены действия можно просто перезагрузить страницу.

2. Клавиша F8

Все тоже самое, только данная команда упрощает нам остановку выполнения скриптов. Если в первом случае нам необходимо ждать указанное количество времени, то с помощью F8 мы запускаем debugger мгновенно. Этот способ наиболее предпочтительный, поскольку угадать, когда попап от успешно заполненный формы появится на экране (как у моего ученика на курсе) заранее не представляется возможным.

Для этого также нужно перейти в консоль разработчика, потом на вкладку Sources и когда отслеживаемый элемент появится на экране, нажать на клавишу F8.

Debugger перейдет в состоянии паузы. Вы можете делать в этот момент все, что захотите. Для отмены действия можно просто перезагрузить страницу.

3. С помощью отключения JavaScript

Способ похож на предыдущий, только вместо клавиши F8 -> простановка галочки. Для того, чтобы им воспользоваться, перейдите в консоль разработчика, затем справа нажмите на иконку с тремя точками – Settings (или клавишу F1).

Найдите настройку Disable JavaScript.

Пока там не должно стоять галочки. Теперь вам необходимо сделать так, чтобы исследуемый элемент появился на экране. Как только это наступит, вы должны успеть поставить галочку рядом с Disable JavaScript. Этим вы остановите дальнейшее выполнение скрипта формы, и элемент не пропадает с экрана.

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

В проекте моего ученика мы с помощью данного функционала смогли извлечь элементы DOM для отслеживаемой формы, чтобы затем использовать его в триггере «Доступность элемента».