9 способов отслеживания отправки форм с помощью GTM

22 апреля, 2021

Подробное руководство по отслеживанию отправки форм 9 различными способами с помощью Google Tag Manager.

Данный материал - отрывок из электронного руководства по Google Tag Manager (2020).

Примечание:

  • в октябре 2020 года (после выхода книги) Google Tag Manager изменил режим предварительного просмотра;
  • в 2021 году в диспетчере тегов Google переименовали некоторые триггеры: Пользовательское событие на Специальное событие, а Доступность элемента на Видимость элемента.

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

В этой публикации рассмотрим девять способов отслеживания отправки форм с помощью Google Tag Manager и отправки данных в Universal Analytics, а именно:

  1. с помощью отдельной страницы;
  2. с помощью триггера Отправка формы;
  3. с помощью триггера Доступность элемента (Видимость элемента);
  4. с помощью триггера Пользовательское событие (Специальное событие) и уровня данных (dataLayer);
  5. с помощью прослушивателя автоматических событий;
  6. с помощью универсального кода для форм на AJAX;
  7. с помощью DOM Scraping;
  8. с помощью виртуальных страниц;
  9. брошенные формы.

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

Разберем каждый способ подробнее.

Способ №1. Отслеживание отправки формы с помощью отдельной страницы

Суть этого способа заключается в том, что после отправки формы пользователя перенаправляет на отдельную страницу с уникальным URL-адресом. Еще ее называют страницей Спасибо.

9 способов отслеживания отправки форм с помощью GTM

Отслеживание формы с помощью отдельной страницы

В этом случае нет необходимости использовать переменные, триггеры и теги Google Tag Manager. Достаточно просто в Яндек.Метрике и Universal Analytics настроить цель на посещение этой страницы:

9 способов отслеживания отправки форм с помощью GTM

Настройка цели на посещение страницы

Но если вы все же захотите настроить отслеживание как событие через GTM, то можете воспользоваться триггером Просмотр страницы с условием активации на конкретной странице (странице Спасибо):

9 способов отслеживания отправки форм с помощью GTM

Триггер "Просмотр страницы"

В моем примере – это Page Path содержит thank-you, поскольку URL-страницы имеет адрес /thank-you.html. А тег, который используется для передачи данных в Universal Analytics, имеет вид:

9 способов отслеживания отправки форм с помощью GTM

Настройка тега

Через некоторое время все данные по событиям появятся в Google Analytics отчете Поведение — События — Лучшие события. Если вы планируете отслеживать отправку формы не только как события, но и как цель-события (конверсии), настройте цель с типом Событие:

9 способов отслеживания отправки форм с помощью GTM

Настройка цели-события в Universal Analytics

Данный способ является наиболее простым в отслеживании.


Способ №2. Отслеживание отправки формы с помощью триггера Отправка формы

Если на вашем сайте есть форма с тегом <form> и кнопкой, которые имеют синтаксис:

9 способов отслеживания отправки форм с помощью GTM

Тег <form>

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

9 способов отслеживания отправки форм с помощью GTM

Активация встроенных переменных

Затем создайте триггер типа Отправка формы. Для начала зададим условие активации на все формы и сохраним изменения.

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

Если событие Form Submit появилось в консоли предварительного просмотра, то вы можете использовать стандартный прослушиватель для своей формы. Воспользуйтесь значениями активированных переменных, чтобы узнать, есть ли у данной формы идентификатор (id) или класс (class), и активировать триггер только для конкретной формы, а не всех, которые есть на сайте. Для этого кликните на событие Form Submit и перейдите на вкладку Variables:

9 способов отслеживания отправки форм с помощью GTM

Идентификатор и класс формы

Как видим из рисунка выше, у данной формы есть и то, и то. Поэтому мы можем указать в качестве условия активации триггера Form Classes содержит st_contact_form_box или Form ID содержит email-form.

Например, если у вас на сайте есть несколько форм с одинаковыми значениями класса или идентификатора, вы можете добавить для триггера дополнительное условие, например, отслеживать отправку формы только на странице Контакты:

9 способов отслеживания отправки форм с помощью GTM

Настройки триггера "Отправка формы"

Сохраним настройки триггера. Чтобы передать информацию об успешной отправке формы в Google Analytics необходимо создать тег Google Аналитика – Universal Analytics с типом отслеживания Событие, задать соответствующие настройки Категории и Действия, и в качестве триггера активации выбрать созданный триггер типа Отправка формы. Например, так:

9 способов отслеживания отправки форм с помощью GTM

Настройка тега

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

Иногда вы можете наблюдать следующее: в режиме предварительного просмотра GTM события Form Submit фиксируются, тег на отправку формы срабатывает, и данные в инструменты веб-аналитики передаются даже тогда, когда пользователь не заполнял форму. Или вы просто обновляете страницу и, когда страница загружается, видите событие gtm.formSubmit. Как правило, такие события возникают из-за установленного Facebook Pixel (пикселя Facebook). Подробнее об этом я писал в этом материале.


Способ №3. Отслеживание отправки формы с помощью триггера Доступность элемента (Видимость элемента)

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

Тот же самый метод может быть применен и к формам, когда после успешной отправки обращения появляется некоторое сообщение, например, «Спасибо! Данные успешно отправлены»:

9 способов отслеживания отправки форм с помощью GTM

Пример формы

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

Как только вы убедились в этом, не закрывая окна, проинспектируйте элемент, чтобы узнать его CSS-селектор. Для этого наведите курсор мыши на текст сообщения и нажмите правой кнопкой – Просмотреть код:

9 способов отслеживания отправки форм с помощью GTM

Определение селектора элемента

После этого откроется консоль разработчика на вкладке Elements (браузер Google Chrome) с подсвеченным элементом. Из рисунка выше видно, что у данного элемента есть класс js-successbox t-form__successbox t-text t-text_md, который мы можем применить при настройке триггера в Google Tag Manager.

Примечание: элемент может иметь/не иметь идентификатор (#id) или класс (.class). В этом случае вы можете привязаться к его CSS-селектору. Подробно о селекторах было разобрано в соответствующей главе.

Вернемся в Google Tag Manager и создайте триггер типа Доступность элемента. В качестве метода выбора будем использовать Селектор CSS, поскольку у данного элемента нет идентификатора. Как вы уже знаете, в CSS перед каждым классом ставится точка (.), а пробелы между несколькими классами также заменяются на точки.

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

9 способов отслеживания отправки форм с помощью GTM

Настройка триггера "Доступность элемента"

Правило запуска этого триггера оставим без изменений - Один раз на страницу. Настройку Минимальный процент видимости также не будем менять – 50%. Главное – это не забыть поставить галочку напротив Регистрация изменений DOM, поскольку изначально данного элемента нет в структуре DOM-дерева, и сообщение об успешной отправки формы появляется на экране только после ее отправки.

9 способов отслеживания отправки форм с помощью GTM

Настройки триггера "Доступность элемента"

Сохраним настройки триггера. Чтобы проверить срабатывание события после отправки формы воспользуемся режимом отладки GTM и повторно создайте тестовое обращение.

9 способов отслеживания отправки форм с помощью GTM

Событие Element Visibility

Видим, что событие Element Visibility (gtm.elementVisibility) сработало после успешной отправки формы. Теперь вы можете использовать этот триггер в различных тегах для передачи информации в инструменты веб-аналитики (Яндекс.Метрику, Google Analytics, Facebook Pixel и др.). Например, как событие в Universal Analytics:

9 способов отслеживания отправки форм с помощью GTM

Настройка тега


Способ №4. Отслеживание отправки формы с помощью триггера Пользовательское событие (Специальное событие) и уровня данных

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

Если стандартный триггер Отправка формы может не работать с вашей формой, то отслеживание отправки формы с помощью триггера Пользовательское событие и уровня данных 100% вызовет нужное событие (при условии, что настройка верна!). Вы можете попросить разработчика внедрить конструкцию dataLayer.push () в функцию обратного вызова, которая вызывается при успешной отправке формы.

Пример кода, который вы можете отправить программисту, выглядит так:

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

Таким образом, используя переменную уровня данных, вы сможете передавать информацию в аналитику не только об успешной отправке формы, но и ее название, чтобы всегда знать, какую конкретно форму на сайте отправил пользователь, а также ряд других дополнительных параметров. Потом статистику по каждой заполненной форме можно будет сравнить между собой в отчетах Google Analytics и Яндекс.Метрики. Кроме formName можно передавать и другие данные.

Здесь уже зависит от вашего желания и конкретной задачи.  Например, на моем сайте (osipenkov.ru) есть 5 различных форм:

  1. бесплатный анализ проекта;
  2. запись на вебинар;
  3. скачать бесплатные книги;
  4. подписка на рассылку новостей;
  5. связаться по форме «Контакты»;

Я могу использовать дополнительную переменную для передачи этой информации в уровне данных. У вас этого может не быть. Перед постановкой задания разработчику вам нужно выписать на листке бумаге все возможные варианты параметры передачи данных, которые вы хотите, чтобы отправлялись в dataLayer при успешной отправке формы. Я в примере привел минимальный фрагмент кода, который удовлетворяет условию отслеживания с помощью триггера Пользовательское событие и уровня данных. Можно использовать и более упрощенную конструкцию, без formName:

Последовательность отслеживания следующая:

  • определяетесь с именем события, которое в дальнейшем вы будете использовать в триггере GTM типа Пользовательское событие (в примере выше – это formSuccess);
  • определяетесь с количеством дополнительных данных/переменных, которые вы хотите передавать в dataLayer;
  • записываете итоговый код для разработчика (за аналог берете код в примере выше);
  • отправляете разработчику текст такого вида: просьба внедрить конструкцию dataLayer.push () в функцию обратного вызова (код прилагаю к ТЗ), которая вызывается при успешной отправке формы со следующими данными (ниже перечисляете все параметры, которые необходимо передать вместе с формой, чтобы программист вас понял);

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

9 способов отслеживания отправки форм с помощью GTM

Событие formSuccess

Посмотрите на вкладке Data Layer вашего события все ли данные правильно переданы в уровень данных:

9 способов отслеживания отправки форм с помощью GTM

Уровень данных события

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

Теперь в Google Tag Manager создайте триггер типа Пользовательское событие с именем, которое вы назначили. В моем примере это formSuccess:

9 способов отслеживания отправки форм с помощью GTM

Триггер типа "Пользовательское событие (Специальное событие"

Поскольку в нашем примере в уровне данных еще есть дополнительные переменные, которые мы передаем (речь о formName), то можно создать пользовательскую переменную типа Переменная уровня данных для извлечения значения из нее:

9 способов отслеживания отправки форм с помощью GTM

Переменная уровня данных

Сохраните настройки. На заключительном шаге создайте тег Google Аналитика – Universal Analytics с типом отслеживания Событие с соответствующими настройками для передачи информации об успешной отправки формы в Google Analytics. Пример:

9 способов отслеживания отправки форм с помощью GTM

Настройка тега

В Категории передайте произвольное название, в Действии я укажите пользовательскую переменную DLVformName, которая передает название формы, а в Ярлыке события можно передать URL-адрес страницы, на которой произошло событие отправки формы. Конфигурация тега может быть иной. Главное, чтобы при отслеживании отправки формы с помощью уровня данных и пользовательского события наш триггер был добавлен в качестве условия активации тега, то есть триггер активации – Пользовательское событие, которое было создано на предыдущем шаге.


Способ №5. Отслеживание отправки формы с помощью прослушивателя автоматических событий

Прослушивание автоматических событий — это очень полезная функция в JavaScript, которая позволяет отслеживать определенные взаимодействия пользователя на страницах сайта. При срабатывании запускается событие, которому назначается обработчик (функция, которая отвечает за реакцию на действие пользователя), а само событие помещается в уровень данных (dataLayer). Это событие в дальнейшем можно использовать в качестве триггера активации в Google Tag Manager. Кроме этого, в момент срабатывания события, уровень данных может содержать дополнительную информацию о самом объекте. Помните предыдущий пример, где в dataLayer вместе с отправкой формы передавалась информация по и названию формы?

По умолчанию диспетчер тегов Google предоставляет встроенный прослушиватель (триггер Отправка формы). Но в большинстве настроек он не подходит или не может быть использован. Тогда на помощь приходит прослушиватель автоматических событий. Их еще называют прослушивателями пользовательских событий.

Если вы используете готовый CMS-движок (OpenCart, WordPress, 1С-Битрикс), то, как правило, для них существует ряд готовых решений (модулей, плагинов), которые вы можете приобрести или скачать бесплатно. Например, на своем сайте я использую плагин Contact Form 7.

Подробнее об отслеживании отправки форм с помощью прослушивателя автоматических событий я писал в отдельном материале как раз на примере Contact Form 7.


Способ №6. Отслеживание отправки формы с помощью универсального кода для форм на AJAX

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

9 способов отслеживания отправки форм с помощью GTM

Пример формы

AJAX (аббревиатура от Asynchronous JavaScript and XML) – это технология взаимодействия с сервером без перезагрузки страницы. Поскольку не требуется каждый раз обновлять страницу целиком, повышается скорость работы с сайтом и удобство его использования (см. приложение).

Компания Bounteous (ex LunaMetrics) в 2015 году опубликовала в своем блоге бесплатный прослушиватель AJAX событий для диспетчера тегов Google, который прекрасно работает и сейчас для большинства сайтов на этой технологии и который передает информацию на уровень данных.

Все, что требуется сделать, это скопировать код с их страницы и вставить его в тег типа Пользовательский HTML с условием активации триггера на всех страницах сайта (All Pages).

В Google Tag Manager это выглядит так:

9 способов отслеживания отправки форм с помощью GTM

Универсальный код для AJAX форм (Bounteous)

Сохраните изменения. Тег будет прослушивать все $.ajax запросы, включая $.post, $.getJSON, $.getScript и другие. Чтобы проверить корректность выполнения, в Google Tag Manager перейдите в режим предварительного просмотра и отправьте тестовую заявку.

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

9 способов отслеживания отправки форм с помощью GTM

Уровень данных события ajaxComplete

Выбрав событие ajaxComplete, перейдите на вкладку Data Layer. Здесь отображаются данные, которые были переданы на уровень данных после успешной отправки формы. Каждую строку в dataLayer можно использовать в качестве переменной уровня данных в GTM. Но перед этим следует определить, какая из представленной информации свидетельствует об успешной отправке формы. Чаще всего в этом коде используют значения из двух переменных:

  1. statusText;
  2. response.

К сожалению, в данном примере никакой информации в response нет, поэтому будем использовать значение success из переменной statusText. Но если бы она была, вы могли бы использовать сообщение, которое отобразилось в message в качестве триггера активации. Пример:

9 способов отслеживания отправки форм с помощью GTM

Текстовое сообщение в message

Возвращаемся к нашему примеру. Чтобы настроить триггер, нам сначала следует создать пользовательскую переменную типа Переменная уровня данных. Чтобы правильно написать имя переменной уровня данных, перейдите в консоль разработчика браузера на вкладку Console, введите команду dataLayer и нажмите Enter. Сделать это нужно сразу после отправки тестовой заявки, пока уровень данных заполнен событиями.

9 способов отслеживания отправки форм с помощью GTM

Команда dataLayer в консоли разработчика

Ниже вы увидите перечень событий в хронологическом порядке, точно такой же, какой представлен в режиме отладки GTM. Найдите событие ajaxComplete и раскройте его на всех уровнях с помощью стрелочки:

9 способов отслеживания отправки форм с помощью GTM

Копирование пути к переменной

Найдите ту переменную, которую хотите использовать в качестве переменной уровня данных. Как я написал ранее, я буду использовать statusText со значением success. Нажмите на переменную правой кнопкой мыши и выберите пункт меню Copy property path. Вставьте полученное значение в переменную GTM и удалите все лишнее перед словом attributes, чтобы получилось так:

9 способов отслеживания отправки форм с помощью GTM

Переменная уровня данных

Каждый уровень пути должен быть разделен точкой (точечная нотация). Если вы будете использовать message, то имя переменной уровня данных в диспетчере тегов будет attributes.response.message, поскольку message находится внутри response, а response внутри attributes.

После этого создайте триггер типа Пользовательское событие с такими настройками:

  • Имя события – ajaxComplete;
  • Условие активации триггера – statusText содержит success.
9 способов отслеживания отправки форм с помощью GTM

Триггер "Пользовательское событие" с условием активации

Триггер будет срабатывать в случае, если в отправленной форме переменная уровня данных примет значение, содержащее success. Для переменной attributes.response.message триггер тот же самый, только условие активации будет примерно следующим:

9 способов отслеживания отправки форм с помощью GTM

Пример триггера с attributes.response.message

Условие содержит будет для каждого свое, в зависимости от того текста, который отображается на вашем сайте после успешной отправки формы и определяется данным прослушивателем в переменной message.

Сохраните триггер. Добавьте тег Google Аналитика – Universal Analytics с типом отслеживания – Событие, в котором задайте собственные настройки и используйте триггер активации ajaxComplete, созданный на предыдущем шаге:

9 способов отслеживания отправки форм с помощью GTM

Настройка тега

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


Способ №7. Отслеживание отправки формы с помощью DOM Scraping

Технология получения веб-данных путем извлечения их со страниц сайтов по-английски называется DOM Scraping (Web scraping). Этим мы и будем заниматься.

В таком способе извлечения данных со страницы сайт есть один существенный недостаток - все, что вы будете делать, завязано на объектной модели документа (DOM). И при изменении каких-либо классов, идентификаторов отслеживаемых элементов на сайте есть вероятность потерять текущие настройки. Именно поэтому лучше выполнять отслеживание отправки формы или любых других нестандартных событий на сайте с помощью функций и привлечения разработчика, а не извлекая данные с помощью DOM-скрапинга.

Но такой метод отслеживания тоже существует и давайте разберем его. Например, на сайте после отправки заявки страница перезагрузилась, отображаемый контент поменялся, но URL-страницы не изменился, то есть произошло перенаправление на ту же самую страницу. Такое бывает, но встречается на практике реже (обычно наоборот – страница не перезагружается, а URL меняется). В этом случае нам как раз поможет встроенная переменная Элемент DOM.

Для демонстрации такого способа отслеживания я создал форму с двумя полями: Имя и E-mail.

9 способов отслеживания отправки форм с помощью GTM

Пример формы

После заполнения полей пользователь нажимает кнопку Подписаться, происходит перезагрузка страницы, URL-адрес остается прежним, а контент изменяется и появляется сообщение об успешной подписке:

9 способов отслеживания отправки форм с помощью GTM

URL не изменился, а содержимое поменялось

Для отслеживания отправки такой формы вы можете использовать пользовательскую переменную типа Элемент DOM и извлечь значение элемента с текстом Спасибо за вашу подписку…

Чтобы настроить переменную, необходимо сначала проинспектировать данный элемент и узнать его селектор. Откройте консоль разработчика, в которой будет отображен наш подсвеченный элемент в структуре DOM-дерева, нажмите на него правой кнопке и выберите CopyCopy selector:

9 способов отслеживания отправки форм с помощью GTM

Копирование селектора

В Google Tag Manager создайте пользовательскую переменную типа Элемент DOM, в которой будут следующие настройки:

  • Метод выбора – Селектор CSS;
  • Селектор элементов – скопированный селектор.
9 способов отслеживания отправки форм с помощью GTM

Переменная "Элемент DOM"

Отправив тестовое обращение, поверьте корректность извлечения данных с помощью режима предварительного просмотра. Если вы указали верный селектор CSS и выбрали событие Container Loaded, то напротив имени вашей переменной отобразится текст сообщения:

9 способов отслеживания отправки форм с помощью GTM

Проверка в режиме предварительного просмотра

Теперь нам нужно создать триггер, который зависит от нашей новой переменной DOM. Я буду использовать тип триггера Просмотр страницы с условием срабатывания Некоторые просмотры страниц – переменная Элемент DOM – содержит – Спасибо за вашу подписку.

9 способов отслеживания отправки форм с помощью GTM

Триггер типа "Просмотр страницы"

Таким образом, триггер будет срабатывать только на тех страницах, на которых посетителям отображается сообщение об успешной подписке. Остается только создать тег Google Аналитика – Universal Analytics с типом отслеживания Событие, а в качестве триггера активации задать Просмотр страницы.

9 способов отслеживания отправки форм с помощью GTM

Настройка тега

Если вы все сделали правильно, то после отправки формы в режиме отладки должен активироваться тег:

9 способов отслеживания отправки форм с помощью GTM

Активация тега

А поскольку тег имеет тип отслеживание Событие, то данные в Google Analytics будут отображаться в отчете Поведение - События - Лучшие события.


Способ №8. Отслеживание отправки формы с помощью виртуальных страниц

По умолчанию, просмотр страницы в инструменты веб-аналитики отправляется каждый раз, когда вы:

  • обновляете веб-страницу (на которой установлен счетчик веб-аналитики);
  • переходите на новую страницу (на которой установлен счетчик веб-аналитики).

И в одном и другом случае у страницы есть URL-адрес, который вы видите в адресной строке браузера. Однако, когда дело доходит до одностраничных веб-сайтов (Single Page Application, SPA), такое отслеживание перестает работать.

Одностраничное приложение Single Page Application (SPA) - веб-сайт или веб-приложение, в котором все данные, необходимые для переходов между разделами сайта, загружаются вместе с первой страницей, а весь контент загружается динамически, без обновления страницы и/или без перехода на другую веб-страницу, следовательно, просмотра страницы не происходит, и данные в инструменты веб-аналитики не отправляются.

Как правило, при таком отслеживании используется все та же технология AJAX. Наиболее распространенным примером SPA являются сайты на конструкторе Tilda. Тильда передает данные в системы веб-аналитики на основе просмотра страниц. Когда пользователь совершает какое-либо действие на странице, создается виртуальная страница. Подробнее о том, как работают виртуальные страницы, читайте в этой статье.

Мы же разберем практический пример отслеживания отправки формы с помощью данной технологии для сайта на конструкторе Tilda. Есть сайт, на котором добавлено n-ое количество форм, в том числе и на первом экране:

9 способов отслеживания отправки форм с помощью GTM

Пример формы (сайт на Тильде)

Существует два подхода к анализу статистики:

  1. через создание целей и фиксирование событий;
  2. через просмотр страниц.

Когда пользователь совершает какое-либо действие на странице: открывает попап, нажимает на кнопку или заполняет форму, создается виртуальная страница. Данные о том, сколько человек «посетили» эту виртуальную страницу (другими словами, открыли попап или нажали на кнопку) всегда доступны в системах аналитики без дополнительных настроек.

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

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

  • tilda/popup/rec31654896/opened — для попапа;
  • tilda/click/rec31742916/button1— для клика на кнопку;
  • tilda/form31751802/submitted — для заполнения формы.
9 способов отслеживания отправки форм с помощью GTM

Адрес виртуальной страницы отображается в настройках блока

Об этом подробно написано в справочном центре сервиса.

Если вы устанавливаете идентификаторы отслеживания Google Analytics и Яндекс.Метрики через интерфейс Тильды, то просмотры страниц создают автоматически при выполнении пользователями определенных событий. В случае установки кода Google Tag Manager необходимо произвести дополнительные настройки, поскольку в GTM виртуальные страницы по умолчанию не передаются. Вы можете воспользоваться этим руководством и настроить отслеживание отправки формы с помощью виртуальных страниц.

Сначала необходимо создать три пользовательских переменных с типом Переменная уровня данных. Их имена eventAction, referer и title соответственно.

9 способов отслеживания отправки форм с помощью GTM

Три переменных уровня данных

Переменная eventAction отвечает за адрес виртуальной страницы, а именно за формирование уникальной ссылки отправки формы. title – это заголовок формы, который предопределен в Тильде, а referer содержит URL исходной страницы, с которой был осуществлен переход на текущую страницу.

Затем создайте триггер с типом Пользовательское событие и именем pageView:

9 способов отслеживания отправки форм с помощью GTM

Триггер "Пользовательское событие"

На завершающем этапе добавьте тег Google Аналитика - Universal Analytics с типом отслеживания Просмотр страницы и следующими настройками:

Поля, которые необходимо задать, название поля:

  • page – {{eventAction}}
  • title – {{title}}
  • referrer – {{referer}}

Триггер активации – пользовательское событие pageView

9 способов отслеживания отправки форм с помощью GTM

Настройка тега

Сохраните изменения. Таким образом, когда пользователь отправит заявку на сайте, сработает событие pageView, а с помощью тега Google Analytics и поля page вы передадите в аналитику просмотр страницы с заголовком и реферера.

Если вы хотите передать такую же информацию в Яндекс.Метрику, то создайте тег типа Пользовательский HTML со следующим кодом:

9 способов отслеживания отправки форм с помощью GTM

Тег для Яндекс.Метрики

где XXXXXXXX – идентификатор счетчика Яндекс.Метрики. а конструкция {{ }} ссылается на три наших переменных уровня данных, которые были созданы на шаге ранее.

Подробнее об отправке данных о просмотре страницы в Яндекс.Метрику и методе hit читайте в официальной документации Яндекса (см. приложение).

Выполнить проверку настройки можно с помощью режима отладки Google Tag Manager и отправки тестового обращения. Если вы увидите событие pageView и активированный тег Google Analytics, это значит, что данные успешно отправлены в аналитику, а на вкладке Data Layer будет отображена информация по событию и трем нашим переменным:

9 способов отслеживания отправки форм с помощью GTM

Информация на уровне данных при отправке формы

О том, как настроить цели в Яндекс.Метрике и Google Analytics для сайтов на Tilda с помощью Google Tag Manager, смотрите в моем видео:


Способ №9. Отслеживание данных брошенных форм

Брошенная форма — это когда пользователь частично или полностью заполняет форму, но не отправляет ее нам по какой-либо причине: отвлекли, передумал, нечаянно закрыл вкладку браузера и не знает, как вернуться назад и т.д. С помощью Google Tag Manager вы можете отслеживать и такие формы.

Алгоритм отслеживания брошенных форм я подробно описал в отдельной статье.

Заключение

Основная проблема с отслеживанием форм в Google Tag Manager — отсутствие единого стандарта создания форм. Разработчик может сделать форму на HTML, а может в AJAX. В каких-то случаях будет достаточно встроенного триггера Отправка формы, а где-то поможет только уровень данных и пользовательское (специальное) событие.

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике