Главное Свежее Вакансии   Проекты
277 0 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Специфичная настройка события на отправку формы в GTM

В данной публикации рассмотрим случай настройки, когда ни одним классическим способом выполнить настройку не удалось.

Есть разные способы настроить событие метрики или аналитикс на отправку формы через Google Tag Manager. Например, в этой статье разобраны 5 ключевых способов. Все они по своему удобны и применимы для многих случаев. В данной публикации рассмотрим случай настройки, когда ни одним классическим способом выполнить настройку не удалось.

Обычно такая необходимость возникает в случае обычной формы, когда нет возможности редактировать код сайта, когда появляющиеся элементы или селекторы неуникальны, стандартный триггер на форму не работает или срабатывает при любом клике на кнопку. Поехали!

Вот так выглядит форма на сайте:


Обратите внимание на красный элемент внизу — он так и выглядит на сайте. В этом поле будет появляться сообщение либо об успешной отправке, либо об ошибке. С помощью расширения 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-тег и ставим ему тригер из первого шага



Код тега:

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);}

}

}

В переменную text мы записываем текст сообщения об отправке формы, полученный с помощью GTM Variable Builder. Далее проверяем равно ли значение переменной text сообщению об успешной отправке формы, если не равно, то ничего не произойдет, и триггер таймер продолжит каждые 2 секунды выполнять проверку. Если текст сообщения совпал с ожидаемым, то мы:

  1. отправляем событие в GTM с именем ‘form_sent’
  2. создаем новую переменную t_id и присваиваем ей неопределенной значение
  3. запускаем цикл из 15 шагов, на каждом проходе которого будет совершаться попытка записать в переменную t_id значение id таймера (для этого мы пытаемся вытянуть из переменной dataLayer ее первые 15 элементов с параметром gtm.timerId; по сути мы проверяем первые 15 событий, которые были отправлены в GTM, и одно из них наверняка будет таймером, вот его id и берем. Это и есть тот таймер, из-за которого срабатывает этот HTML-тег)
  4. далее выполняется проверка, если в переменную t_id все-таки удалось записать id таймера, то выполняется код window.clearInterval(t_id), и таймер перестает срабатывать, а значит и тег перестает работать.

Проще говоря, тег будет проверять текст сообщения под формой, и если оно успешное, то отправляется событие в GTM и проверки прекращаются, иначе проверки продолжатся.

Создаем триггер типа Пользовательское событие



Имя события указываем таким же, какое отправлялось в HTML-теге — ‘form_sent’.

Создаем обычные теги событий метрики или аналитикс и ставим им триггер из пункта 3




Вот и всё! Теперь в вашем арсенале есть еще один способ настройки событий на форму, но лучше, конечно, пользоваться одним из тех, которые описаны в статье по ссылке в первом абзаце.

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Первые Новые Популярные
Комментариев еще не оставлено
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.