Пошаговое руководство по настройке всего что можно через GTM. Часть 2

В прошлой жизни я успел написать заметку о том, как начать настройку GTM и сделать первые шаги — завязать Gogle Tag Manager на Метрику и Аналитику.

Теплым апрельским днем 2021 г., глядя в окно на памятник высотой 98 м тому, с чьим именем неразрывно связаны загадки знаменитой московской башни, понял, что самое время продолжить делиться опытом и создавать памятки для себя и для вас.

За плечами опыт передачи простых и сложных целей, настройки кросплатформенного отслеживания для e-commerce, сотни созданных триггеров и тегов, часы мучений в режиме Preview в исправлении непередающихся событий. Думаю, я преодолел процентов 30 пути к освоению этого инструмента с учетом необходимости совершенствования знаний JS, GA, базовых принципов аналитики (см. раздел книг, там есть Кошик и другие полезности). Например, я до сих пор не измеряю некоторые важные параметры и анализирую некоторые малоинтересные конверсии.

Продолжу о GTM полезными примерами отслеживания отправки формы.

Вариант 1. Универсальный

Создаем триггер типа Form Submission (если у вас всё на русском, скорее всего, там написно "Отправка формы").

Тут всё просто, нужно только правильно указать системе CSS-селектор.

Выбираем Some Forms, Fire this trigger when an Event occurs and all of these conditions are true: Form Element matches CSS selector...

Дальше вводим без всяких кавычек путь к элементу, что-то вроде .reg_form_inner #registration_form

Если для вас это что-то непонятное, вернитесь сюда после прочтения "Большой книги CSS3" Макфарланда.

Подводные камни: элементов, соответствующих введенному селектору, может быть несколько. Может не быть вообще, если вы что-то не то вводите.

Для проверки используйте консоль вашего браузера и вот такой код:

document.querySelectorAll("form.log_in_form");	

Если в массиве NodeList единственный нужный вам элемент, всё в порядке.

Если вам нужно прокликать все radio, выбрав 7й ответ в каждом блоке из 9, используйте это, повесив "onclick" на любой элемент через правку html-кода:

onclick="var a= 0; for (a=0; a<60; a++) {document.getElementsByTagName('label')[a*9+7].click();}";	

Как вы поняли, это было лирическое отступление о удобстве консоли, вернёмся к GTM.

Итак, для сохранения триггера остается нажать Save.

Теперь нужно передать это событие в GA, YM.

Если вы не используете GA4 и передаете событие в GA "по старинке", это делается через Event.

Я предпочитаю сначала создать Событие, прежде чем его передавать (также мне больше нравится не ставить запятую между словами этого составного союза в данном случае).

Я предпочитаю сначала создать Событие, прежде чем его передавать (также мне больше нравится не ставить запятую между словами этого составного союза в данном случае).

Категория: Form Submit

Действие: form_please-fill_info_register

Не имеет значения, что вы напишете в этих полях, желательно, чтобы вам это было понятно, и чтобы это соответствовало написанному в настройках тега Google Analytics: Universal Analytics.

Вот мои настройки:

• Track Type — Event
• Category — Form Submit
• Action — form_please-fill_info_register
• Label — можно не заполнять, но мне захотелось отражать это: -

Предлагаю вам погуглить, зачем я поставил Non-Interaction Hit: True, насколько я понимаю, эта штука позволяет не засчитать Gogle отказ, если я провел менее 15 с на станице и совершил конверсионное действие, если я не прав, закидайте эту статью помидорами.

Не забываем внизу назначить тегу триггер, который создан ранее, иначе по умолчанию останется All Pages, и GTM будет рапортовать об отправке формы при каждом открытии любой страницы сайта.

Для передачи события в Метрику его однозначно нужно сначала создать там как Цель.

Меня учили делать это через JavaScript-событие. Если вы делаете это лучше, напишите в комментах к статье (все названия реальны, любое несовпадение считать случайностью).

Идентификатор цели (вроде "form-please-fill-inform-register") может быть любым, какой примет валидатор Метрики, т. к. система всё равно выдает вам сразу готовый код, который затем нужно вставить в код js-тега GTM.

Забрав у Яндекса js-строку вроде "ym(54907777,'reachGoal','form-please-fill-inform-register')", создаем тег типа Custom Html Tag, добавляем теги script и точку с запятой после забранной у Яндекса строки:

	
<script>
ym(54907777,'reachGoal','form-please-fill-inform-register');
</script>
	
	

Тег готов, если вы дали ему осмысленное название и выбрали триггер, по которому он срабатывает. Остается лишь опубликовать контейнер — и можно тестить передачу конверсий.

Вариант 2. Если форму сложно идентифицировать по css-селекторам

Или если она вообще грузится, например, динамически на стороне клиента, да и мало ли зачем еще может понадобиться отслеживать отправку формы по нажатию кнопки submit при заполненных полях. Так или иначе, этот способ отслеживания завоевал прав на существование, хотя лучше его назвать не отслеживанием отправки формы, а отслеживанием нажатия кнопки (при неправильно заполненных полях отправке помешает валидация). Вот как это работает.

К примеру, отслеживаем отправку модальной формы.

Создаем триггер типа Click element -> matches CSS selector -> div.modal__body form button.grt-btn.grt-btn--filled.grt-btn--block[type="submit"]

Для надежности можно добавить проверку, что нужные поля формы заполнены, а элементы DOM, содержащие сообщения об ошибках, не видны.

Переменная типа Код JavaScript под названием "Поле Email модалки Регистрация" возвращиет значение поля формы, вот сам код:

	
function() {
  return document.querySelector('.modal__body .grt-text-input__input[type="email"]').value;
}

Аналогично создается переменная для второго поля:

	
function() {
  return document.querySelector('.modal__body .grt-text-input__input[type="password"]').value;
}

Для проверки значения полей удобно использовать condition типа "does not match RegEx" и регулярное выражение "^$", где крышка означает, что фраза началась, а доллар — что она закончилась, не успев начаться.

Триггер типа Element visibility проверяет видимость сообщения об ошибке.

Соответственно, остается только передать события в Метрику и Аналитику, проверяющие срабатывание триггера нажатия на кнопку при непустых значениях полей и при неактивном состоянии триггера проверки видимости Error message.

Свойства тега для Google Analytics:

• Track Type — Event
• Category — event
• Action — zareg2
• Label — {{Page URL}}
• Non-interaction Hit — True
• Google Analytics Settings — {{UA}} (на скрине переменная называется Настройки Google Analytics, как её создать — рассказано в первой части).

Разумеется, для передачи этой цели в GA её там нужно создать с любым удобным и понятным названием и совпадающими с введенными в GTM значениями Event, Action (в данном случае это, соответственно, event и zareg2).

Тег передачи события в Яндекс типа Пользовательский HTML возбуждается тем же набором из запускающего триггера и триггера-исключения. Код нужно просто скопировать из Яндекс.Метрики описанным выше способом при создании Цели типа JS.

Спасибо за внимание.

Продолжение, возможно, следует...