Отправка формы — один из основных способ получения лидов на сайте. Самый простой способ получить больше информации об этом действии — передавать данные о заполненной форме в 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:
Теперь при создании триггера в параметре Условия активации триггера необходимо выбрать переменную Click Element, а условие проверки Соответствует селектору CSS. В последнее поле вставьте скопированное значение:
Настройка тега для отправки данных аналогична пункту выше.
Вместо заключения
Отслеживание отправки формы с помощью базового триггера является простым, но не всегда действенным методом. Если вам повезло, то ваш алгоритм будет следующим:
- Определить уникальный идентификатор или CSS селектор формы;
- Настроить триггер типа Отправка формы с соответствующим условием;
- Настроить тег для передачи данных в Google Analytics;
- Настроить цель в Google Analytics (опционально).
В противном случае не забудьте почитать статью Отслеживать взаимодействие пользователей с формами при помощи Google Tag Manager. Решения описанные в ней более сложные технически, но работают со всеми формами.
