В одной из прошлых статей был опубликован способ отслеживания в 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 Аналитике:
Поделиться ссылкой: