Отслеживание отправки заполненной формы в Analytics и Метрике через Tag Manager

20.09.2019 0 Автор pavezlo

Ребята, вы не представляете сколько способов я перепробовал, пока не добрался до данного рабочего метода. Из-за криворуких разработчиков и тяжелых сайтов я очень долго не мог настроить аналитику успешной отправки форм. Нашёл этот метод по статье на Хабре, она для примера в самом низу. Я же более понятно опишу шаги по отслеживанию абсолютно любых форм на любом сайте.

1. Подготовительная работа

Исходим из того, что у вас уже есть сайт, есть необходимое событие (в нашем случае форма), есть установленный на сайт Google Tag Manager. Если Tag Manager нет, то в интернете ооочень много уроков как его поставить, это фигня.
При этом на форме, нет никаких данных, за которые можно было бы подцепиться для определения её успешной отправки. Ни id, ни class.

Код формы на сайте посмотреть — Код формы

В первую очередь необходимо установить новый тег и триггер в Tag Manager. Они, говоря простым языком откроют новые данные, по которым мы потом сможем отслеживать успешную отправку форм.

1.1 Установка триггера

Сперва устанавливаем триггер, который активирует тег.

Я назвал его Модель DOM – это не принципиально, назвать можно как угодно. Назовите также.

1.2 Установка тега

Теперь установим тег. Сперва выберем “Тип тега” – пользовательский HTML.

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

Установка кода для пользовательского HTML

Сам код:

<script> 
$(document).ajaxSuccess(function(event, request, settings) {
   dataLayer.push({
          'event': 'ajaxSuccess',
          'ajaxSuccessData': {
            'url': settings.url || '',
            'data': settings.data || '',
            'responseText': request.responseText || ''
          }
        });
});
</script>

Обязательно опубликуйте изменения в Google Tag Manager.

2. Выбор переменной новых данных

Для отслеживания необходимых нам данных, нужно сообщить о них менеджеру тегов. Это делается с помощью создания новой переменной.
Для начала давайте посмотрим какую переменную нам нужно создавать. Для этого откройте сайт, нажмите F12, откроется блок разработчика в низу или сбоку сайта. Теперь заполните и отправьте форму.

В открывшемся блоке разработчика вам нужна закладка “Console”, перейдите в неё и наберите dataLayer
Нажмите Enter.

Отслеживание необходимого значения для успешной отправки формы в ajax

Получите вот такие данные, там ищите ajaxSuccessData и точнее responseText и url. Это и будут те самые данные, которые смогут позиционировать отправку формы как успешную. В моём случае имелось только url “calc/mail.php“. Записываем его в блокнот.

3. Создание новой переменной в Google Tag Manager

Выбираем пункт переменные и добавляем новую.

В качестве переменной уровня данных пишем ajaxSuccessData.url
В моём случае после точки url по той причине, что в прошлом пункте только там у меня было значение. Если вы будете использовать значение responseText, то пишем так ajaxSuccessData.responseText

Сохраняем переменную.

4. Использование переменной в триггере

Теперь созданную переменную нужно использовать в триггере, который активирует тег. Для этого переходим в триггеры и создаем новый.

В условии активации тега пишем значение url из пункта “Выбор переменной новых данных”. Если вы используете значение responseText, то пишете его в этом условии.

5. Создание тега для передачи цели в Analytics

Теперь необходимо создать тег для передачи успешной отправки формы в Analytics. На данном этапе для метрики будут иные действия.

Создание тега для передачи успешной отправки формы

В поле настройка Google Analytics используется переменная. В интернете полно уроков по данному случаю. Она делается заранее отдельно и только усложнит данную статью. Если у вас затык на этом месте, напишите опишу подробнее, поскольку вы почти сделали 90% работы по учету успешной отправки формы.

Публикуем все изменения.

6. Проверка успешной отправки формы

Для этого запустите режим предварительного просмотра в Tag Manager и перейдите на сайт, обновите его. На нём заполните и отправьте форму. После отправки, в списке активных тегов должен появиться тот, который вы создали на предыдущем этапе. Это значит, что успешная отправка формы работает и осталось принять его как цель в Analytics.

Успешная отправка формы в отладке tag manager

7. Установка цели в Google Analytics

Переходим в цели через панель администратора Google Analytics

панель администратора analytics — панель администратора

Создаем новую цель.
Выбираем “Собственная” и жмем Далее
Название: Произвольно
Тип: Событие
Жмём далее
Категория: Тут пишем то значение, что указывали в пятом пункте в аналогичном поле
Действие: Тут пишем то значение, что указывали в пятом пункте в аналогичном поле
Жмем сохранить

8. Проверка цели в Google Analytics

Теперь переходим в “Отчет в реальном времени”. На сайте заполняем и отправляем форму и проверяем её в отчёте аналитикса.

Отчет в реальном времени Analytics
Проверка цели в отчете реального времени

Заключение

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

Как и обещал прикрепил ссылку на статью, которая мне самому помогла разобраться что к чему.

РубрикаМаркетинг