Отслеживание форм через GTM и не только
5 вариантов из тех, что знаю
Разберем 5 часто встречаемых на практике способов как отследить успешную отправку формы на сайте через Google Tag manager. Конечно универсального решения нет и для конкретной задачи может потребоваться иной подход. В данной статье приведены наиболее часто используемые решения.
Перед началом работ обязательно включите встроенные переменные, перейдя в раздел «Переменные» и нажав кнопку настроить. Они нам понадобятся в ходе работ.
Отслеживание отправки через встроенный триггер
Данный метод является одним из самых простых и в тоже время малоэффективным. На практике редко где срабатывает. Данный метод прослушивает submit и при успешном срабатывании передает в datalayer событие gtm.formSubmit.
Для отслеживания цели необходимо определять id или class формы используя консоль вашего браузера. Создаем в GTM триггер «Отправка форм»
Для отслеживания цели необходимо определять id или class формы используя консоль вашего браузера. Создаем в GTM триггер «Отправка форм»
- Ждать тег – полезен в случае если вы вместе с отправкой передаете дополнительные события.
- Проверка ошибок – активируется только при успешной отправки формы.
- Условия активации – если у вас несколько форм, указываете нужную прописав class или id формы.
Отслеживание через события Ajax формы
Настройка успешной отправки ajax формы через дописывание кода в обработчик. Потребуется дать задание программисту на внедрение javascript кода который будет передавать события в datalayer при успешной отправки формы.
dataLayer.push({‘event’: ‘form_name’})
Создаем в Google tag manager триггер пользовательское событие и указываем название event которое было прописано в функции form_name.
Проверка полей ввода данных
Данный способ позволяет передать цель в аналитику только при заполненных обязательных полях формы.
Например такие как:
- Успешное заполнения поля «Имя»
- Успешное заполнения поля «Телефон»
- Успешное заполнения поля «E-mail»
- Также любые другие поля формы на вашем усмотрение.
Для этого в GTM создаем переменную собственный код JavaScript и прописываем следующий код:
function() {
return document.getElementsByName("name")[0].value
}
Вместо name указываем данные из своей формы для каждого отслеживаемого поля. По аналогии создаем переменные для каждого проверяемого поля.
Создаем триггер активации «Клик все элементы» который будет срабатывать только при заполненных полях формы. Выбираем некоторые клики и указываем при каких условиях должен активироваться триггер.
Выбираем Click Classes и указываем класс кнопки на форме, тут можно использовать на выбор id, название кнопки. Затем выбираем созданную переменную «Поле телефон», устанавливаем «не соответствует регулярному выражение» ^$, означает, что поле не может быть пустым.
Всплывающее сообщение
Отслеживание через любой видимый элемент на сайте который появляется после успешной отправки формы. Например, модельной окно или баннер которое появляется в видимой части экрана.
В данном случаи можно воспользоваться встроенным триггером который отправит в datalayer событие gtm.elementVisibility.
Определите id или css селектор данного элемента через консоль браузера. Затем создайте триггер «Доступность элемента» и указываем полученный идентификатор или селектор элемента.
Разберем настройки триггера:
- Правило запуска этого триггера – один раз на страницу подойдет если у вас одна форма или для каждой формы разные элементы. Если несколько форм и одинаковый элемент, то установите один раз на элемент.
- Минимальный процент видимости – говорит само название, сколько процентов элемента должно попасть в видимую часть экрана для срабатывания триггера, при мобильной версии страницы рекомендую ставить как на картинке.
- Регистрация изменений DOM – в случаи если изначально элемента в коде страницы нет, и он встраивается после отправки.
Отслеживание отправки Ajax JQuery форм
Если на сайте данные формы передаются через Ajax с применением библиотеки JQuery, то потребуется определить, что передается в переменную уровня данных.
Для этого создаем новый тег в GTM и вставляем данный код:
<script>
$(document).ajaxSuccess(function(event, request, settings) {
dataLayer.push({
‘event’: ‘ajaxSuccess’,
‘ajaxSuccessData’: {
‘url’: settings.url || »,
‘data’: settings.data || »,
‘responseText’: request.responseText || »
}
});
});
</script>
В качестве триггера активации используем «Модель DOM готова» для всех событий.
Включаем в контейнере тегов режим предварительного просмотра, заполняем форму и нажимаем отправку. Смотрим что передается в переменной уровня данных ajaxSuccessData.
- URL – куда отправляются данные с формы;
- Data – данные которые отправляются;
- responseText – какой ответ отдает сервер.
Создаем две переменных уровня данных в качестве имени указываем ajaxSuccessData.responseText и ajaxSuccessData.url.
Создаем триггер «Пользовательское событие», в имени события указываем ajaxSuccess. Условия активации выбираем некоторые специальные события и выбираем созданные ранее переменные, указываем содержит данные которые получили.
Отправка целей в системы аналитики
После того как вы определились с триггером активации который отслеживает успешную отправку формы, необходимо передать данные в системы аналитики Яндекс Метрика и Google Analytics.
Отправка целей в системы аналитики
Создаем новый тег Universal Analytics тип отслеживания выбираем событие, указываем категорию и действие по-вашему предпочтению. В качестве триггера активации выбираем подошедший для ваших условий триггер.
Отправка цели в Яндекс Метрику
Создаем новый тег пользовательский HTML и указываем следующий код, вместо «х» подставляем номер вашей метрики, в поле «name» название цели:
<script>
yaCounterxxxxxxx.reachGoal(‘name);
</script>
В качестве триггера активации выбираем созданный ранее.
Заключение
Используя данные методы, вы сможете отследить успешную отправку практически любой формы на сайте с помощью контейнера тегов GTM. Приведенные методы достаточно просты и вам не потребуется прибегать к услугам сторонних программистов. Помимо отслеживания отправки заявок с сайта вы можете отслеживать любые события на сайте совершенные пользователями.
Отправка сразу в Метрику без GTM и datalayer
Вешаем на кнопку или форму событие которое прокидывается при отправке, описано в справке Яндекса.
onsubmit="ym(XXXXXX, 'reachGoal', 'TARGET_NAME')