Настраиваем цель на отправку AJAX-формы в т.ч. с помощью GTM

Kirill V. Nikulin
Feb 6, 2017 · 4 min read
Типичная форма

Подписывайтесь на мой канал в Телеграме t.me/ppclifehacks — лайфхаки и решения проблем из PPC и веб-аналитики: как собрать свой коллтреккинг на коленке, устроить вечную рекламную акцию или правильно отследить заполнение AJAX-форм на сайте. Всё это и другие статьи в канале и этом блоге.

Самый простой способ отслеживать отправку обычной (не AJAX) формы через Google Tag Manager — это отправлять событие в Analytics или Метрику по триггеру на отправку формы:

Меню Тип триггера в Google Tag Manager

А если не используете GTM, то повесив отправку цели на onsubmit.
Но если форма использует AJAX (отправка без перезагрузки страницы), то это событие не сработает и в качестве альтернативы часто отслеживают клик на кнопку “Отправить” либо через GTM по событию gtm.click либо вешая отправку цели на onclick по кнопке.

По факту, нажатие этой кнопки не всегда означает успешную отправку формы, во-первых форму не всегда заполняют правильно, во-вторых иногда на кнопку нажимают просто так, вероятно вдохновившись призывом в объявлении “Ищешь шашлык? Купи септик! Жми!”

Что же делать?

В данной инструкции мы рассмотрим как отправить цель и сделать событие на успешную отправку AJAX-формы в GTM. Событие в GTM можно использовать не только для отправки цели, но и для других задач.

Возьмите за правило делать резервные копии перед внесением изменений в код.

1. Придётся немного влезть в код

Нам нужно найти обработку формы в исходном коде сайта, обычно нужный нам код находится в подключаемом внешнем .js файле или внутри страницы, и выглядит примерно так:

Иногда найти можно по слову success

Найти нужный нам код обычно можно по слову success, либо ищем что-то похожее. Проверяем, правильный ли код мы нашли — в моём случае отправка POST-запроса на url: ‘js/mail.php’ явно намекает, что мы нашли нужное. В вашем случае код может отличаться, ищите функцию, которая выполняется при успешной отправке формы. Приступаем к правкам.

Вариант без использования GTM:

Нужно в success дописать отправку нашей цели, например так:

Вставляем отправку цели в Universal Analytics в случае успешной отправки формы

Код для 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'});
Отправляем событие formsend (для примера) в dataLayer

2. Настраиваем событие в Google Tag Manager

Создаём триггер

Выбираем тип триггера “Пользовательское событие”

Указываем в качестве имени то событие, что мы выбрали ранее

Указываем имя события, которое мы выбрали и внесли ранее

Если у вас одностраничник или форма находится на всех страницах, то оставьте выбранной опцию “Все специальные события”, если же вы хотите выполнять триггер на определённых страницах, укажите это, выбрав “Некоторые специальные события” как в нашем примере.

3. Настройка цели в Universal Analytics

Создаём в GTM соответствующий тег:

Создаём событие, которое будет отправляться в Universal Analytics по нашему триггеру

В качестве триггера выбираем созданный нами ранее.

Создаём цель в Universal Analytics:

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

Создаём в GTM соответствующий тег:

Отправляем цель в Яндекс.Метрику

При создании тега выбираем тип тега “Пользовательский HTML” и вставляем следующий код, где XXXXXX номер вашего счётчика:

<script>yaCounterXXXXXX.reachGoal('TARGET_NAME');</script>

Настраиваем цель в Яндекс.Метрике:

Настраиваем цель в Метрике, в качестве идентификатора указываем то, что было в коде в прошлом шаге.

5. Проверяем корректность работы

Запускаем в Google Tag Manager режим предварительного просмотра

Перед публикацией изменений в GTM на работающем сайте их лучше проверить через Предварительный просмотр

При отправке нашей формы мы должны увидеть примерно такую картину:

Событие formsend выполнилось и цель отправилась

Если всё хорошо — выходим из режима предварительного просмотра и публикуем контейнер:

Вот и всё!

Изменяйте этот метод на свой вкус. Например, по этому триггеру можно не только отправлять цель, а, например, помечать всех отправивших пикселем ретаргетинга социальной сети.

Всё вышеописанное предоставляется как есть, используйте на свой страх и риск.

Другие лайфхаки на нашем канале https://telegram.me/ppclifehacks

Если вы хотите отблагодарить автора, то сделать это можно по ссылке: http://yasobe.ru/na/ppclifehacks

Kirill V. Nikulin

Written by

Contextual ad / Analytics

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade