Аналитика

Как с помощью Google Tag Manager отследить отправку формы на сайте

37
0
2

Отслеживание конверсий позволяет узнать, как часто происходят полезные действия: покупка, подписка на рассылку, отправка контактных данных и так далее. Процесс настройки зависит от типа выполняемого действия пользователем на сайте.

Рассмотрим на примерах, как настроить отслеживание конверсии, когда пользователь отправляет контактные данные в различные формы и чаты

Отслеживание с помощью триггера в Google Tag Manager

Если сайт выполнен корректно (со стороны программистов), доступен вариант отслеживания конверсии с помощью стандартного триггера в Google Tag Manager (GTM). Работает довольно редко, но тем не менее стоит попробовать.

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

Этот триггер прослушивает submit формы и когда происходит конверсия, передает событие gtm.formSubmit. Когда срабатывает событие gtm.formSubmit можно, например, отправить событие в Google Analytics.

Проверяем корректность работы данного триггера:

  1. Создаем триггер в GTM:

Создаем триггер в GTM

  1. В режиме предварительного просмотра отправляем форму с заполненными полями. После успешной отправки ищем нужную переменную:

Форма с заполненными полями в режиме просмотра

  • дорабатываем наш триггер:

Дорабатываем наш триггер

  1. Повторяем действие с отправкой формы, но уже без заполненных полей: если триггер не срабатывает, значит программисты молодцы и можем настраивать отправку форм через данный функционал.
  2. На каждую форму создаем свой собственный триггер и проверяем его.
  3. В GTM настраиваем тег, который будет передавать данные об отправке формы в Google Analytics.
  4. Переходим на вкладку и создаем новый тег:

Создаем новый тег

  1. Заполняем поля:

Порядок заполнения полей

  • выбираем тип тега Google Analytics — «Universal Analytics»;
  • для удобства называем тег также, как и триггер;
  • выбираем тип отслеживания «Событие»;
  • категорию для удобства называем также, как и тег;
  • указываем настройку Google Analytics (с указанным идентификатором отслеживания)
  1. В качестве правила активации тега указываем созданный ранее триггер.

Для правила активации тега указываем созданный ранее триггер

  1. Нажимаем кнопку «Save».
  2. С помощью предварительного просмотра проверяем, как работает созданный тег при отправке формы.
  3. Настраиваем «Цель» в Google Analytics.

Как отслеживать конверсии из всплывающего окна

Для отслеживания отправки формы такого рода необходим установленный на сайте GTM и Google Analytics.

Пример окна:

Спасибо за обращение

  1. Для начала нужно настроить отслеживание события доступности элемента на сайте.
  2. Заходим в Google Tag Manager на вкладку «Triggers» и нажимаем кнопку «New».

Заходим в Google Tag Manager на вкладку «Triggers» и нажимаем кнопку «New»

  1. В открывшимся окне выбираем:

В открывшимся окне выбираем

  1. Заполняем необходимые поля:

Заполняем необходимые поля

  • название триггера (название должно быть понятным);
  • метод выбора — «Селектор CSS»;
  • селектор элемента;

Селектор элемента необходимо определить на сайте. Для этого выполняем отправку формы. Затем видим всплывающее окно (или ответ сайта). Если сообщение через пару секунд пропадает, нажимаем на клавиатуре Esc — так можно остановить загрузку страницы и выполнение других сценариев. Нажимаем правой кнопкой мыши на окне и выбираем «Просмотреть код». В появившемся окне нас интересует:

Нажимаем правой кнопкой мыши на окне и выбираем «Просмотреть код»

Нажимаем правой кнопкой мыши и выбираем:

Нажимаем правой кнопкой мыши и выбираем

Селектор элементов

Копируем его и вставляем в поле № 3.

  • ставим флажок «Регистрация изменений DOM»;
  • выбираем:

Последовательность действий

Далее ставим флажок «Некоторые события типа “Доступность”». Затем выбираем из выпадающего списка значения как на изображении. Используя предварительный просмотр GTM, находим текст всплывающего окна и копируем его:

Используя предварительный просмотр GTM, находим текст всплывающего окна и копируем его

  • нажимаем «Сохранить»;

Теперь нужно сохранить изменения

  • настраиваем тег в GTM. Он будет передавать данные об отправке формы в Google Analytics:

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

Переходим на вкладку и создаем новый тег

Далее заполняем поля:

Заполняем поля по примеру со скриншота

Выбираем тип тега Google Analytics — UA, для удобства называем тег также как и триггер.

Выбираем тип отслеживания — «Событие». Категорию называем также как и тег. Указываем настройку GA (с отмеченным идентификатором отслеживания).

В качестве правила активации тега указываем созданный ранее триггер.

В качестве правила активации тега указываем созданный ранее триггер

Нажимаем кнопку «Save» и с помощью предварительного просмотра проверяем, насколько исправно работает созданный тег при отправке формы.

Так можно проверить насколько исправно работает созданный тег при отправке формы

  1. Настраиваем «Цель» в Google Analytics. Здесь начальные шаги такие же, как и при настройке цели на страницу «Спасибо». Создаем новую цель:

Порядок создания новой цели

  • вводим название (удобнее будет использовать название аналогичное тегу);
  • тип — выбираем «Событие»;
  • нажимаем «Далее»;

В поле «Категория» копируем значение из поля категории, созданного тега из GTM и нажимаем «Сохранить».

В поле «Категория» копируем значение из поля категории, созданного тега из GTM и нажимаем «Сохранить»

Как отслеживать конверсии с помощью прослушивания ответа функции ajaxSuccess

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

Важно: все обработчики события ajaxSuccess вызываются при успешном завершении любого запроса Ajax. Код будет получать данные от функции только при успешной обработке формы и ее отправке.

  1. Для прослушивания ответа функции необходимо создать тег «Пользовательский HTML».

Для прослушивания ответа функции необходимо создать тег «Пользовательский HTML»

  1. Далее вставить код:

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

  1. Данный тег должен срабатывать на каждой странице (при необходимости можно доработать).

Данный тег должен срабатывать на каждой странице (при необходимости можно доработать)

  1. В режиме предварительного просмотра отправляем форму с заполненными полями. После успешной отправки ищем:  

В режиме предварительного просмотра отправляем форму с заполненными полями и ищем

  1. Создаем триггер для отслеживания данной формы:

 Создаем триггер для отслеживания данной формы

  • тип триггера — «Пользовательское событие»;
  • для удобства называем триггер также, как и форму, которую отслеживаем;
  • указываем event name «ajaxSuccess»;
  • если необходимо отслеживать несколько разных форм, выбираем: «This trigger fires on — “Некоторые специальные события”». Если необходимо отслеживать только конверсии, без разграничения по типам/названиям форм — оставляем «Все специальные события»;
  • значение полей выбираем из предварительного просмотра GTM (для каждой формы отдельно). В качестве переменной выбираем «ajaxSuccessData.url — contains» и указываем значение со скриншота ниже.

В качестве переменной выбираем ajaxSuccessData

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

Важно: если Ajax используется только для формы заявки, достаточно настроить триггер на пользовательское событие «ajaxSuccess».

Если на странице есть динамический контент, который использует ajax, то более подробную информацию вы можете получить из переменной уровня данных ajaxSuccessData.

  • url — адрес отправки данных ajax;
  • data — отправленные данные;
  • responseText — ответ, который пришел от сервера.

Эти данные можно использовать для фильтрации нужной вам формы.

  1. Создаем тег для передачи данных об отправке формы в Google Analytics, как в предыдущих примерах.
  2. С помощью предварительного просмотра проверяем корректность работы тега и триггера.

С помощью предварительного просмотра проверяем корректность работы тега и триггера

Затем настраиваем «Цель» в Google Analytics.

Важно: такой способ нуждается в тщательном тестировании и отладке.

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

Обнаружили ошибку? Выделите ее и нажмите Ctrl + Enter.

Комментарии (4 )

  1. 11 дней назад

    Хороший материал. Спасибо. 

    Скажите, отслеживать формы видимо получится только "свои". Я имею в виду формы от сторонних сервисов типа TypeForm или Hubspot отслеживать наверное не получится?

    • Olexiy Gorin
      10 дней назад

      Добрый день. 

      Да, данный способ подходит для "своих" форм.

      С данными сервисами не сталкивался. Чаще всего они имеют собственные события которые отправляются при взаимодействии с их формами (самый простой пример - Чаты, Формы Битрикс24 - у них своя настройка из самой CRM). Так как чаще всего формы вставляются как отдельный блок (внешний скрипт типа - <script src=") подгружаемый со стороны издателя получить данные от них сложнее. Необходимо искать функцию, которая отвечает за успешную отправку данных и в момент ее вызова добавить в нее собственное событие для отслеживания.  

      Частично это будет похоже:

      1. Как в примере 3 с измененной функцией http://img.netpeak.ua/crystal/156051756552_kiss_14kb.png

      2. Или как тут (Битрикс24 доступные функции можно посмотреть в справке) http://img.netpeak.ua/crystal/156051747987_kiss_18kb.png

      Есть конечно другой вариант расположения с помощью iframe области, но такое видел только 1 раз на конструкторе сайтов. В данном случае еще сложнее, так как эта область не видна для GTM.


      Я думаю коннекторы можно поискать на Zapier для Hubspot. А для TypeForm почитать если есть справку разработчиков и найти необходимые решения или часть решения и далее уже скомпоновать. 

  2. 12 дней назад
    Здравствуйте! Спасибо за статью. Подскажите, а как именно это отслеживать в Google Analytics? В каких отчетах искать данную статистику?

Чтобы оставить комментарий, нужно войти

Подписаться

на самую полезную рассылку по интернет-маркетингу

Самое

обсуждаемое популярное читаемое

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