Почему страница на русском?
Этот блог начинался давно, когда писать материалы на английском языке для меня было сложно, и для достижения большей аудитории он велся на русском. Но с началом полномасштабного вторжения в феврале 2022 года я решил прекратить писать на этом языке. Моя страна переживает тяжелые времена, но мы с верой смотрим в будущее, и я больше не хочу поддерживать использование русского языка для новых материалов. Те статьи, что уже есть, остаются на сайте как часть истории блога, напоминая о предыдущих этапах его развития.Як і Україна, цей блог продовжує активно зростати та зміцнюватись без використання російської мови, незважаючи на всі випробування, і впевнено рухається до майбутнього 💙💛
вт, 28 мая 2019 г.
Отслеживание отправки формы с помощью базового триггера GTM
Отправка формы - один из основных способ получения лидов на сайте. Самый простой способ получить больше информации об этом действии - передавать данные о заполненной форме в Google Analytics.
Существует огромное количество способов сверстать форму, именно поэтому существует также множество способов отследить отправку формы. Я уже писал статью о том, как Отслеживать взаимодействие пользователей с формами при помощи Google Tag Manager. Но это руководство не описывало работу с базовым триггером отправки формы, о котором хочу рассказать сейчас.
Алгоритм следующий: сначала пробуете метод из этой статьи, если не работает - со статьи выше. В планах также написать статью по отслеживанию отправки формы с помощью типа триггера Видимость элемента.
- Знакомство с триггером типа Отправка формы
- Встроенные переменные категории Формы
- Практическая настройка триггера и тега для передачи данных в Google Analytics
Перед тем как мы начнем, давайте разберемся, почему описанный ниже способ может не работать. Для этого существует всего две причины:
- Не происходит событие submit. Здесь все просто, триггер отправки формы ожидает событие submit в браузере. Если оно не отправляется - ваше отслеживание работать не будет. Часто такая ситуация наблюдается при использовании пользовательских запросов для отправки данных форм, например ajax.
- Событие submit происходит, но что-то мешает подняться ему на уровень document. Связанно это с тем, что диспетчер тегов не прикрепляет обработчик события к каждому элементу на странице, а ожидает информацию о нем на верхнем уровне - узле document. Основной причиной ошибки является ситуация, когда распространение события останавливает обработчик jQuery, который возвращает значение false.
Если ваша форма попадает под одно из этих условий, вы можете обсудить изменения с разработчиком или же воспользоваться способом из первой статьи.
Знакомство с триггером типа Отправка формы
Настройка триггера типа Отправка формы очень сильно напоминает работу с триггером Только ссылки. Здесь также есть параметры Ожидать теги и Проверка ошибок, которые выполняют почти такие же функции.
- Ожидать теги - параметр позволяет приостановить отправку формы до тех пор, пока все теги, использующие триггер, сработают или пока не истечет время ожидания (по умолчанию 2000 миллисекунд)
- Проверка ошибок - установка флажка позволяет не запускать триггер, если действие формы по умолчанию (отправка и перенаправление) запрещено.
- Активировать триггер при наступлении события и выполнении всех этих условий - появляется только когда один из параметров Ожидать теги или Проверка ошибок активирован. Позволяет задать условия, при которых триггер отправки формы будет запускаться. Не путайте с параметром Условия активации триггера, который отвечает за активацию тега.
На практике, если нет особой необходимости в связи с появлением ошибок на сайте, большая часть этих параметров не используется. Основные условия задаются в параметре Условия активации триггера.
Встроенные переменные категории Формы
Мне всегда было непонятно, зачем в Google Tag Manager существует категория встроенных переменных Forms (Формы). Данные в этих переменных идентичны данным в переменных категории Clicks (Клики).
- Form Element — возвращает HTML элемент по которому был совершен клик. Да, вам не показалось, именно клик. А если точнее, то возвращает элемент, с которым связано действие. При этом действие может быть любым: отправка формы, клик по элементу, видимость элемента. (Другими словами возвращает значение ключа gtm.element с dataLayer)
- Form Classes — возвращает значение класса элемента (значение ключа gtm.elementClasses).
- Form ID — возвращает строку со значением атрибута id элемента автособытия (значение ключа gtm.elementId).
- Form Target — возвращает значение атрибута target (значение ключа gtm.elementTarget)
- Form URL — возвращает значение атрибута href или action (значение ключа gtm.elementUrl).
- Form Text — возвращает значение атрибута textContent / innerText (значение ключа gtm.elementText)
На практике использовать встроенные переменные категории Формы нет необходимости. Достаточно переменных категории Клики.
Практическая настройка триггера и тега для передачи данных в Google Analytics
Теперь, когда вы знаете всю теоретическую часть - пора перейти к практике.
Настройка триггера при наличии идентификатора формы
Для настройки триггера нам понадобиться узнать отличительную черту нашей формы, например ID или CSS селектор. Для этого откройте код формы и найдите открывающий тег form (в коде он начинается с <form): :
Далее скопируйте значение параметра id. В моем случае это searchform. Теперь перейдите в диспетчер тегов и создайте новый триггер типа Отправка формы. В параметре Условия активации триггера выберите переменную Click ID и вставьте скопированное значение в нужное поле.
Если все сделано верно, то в предварительном просмотре при отправке события вы увидите, что триггер сработал:
Для передачи события в Google Analytics осталось настроить тег. Пример ниже:
Настройка триггера с помощью CSS селектора
В случаях, когда идентификатора формы нет, вам на помощь придут CSS селекторы. Чтобы получить селектор нужного элемента, кликните по его коду правой кнопкой мыши и выберите Copy > Copy selector:
Иногда несколько элементов могут соответствовать одному селектору. Чтобы убедиться, что вы скопировали именно тот селектор, который охватывает все нужные вам элементы, вы можете воспользоваться моим собственным расширением PROANALYTICS. Этот инструмент подсвечивает на странице элементы, которые соответствуют заданному CSS-селектору.
Теперь при создании триггера в параметре Условия активации триггера необходимо выбрать переменную Click Element, а условие проверки Соответствует селектору CSS. В последнее поле вставьте скопированное значение:
Настройка тега для отправки данных аналогична пункту выше.
Вместо заключения
Отслеживание отправки формы с помощью базового триггера является простым, но не всегда действенным методом. Если вам повезло, то ваш алгоритм будет следующим:
- Определить уникальный идентификатор или CSS селектор формы;
- Настроить триггер типа Отправка формы с соответствующим условием;
- Настроить тег для передачи данных в Google Analytics;
- Настроить цель в Google Analytics (опционально).
В противном случае не забудьте почитать статью Отслеживать взаимодействие пользователей с формами при помощи Google Tag Manager. Решения описанные в ней более сложные технически, но работают со всеми формами.
Вебаналитик, Маркетолог