Кейс-гайд по разметке форм: что делать, если нет доступа к коду сайта, а триггер «Видимость элемента» не работает?

У меня тут родился кейс-гайд по настройке отслеживания форм на сайте. Это решение можно использовать для любого действия на сайте, после которого появляется уникальный текст или элемент успешно выполненного действия.

Я делаю веб-аналитику и контекстную рекламу в aberix. На сайте Gostudy, проекта по обучению чешскому языку онлайн, нужно было разметить форму. Задачка казалась простой, но только казалась.

Сразу уточню. Материал неактуален для лендингов и простых сайтов, сделанных на конструкторах. Но у нас был сложный многостраничник, собранный на Wordpress, он много раз пересобирался, в него добавляли много новых страниц, и многое работало не совсем корректно. Поэтому пришлось выдумывать универсальное решение — оно подойдет тем, кто оказался в схожей ситуации.

• Настраиваем триггер «Видимость элемента» и переменную уровня DOM — безуспешно

• Создаем JavaScript-код

• Выбираем триггер для тега

Настраиваем триггер «Видимость элемента» и переменную уровня DOM — безуспешно

Первым делом я решил пойти по пути наименьшего сопротивления, то есть по самому быстрому пути, и использовать связку триггер «видимость элемента» + переменная уровня DOM. Казалось бы, вариант беспроигрышный. Триггер должен был срабатывать при отправке формы, когда ее наполнение менялось.

Но этот вариант не работал. Хотя я корректно указал условие срабатывания триггера, триггер активизировался сразу, когда форма попадала в зону видимости.

Я подумал, что это можно решить срабатыванием триггера не «раз на страницу», а «при каждом появлении элемента». Но и тут была проблема. Когда пользователь отправлял форму и появлялся текст успешной отправки, триггер видимости не срабатывал — форма уже была в поле зрения пользователя. Он срабатывал в следующий раз, только если форма в состоянии «отправлена» пропадала из поля зрения пользователя и потом появлялась снова.

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

Создаем JavaScript-код

Я потратил много времени на попытки решить эту проблему базовыми инструментами GTM и понял, что время уходит, а ближе к решению проблемы я не становлюсь. Решил выполнять эту задачу более сложным образом — с помощью JavaScript.

Как мы знаем, с помощью тега «Пользовательский HTML» можно запускать на сайте любой JavaScript-код. Решил зайти через использование инструкции IF.

if (document.querySelector(".request__title").innerText ==

Идея была следующая: если элемент на сайте содержит в себе текст успешной отправки формы, мы отправляем в datalayer событие, к которому впоследствии привяжем триггер.

На выходе получился следующий код:

if (document.querySelector(".request__title«).innerText == (’Ваша заявка принята!’)) {

window.dataLayer.push({’event’:’form_submit’})

} else {};

При переводе на человеческий получится примерно следующее:

Если элемент документа содержит в себе текст равный *указанный текст*, то отправь в datalayer событие *имя события*, в противном случае ничего не делай.

Важный момент: чтобы вся эта конструкция работала, нужно получить правильный путь элемента через document.querySelector. Тут нам на помощь приходит Яков Осипенков с его статьей про чудесное расширение для Google Chrome — GTM Variable Builder, которое облегчает жизнь веб-аналитиков в подобных задачах. Всем настоятельно рекомендую с ней ознакомиться.

Если в двух словах, с помощью этого расширения можно получить точный document.querySelector для элемента, а также проверить, какой текст он в себе содержит. Установить GTM Variable Builder можно с его страницы в магазине Chrome.

Выбираем триггер для тега

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

Поэтому я решил использовать триггеры «Клик по кнопке», «Клик по ссылке» и кастомное событие нажатия кнопки Enter (для этого я добавил на сайт скрипт, отслеживающий нажатия кнопки Enter и отправляющий в datalayer соответствующее событие).

Таким образом, каждый раз, когда пользователь кликает по кнопке или ссылке на сайте (клики по некоторым кнопкам на сайте считаются как клики по ссылке), будет выполняться наш JS-код и происходить проверка соответствия.

На изменение содержания элемента требуется время. Мы не можем делать проверку сразу после клика — нужно выждать небольшой отрезок времени.

Поэтому я использовал функцию setTimeout(function(){ — с ее помощью я задал небольшую задержку перед тем, как код будет выполняться. Итоговый кусок кода выглядит так:

setTimeout(function(){

if (document.querySelector(".request__title").innerText == (’Ваша заявка принята!’)) {

window.dataLayer.push({’event’:’form_submit’})

} else {};

}, 1500); // Время задержки перед срабатыванием

В итоге мы имеем следующее: JS-код отправляет в datalayer событие при отправке формы. Теперь мы можем использовать это datalayer событие, для того чтобы сделать триггеры для каждой формы и начать отслеживать их отправку. Буду рад вашим комментариям и замечаниям.