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

В одной из прошлых статей был опубликован способ отслеживания в GTM c помощью триггера Отправка формы. В этой статье рассмотрим ещё один способ отслеживания – отправку AJAX-формы с модальным окном с помощью триггера Доступность элемента.

Форма, которая представлена в данной статье, была скачана с сайта postovoy.net и имеет модальное окно с сообщением об успешной отправке.

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

Для начала необходимо подключить ГТМ к сайту, иначе все старания будут бессмысленными.

Далее заполняем форму, нажимаем кнопку Тест формы !

Нажимаем правой кнопкой мыши, и выбираем Просмотреть код (Google Chrome) или Исследовать элемент (Яндекс Браузер)

Видим, что требуемый нам элемент имеет идентификатор feedback-modal-box. Это – необходимый для нас параметр и его мы будем использовать в дальнейшем.

Переходим в ГТМ в Переменные и включаем переменные: Percent Visible и On-Screen Duration.

Затем переходим в Триггеры и создадим триггер:

Из категории Взаимодействия пользователей выбираем пункт Доступность элемента

со следующими параметрами:

  • Название: Element Visibility
  • Тип триггера: Доступность элемента
  • Метод выбора: Идентификатор
  • Идентификатор элемента: feedback-modal-box
  • Правила запуска: При каждом появлении элемента на экране
  • Минимальный процент видимости: 50% (по-умолчанию, пусть так и останется)
  • Минимальное время видимости: 1500 мс (это 1,5 секунды)
  • Ставим галочку Регистрация изменений DOM
  • Условия активации: Некоторые события типа “Доступность”
  • Активировать триггер при наступлении события и выполнения условий:
Form ID равно feedback-modal-box

Регистрацию изменений DOM (Document Object Model) включаем потому, что в первоначальном варианте в объектной модели документа не было идентификатора feedback-modal-box

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

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

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

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

Код

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

и привяжем к нему Триггер активации Element Visibility

Сохраним

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

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

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

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

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

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

  • Тип тега: Google Аналитика – Universal Analytics
  • Тип отслеживания: Событие
  • Категория: Contact Form
  • Действие: Send
  • Ярлык: Sent
  • Настройки Google Analytics: {{Google Analytics}}

и привяжем к нему Триггер активации Element Visibility

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

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

Проверка

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

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

В событиях Google Analytics

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

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

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