# 1. Отслеживание форм с помощью Google Tag Manager (со слушателем форм)
# 2. Отслеживание страницы «Спасибо» с помощью Диспетчера тегов Google
# 3. Отслеживание формы AJAX с помощью Диспетчера тегов Google
# 4. Формы отслеживания с использованием триггера видимости элементов
Одним из самых удивительных триггеров в GTM (на мой взгляд) является триггер видимости элементов. Он позволяет отслеживать, когда на экране появляется определенный элемент (из-за прокрутки или некоторых других обстоятельств).
Тот же метод может применяться к формам, когда конкретное сообщение (например, «Спасибо за покупку») появляется после того, как форма успешно отправлена.
Первое, что нам нужно сделать, это проверить сообщение об успешной отправке формы. Нам нужно найти способ проинструктировать диспетчера тегов Google, какой именно элемент веб-сайта нам интересен.
После успешной отправки формы щелкните правой кнопкой мыши на сообщение об успешной отправке и выберите «Проверить элемент».
Затем вы увидите инструменты разработчика браузера, которые содержат различную информацию о сообщении: его содержимое, класс CSS и т.д. В приведенном ниже примере мы видим, что сообщение имеет класс «спасибо», который может использоваться как условие в триггере видимости элемента. Было бы еще лучше, если бы сообщение об успешной отправке имело параметр с именем «id», но поскольку он недоступен, мы будем использовать CSS-класс.
Откройте раздел триггеры в Диспетчере тегов. Создайте новый триггер и выберите «Видимость элемента» в качестве его типа. Ключевым компонентом здесь является метод выбора, который поможет GTM понять, что именно мы ищем.
Метод выбора имеет два варианта: Element ID и CSS Selector. Поскольку сообщение об успешном завершении в моем примере не имеет id (а имеет «класс», мы перейдем к CSS селектору.
В поле «Выбор элемента» нам нужно вставить этот класс thanks. В CSS каждый класс определяется с точкой перед ним, поэтому давайте сделаем то же самое.
Убедитесь, что вы отметили «Наблюдать изменения DOM». Этот параметр означает, что, если элемент появляется на экране не вследствие прокрутки, а при некоторых других обстоятельствах (например, просто «просто всплывёт»), GTM засечёт его (скорее всего).
Взгляните на скриншот ниже. При желании вы можете выполнить дополнительные действия, но то, что я привел в качестве примера является необходимым минимумом.
Сохраните триггер.
Проверка
1. Назначьте данный новый триггер тегу Google Analytics, который вы создали в начале.
2. Откройте (или обновите) режим предварительного просмотра и отладки, обновите веб-страницу с формой, которую вы хотите отслеживать.
3. Затем заполните форму и нажмите «отправить». После успешной отправки, в консоли P&D вы увидите событие gtm.elementVisibility. Нажмите его, и вы увидите, что тег GA был запущен. Если вы не видите событие gtm.elementVisibility, вы, вероятно, допустили ошибку в поле «Выбор» или поле «Селектор CSS». Или забыли включить флажок «Наблюдать изменения DOM».
Если ваше сообщение об успешной отправке не имеет собственного ID или соответствующего класса CSS, вам нужно глубже изучить возможности селектор CSS, поскольку они огромны.
Еще о способах отслеживания формы с помощью Диспетчера тегов
# 5. НАПИШИТЕ СВОЙ СОБСТВЕННЫЙ АВТОМАТИЧЕСКИЙ ПРОСЛУШИВАТЕЛЬ СОБЫТИЙ
# 6. ОТСЛЕЖИВАНИЕ ФОРМ С ПОМОЩЬЮ СОБЫТИЙ DATALAYER
# 7. Отслеживание формы с помощью DOM Scraping
Материал подготовлен на основе статьи на Analytics mania