Настройка отслеживания отправки данных через форму в ЯМ и GA с помощью GTM – часть 2

На этом сайте уже опубликованы статьи об отслеживании событий в GTM при помощи триггеров Отправка формы и Доступность элементов. В этой статье рассмотрим отправку формы с помощью триггера Пользовательское событие.

Как и в предыдущей статье, форма, которую будем рассматривать, была скачана с сайта postovoy.net и имеет модальное окно (popup) с сообщением об успешной отправке, но в данном случае это нам не важно. Для написания данной статьи пришлось внести небольшое изменение, чтобы наглядно показать, как работает данный триггер. Нередко бывают такие ситуации, когда встроенные триггеры GTM не срабатывают, и триггер Пользовательское событие поможет в этой ситуации.

На данной картинке изображены 2 формы: Пример формы 2 и Пример формы 3. Здесь речь пойдёт о Примере формы 3.

Чтобы приступить к настройке, ГТМ должен быть уже интегрирован в код страниц сайта. Если этого ещё не произошло, надо сделать, иначе все действия будут напрасны.

Для начала нам надо просмотреть код кнопки Тест формы !, которая будет использоваться для отправки данных. Здесь мы видим кусок – событие onclick

dataLayer.push({'event': 'sendform'});

Это позволит отправить команду в dataLayer пользовательское событие sendform. Это и есть необходимое и достаточное условие для отслеживания.

Переходим в ГТМ в Триггеры, создаём триггер Feedback Form Test типа Пользовательское событие из категории Другое.

Имя события – sendform

В условиях активации указываем Некоторые специальные события

Активировать триггер после выполнения условий

Page Pathсодержитexamples/contact_form/

В условиях активации можно также выбрать Все специальные события, если форма на сайте одна

Сохраним

Настройка цели в Яндекс Метрике

В ГТМ переходим в Теги и создадим тег для Яндекс.Метрики и назовём его Feedback Form Example – YM

Тип тега: Пользовательский HTML

Код

<script>
  yaCounterXXXXXXXX.reachGoal('feedback-form-example');
</script>

и привяжем к нему Триггер активации Feedback Form Test

Сохраним

XXXXXXXX – это id счётчика Метрики

feedback-form-example – идентификатор цели

Теперь переходим в Яндекс Метрику – Настройки – Цели

Добавим цель типа JavaScript-событие с идентификатором feedback-form-example

Настройка передачи события в Google Аналитику

В ГТМ создадим тег для Google Аналитики и назовём его Feedback Form Example – GA

  • Тип тега: Google Аналитика – Universal Analytics
  • Тип отслеживания: Событие
  • Категория: Feedback Form Example
  • Действие: Send
  • Ярлык: Sent
  • Настройки Google Analytics: {{Google Analytics}}
  • Ставим галочку Включить переопределение настроек в этом теге
  • И идентификатор отслеживания: UA-XXXXXXXXX-1

и привяжем к нему Триггер активации Feedback Form Test

UA-XXXXXXXXX-1 – это ID счётчика Google Analytics

Сохраняем и опубликовываем

Настройка завершена.

Проверка

Для проверки необходимо заполнить все поля формы, поставить галочку (чекбокс), выбрать пункт Radio 1, Radio 2 или Radio 3, из меню 1, 2, 3, 4 или 5 и нажать кнопку Тест формы ! (если вы уже разместили форму у себя на сайте, наверняка кнопку Тест формы ! переименуете в, например, Отправить)

После отправки закройте модальное окно и проверяйте результаты

в событиях Google Analytics

в целях Яндекс Метрики

Можно также создать цель в Google Аналитике:

Поделиться ссылкой: