Обычно такая необходимость возникает в случае обычной формы, когда нет возможности редактировать код сайта, когда появляющиеся элементы или селекторы неуникальны, стандартный триггер на форму не работает или срабатывает при любом клике на кнопку. Поехали!
- Создаем триггер типа Таймер, который будет срабатывать при загрузке страницы с формой
- Создаем пользовательский HTML-тег и ставим ему тригер из первого шага
- Создаем триггер типа Пользовательское событие
- Создаем обычные теги событий метрики или аналитикс и ставим им триггер из пункта 3
Вот так выглядит форма на сайте:
Обратите внимание на красный элемент внизу — он так и выглядит на сайте. В этом поле будет появляться сообщение либо об успешной отправке, либо об ошибке. С помощью расширения GTM Variable Builder мы сможем определить, как обращаться к тексту этого элемента через javascript. (Подробнее о работе с этим плагином написано в статье https://mellodesign.ru/blogs/7-rasshirenij-v-pomoshh-specialistu-po-kontekstnoj-i-targetirovannoj-reklame) Пока просто запомним, что к тексту элемента можно будет обратиться так:
document.querySelector(«.fusion-alert.alert.custom.alert-custom.fusion-alert-center.wpcf7-response-output.fusion-alert-capitalize.alert-dismissable»).innerText.trim()
Создаем триггер типа Таймер, который будет срабатывать при загрузке страницы с формой
Таймер срабатывает каждые 2 секунды. В условии активации указываем url нужной страницы.
Создаем пользовательский HTML-тег и ставим ему тригер из первого шага
Код тега:
<script>
var text = document.querySelector(«.fusion-alert.alert.custom.alert-custom.fusion-alert-center.wpcf7-response-output.fusion-alert-capitalize.alert-dismissable»).innerText.trim();
if (text == ‘ВАШЕ СООБЩЕНИЕ УСПЕШНО ОТПРАВЛЕНО. СПАСИБО!’) {
dataLayer.push({‘event’: ‘form_sent’});
var t_id = undefined;
for (var i = 0; i < 15; i++) {
t_id = dataLayer[i][«gtm.timerId»];
if (t_id != undefined) {window.clearInterval(t_id);}
}
}
</script>
В переменную text мы записываем текст сообщения об отправке формы, полученный с помощью GTM Variable Builder. Далее проверяем равно ли значение переменной text сообщению об успешной отправке формы, если не равно, то ничего не произойдет, и триггер таймер продолжит каждые 2 секунды выполнять проверку. Если текст сообщения совпал с ожидаемым, то мы:
- отправляем событие в GTM с именем ‘form_sent’
- создаем новую переменную t_id и присваиваем ей неопределенной значение
- запускаем цикл из 15 шагов, на каждом проходе которого будет совершаться попытка записать в переменную t_id значение id таймера (для этого мы пытаемся вытянуть из переменной dataLayer ее первые 15 элементов с параметром gtm.timerId; по сути мы проверяем первые 15 событий, которые были отправлены в GTM, и одно из них наверняка будет таймером, вот его id и берем. Это и есть тот таймер, из-за которого срабатывает этот HTML-тег)
- далее выполняется проверка, если в переменную t_id все-таки удалось записать id таймера, то выполняется код window.clearInterval(t_id), и таймер перестает срабатывать, а значит и тег перестает работать.
Проще говоря, тег будет проверять текст сообщения под формой, и если оно успешное, то отправляется событие в GTM и проверки прекращаются, иначе проверки продолжатся.
Создаем триггер типа Пользовательское событие
Имя события указываем таким же, какое отправлялось в HTML-теге — ‘form_sent’.
Создаем обычные теги событий метрики или аналитикс и ставим им триггер из пункта 3
Вот и всё! Теперь в вашем арсенале есть еще один способ настройки событий на форму, но лучше, конечно, пользоваться одним из тех, которые описаны в статье по ссылке в первом абзаце.