Настраиваем цель на отправку AJAX-формы в т.ч. с помощью GTM
Подписывайтесь на мой канал в Телеграме t.me/ppclifehacks — лайфхаки и решения проблем из PPC и веб-аналитики: как собрать свой коллтреккинг на коленке, устроить вечную рекламную акцию или правильно отследить заполнение AJAX-форм на сайте. Всё это и другие статьи в канале и этом блоге.
Самый простой способ отслеживать отправку обычной (не AJAX) формы через Google Tag Manager — это отправлять событие в Analytics или Метрику по триггеру на отправку формы:
А если не используете GTM, то повесив отправку цели на onsubmit.
Но если форма использует AJAX (отправка без перезагрузки страницы), то это событие не сработает и в качестве альтернативы часто отслеживают клик на кнопку “Отправить” либо через GTM по событию gtm.click либо вешая отправку цели на onclick по кнопке.
По факту, нажатие этой кнопки не всегда означает успешную отправку формы, во-первых форму не всегда заполняют правильно, во-вторых иногда на кнопку нажимают просто так, вероятно вдохновившись призывом в объявлении “Ищешь шашлык? Купи септик! Жми!”
Что же делать?
В данной инструкции мы рассмотрим как отправить цель и сделать событие на успешную отправку AJAX-формы в GTM. Событие в GTM можно использовать не только для отправки цели, но и для других задач.
Возьмите за правило делать резервные копии перед внесением изменений в код.
1. Придётся немного влезть в код
Нам нужно найти обработку формы в исходном коде сайта, обычно нужный нам код находится в подключаемом внешнем .js файле или внутри страницы, и выглядит примерно так:
Найти нужный нам код обычно можно по слову success, либо ищем что-то похожее. Проверяем, правильный ли код мы нашли — в моём случае отправка POST-запроса на url: ‘js/mail.php’ явно намекает, что мы нашли нужное. В вашем случае код может отличаться, ищите функцию, которая выполняется при успешной отправке формы. Приступаем к правкам.
Вариант без использования GTM:
Нужно в success дописать отправку нашей цели, например так:
Код для Universal Analytics:
ga('send', 'event', 'forms', 'send', 'mygoal');Код для Universal Analytics gtag.js:
gtag('event', 'send', {'event_category': 'forms','event_label': 'mygoal'});Код для Яндекс.Метрики:
yaCounterXXXXXX.reachGoal('TARGET_NAME');Где XXXXXX номер вашего счётчика.
В принципе, если вы не используете GTM, на этом можно остановиться.
Вариант с использованием GTM:
Нужно в success дописать отправку пользовательского события GTM:
dataLayer.push({'event': 'formsend'});
2. Настраиваем событие в Google Tag Manager
Создаём триггер
Выбираем тип триггера “Пользовательское событие”
Указываем в качестве имени то событие, что мы выбрали ранее
Если у вас одностраничник или форма находится на всех страницах, то оставьте выбранной опцию “Все специальные события”, если же вы хотите выполнять триггер на определённых страницах, укажите это, выбрав “Некоторые специальные события” как в нашем примере.
3. Настройка цели в Universal Analytics
Создаём в GTM соответствующий тег:
В качестве триггера выбираем созданный нами ранее.
Создаём цель в Universal Analytics:
4. Настройка цели в Яндекс.Метрике
Создаём в GTM соответствующий тег:
При создании тега выбираем тип тега “Пользовательский HTML” и вставляем следующий код, где XXXXXX номер вашего счётчика:
<script>yaCounterXXXXXX.reachGoal('TARGET_NAME');</script>Настраиваем цель в Яндекс.Метрике:
5. Проверяем корректность работы
Запускаем в Google Tag Manager режим предварительного просмотра
При отправке нашей формы мы должны увидеть примерно такую картину:
Если всё хорошо — выходим из режима предварительного просмотра и публикуем контейнер:
Вот и всё!
Изменяйте этот метод на свой вкус. Например, по этому триггеру можно не только отправлять цель, а, например, помечать всех отправивших пикселем ретаргетинга социальной сети.
Всё вышеописанное предоставляется как есть, используйте на свой страх и риск.
Другие лайфхаки на нашем канале https://telegram.me/ppclifehacks
Если вы хотите отблагодарить автора, то сделать это можно по ссылке: http://yasobe.ru/na/ppclifehacks