AMP Academy

Google Tag Manager: отслеживание отправки форм

В предыдущей статье мы разобрали как отслеживать клики по элементам сайта с помощью Google Tag Manager. Мы продолжаем изучать способы измерения KPI по сайту. Во второй части статьи мы рассмотрим, как настроить отслеживание успешной отправки формы.

Отслеживание отправки заполненных форм в GTM

Зайдите в ваш аккаунт GTM и включите отладчик.

Отладчик в Google Tag Manager

Перейдите на ваш сайт и заполните форму и нажмите отправить, в этот момент у вас должно зафиксироваться событие «gtm.form»(1).

ВНИМАНИЕ: событие «gtm.form» должно срабатывать после отправки данных, иначе вы будете отслеживать клики по кнопке.

Если «gtm.form» вызывается при не заполненной форме, то вам нужно отменить стандартное поведение отправки формы.

Пример для js:

document.getElementById("form").addEventListener("submit", function(event){
    event.preventDefault();
});

Перейдите на вкладку Variable и запишите formId (2), он вам понадобиться чуть позже. Если это поле будет пустым попросите вашу поддержку поставить Id для формы.

Передача переменной в Data Layer

Если у вас форма написана на ajax, тогда вам нужно передать пользовательское событие после отправки формы с помощью DataLayer, в этом вам может помочь ваш support manager.

Пример:

    <script>
    $(function() {
        $('#ajaxForm').on('submit', function(e) {
            e.preventDefault();
            var $this = $(this);
            $.ajax({
                type: $(this).attr('method'),
                url: $(this).attr('action'),
                data: $(this).serialize(),
                success: function(msg) {
                    if (msg === 'true') {
                        $("#newsletterForm").hide()[0].reset();
                        $('#newsletterSuccess').fadeIn(500);
                    }
                    gtmAjaxSuccess($this);
                }
            });
        });

        // GTM ajaxSuccess
        function gtmAjaxSuccess(el) {
            if (typeof gtmDataLayer != 'undefined') {
                gtmDataLayer.push({
                    'event': 'ajaxSuccess',
                    'dataTargetId': el.attr('id')
                });
            }
        }

    }); // end document ready
    </script>

 

Вернитесь в GTM и нажмите создать тег.

Создание тэга в Google Tag Manager
Создание тэга в Google Tag Manager

Выберите тип тега Universal Analytics.

Universal Analytics в Google Tag Manager

Напишите ваш идентификатор Analytics.

Выберите тип отслеживания «Cобытие».

В поле «Категория» напишите название формы, которую вы хотите отследить;

В поле «Действие» напишите «Отправка»;

Поле «Ярлык» вы можете оставить свободным или дописать туда какую то, дополнительную информацию.

Отправка формы в Google Tag Manager

После этого кликните на поле «Триггеры», в открывшемся окне нажмите на «+» (создать триггер) в правом верхнем углу.

Выбор триггера в Google Tag Manager

В следующем окне выберите тип триггера «Отправка формы» если у вас обычная форма, если у вас форма на ajax выберите «Пользовательское событие».

Выбор триггера в Google Tag Manager

Для триггера «Отправка формы» укажите FormId

Выбор триггера в Google Tag Manager

Для триггера «Пользовательское событие» укажите имя события, которое вы передаете через Tag Manager. Также вы можете дополнительно передать ваш FormId в случае если у вас на странице несколько форм запускают одно и тоже пользовательское событие, а вы хотите отслеживать каждую из них отдельно.

Выбор триггера в Google Tag Manager

После внесения всех данных сохраните тег и не забудьте опубликовать контейнер.

Теперь перейдите в ваш аккаунт Analytics и зайдите в меню цели.

Цели в Google Analytics

Теперь нажмите «+ цель» => Собственная => Событие

Напишите название цели нажмите продолжить. В строках «Категория», «Действие», «Ярлык» укажите те же значения, что вы указывали в GTM в полях «Категория», «Действие», «Ярлык» и сохраните данное событие.

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

Google Tag Manager

В этой статье мы разобрали, как отслеживать успешную отправку формы с помощью GTM. Изучайте новые инструменты и расширяйте возможности вашей компании.

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

Читайте также:

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Есть задача по продвижению вашего бизнеса в интернете?
Расскажите о ней нашему специалисту и получите решения.

Google Tag Manager: отслеживание отправки форм: 3 комментария

  • 27.06.2017 в 18:03
    Permalink

    Для триггера «Пользовательское событие» укажите имя события, которое вы передаете через Tag Manager – не совсем понял откуда брать имя события, оно эквивалентно имени тэга на который мы навешиваем триггер?…или я что-то не так понял?

    Ответ
  • 06.09.2017 в 16:54
    Permalink

    Спасибо автору очень интересная статья. Просьба делать скрины больше потому что не видно ничего.

    Ответ
    • 07.09.2017 в 14:04
      Permalink

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

      Ответ

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

×
Стань частью крутой команды авторов AMP Academy!
×
Получите консультацию эксперта
×

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: