Gtm отправка формы проверка ошибок

Подробное руководство по отслеживанию отправки форм 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-адресом. Еще ее называют страницей Спасибо.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Способ №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 также воспользуйтесь режимом предварительного просмотра., перейдите на сайт и отправьте тестовую форму. В результате одним из событий должно идти с вашим названием:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. statusText;
2. response.

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

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

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

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

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

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

• Имя события – ajaxComplete;
• Условие активации триггера – statusText содержит success.

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

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

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

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

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

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

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

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

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

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

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

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

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

• Метод выбора – Селектор CSS;
• Селектор элементов – скопированный селектор.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• tilda/popup/rec31654896/opened — для попапа;
• tilda/click/rec31742916/button1— для клика на кнопку;
• tilda/form31751802/submitted — для заполнения формы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

Проблема

Есть форма, на неё нужно настроить цель в Google Analytics. Google Analytics работает через Google Tag Manager.

Если для настроек зайти в панель предпросмотра GTM, заполнить форму и отправить её, то в панели появляется событие не gtm.FormSubmit, а gtm.click. Значит, для аналитики не будет разницы, заполнена форма или нет, и, если пользователь просто кликнул по кнопке, то этот клик засчитается за отправку формы. Вот как тут:

Если есть отдельная страница «спасибо», всё проще — можно отслеживать загрузку этой страницы. Но у нас её нет, так что пришлось искать другой способ.

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

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

6 приёмов вёрстки, чтобы сделать удобную форму

Шаг 1. Проверить, используется ли ajax в формах

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

Создаёте тег, называете его AjaxListener, выбираете тип тега «Пользовательский HTML», добавляете туда вот этот код:

<script id="gtm-jq-ajax-listen" type="text/javascript">
(function() {
 
'use strict';
var $;
var n = 0;
init();
 
function init(n) {
 
// Ensure jQuery is available before anything
if (typeof jQuery !== 'undefined') {
// Define our $ shortcut locally
$ = jQuery;
bindToAjax();
 
// Check for up to 10 seconds
} else if (n < 20) {
n++;
setTimeout(init, 500);
 
}
 
}
 
function bindToAjax() {
 
$(document).bind('ajaxComplete', function(evt, jqXhr, opts) {
 
// Create a fake a element for magically simple URL parsing
var fullUrl = document.createElement('a');
fullUrl.href = opts.url;
 
// IE9+ strips the leading slash from a.pathname because who wants to get home on time Friday anyways
var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname;
// Manually remove the leading question mark, if there is one
var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search;
// Turn our params and headers into objects for easier reference
var queryParameters = objMap(queryString, '&', '=', true);
var headers = objMap(jqXhr.getAllResponseHeaders(), 'n', ':');
 
// Blindly push to the dataLayer because this fires within GTM
dataLayer.push({
'event': 'ajaxComplete',
'attributes': {
// Return empty strings to prevent accidental inheritance of old data
'type': opts.type || '',
'url': fullUrl.href || '',
'queryParameters': queryParameters,
'pathname': pathname || '',
'hostname': fullUrl.hostname || '',
'protocol': fullUrl.protocol || '',
'fragment': fullUrl.hash || '',
'statusCode': jqXhr.status || '',
'statusText': jqXhr.statusText || '',
'headers': headers,
'timestamp': evt.timeStamp || '',
'contentType': opts.contentType || '',
// Defer to jQuery's handling of the response
'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '')
}
});
 
});
 
}
 
function objMap(data, delim, spl, decode) {
 
var obj = {};
 
// If one of our parameters is missing, return an empty object
if (!data || !delim || !spl) {
 
return {};
 
}
 
var arr = data.split(delim);
var i;
 
if (arr) {
 
for (i = 0; i < arr.length; i++) {
 
// If the decode flag is present, URL decode the set
var item = decode ? decodeURIComponent(arr[i]) : arr[i];
var pair = item.split(spl);
 
var key = trim_(pair[0]);
var value = trim_(pair[1]);
 
if (key && value) {
 
obj[key] = value;
 
}
 
}
 
}
 
return obj;
 
}
 
// Basic .trim() polyfill
function trim_(str) {
 
if (str) {
 
return str.replace(/^[suFEFFxA0]+|[suFEFFxA0]+$/g, '');
 
}
 
}
 
 
})();
/*
* v0.1.0
* Created by the Google Analytics consultants at http://www.lunametrics.com
* Written by @notdanwilkerson
* Documentation: http://www.lunametrics.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/
* Licensed under the Creative Commons 4.0 Attribution Public License
*/
</script>

Триггером выбираете «Все страницы».

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

Если ajaxComplete не срабатывает, то этот способ отслеживания вам не подходит, и, возможно, мы напишем ещё одну статью.

Шаг 2. Проверяем, что отправляется в Data Layer

В панели предпросмотра кликаем по событию «ajaxComplete», затем переходим во вкладку Data Layer и находим строчку ‘response’. Нужно посмотреть, что там появляется.

Наши формы интегрированы с CRM, так что в ответе видно, что данные отправляются в CRM:

Кроме этого, там должен быть ответ, который выдаётся пользователю после отправки формы.

У нас вообще это «Спасибо, заявка отправлена!», но изначально такой строчки в коде не оказалось, так что пришлось обратиться к программисту и попросить его передавать в Data Layer нужные мне ответы. Решили отдавать два вида ответа: «FORM SUBMITTED», если заявка успешно отправилась, и «DATA LOST», если заявка не ушла в CRM.

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

Шаг 3. Создаём переменную

Теперь, когда формы готовы к отслеживанию, идём в аккаунт GTM, меню «Переменные» и создаём новую переменную (кнопка «Создать»).

Назовём переменную DLV-attributes.response, где DLV — это Data Layer Variable, а attribute.response — это путь к ответу, который отдаётся в Data Layer.

Тип переменной — «Переменная уровня данных». В имени переменной указываем attribute.response. Если ошибиться, чуда не произойдёт — attribute.response — это путь к ответу, который отдаётся в Data Layer, посмотрите сами. Вот, что мы видим в Data Layer:

И вот, что мы прописываем в имени переменной (в англоязычном интерфейсе нагляднее):

Остальное оставляем по умолчанию: «Версия 2» и без галочки напротив «Установить значение по умолчанию».

Переменная готова.

Шаг 4. Определяем, каким должно быть событие в Google Analytics

Прежде чем задать теги, нужно понять, что именно нам важно видеть в Google Analytics. Первое, что вы видите, заходя в раздел Поведение → События → Обзор — это категории событий:

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

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

Так что, для отправки форм заявки у нас одна категория — «Формы заявки». В качестве действия по событию мы отправляем страницу, на которой была оформлена заявка, и только в качестве ярлыка — успешно или не успешно прошло событие:

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

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

Итак, определились, как отправлять событие в Google Analytics. Теперь идём обратно в GTM и настраиваем всё это добро.

Создаём новый тег. Я решила, что для нас будет оптимально настроить два тега: один для успешной отправки формы, другой — для случаев, когда форма была заполнена, но данные до нас не дошли. Ведь на сайтах всегда что-нибудь ломается, и важно об этом быстро узнать.

Возможно, два тега — это не лучший вариант, потому что тегов становится слишком много. Есть другой вариант — сделать один тег, а в ярлык события отправлять как раз недавно созданную нами переменную — DLV-attribute.response. Тогда, по идее, в ярлыке события в аналитике будет отображаться Form Submitted или Data lost.

Но наш ответ, который отправляется в Data Layer, выглядит так:

Поэтому, отправляй мы DLV-attribute.response в ярлык события, в аналитике получили бы что-то вроде этого:

В общем, вы поняли. Так что два тега.

Шаг 5. Настраиваем тег для успешной отправки формы

Создаём новый тег, тип — Universal Analytics. Я назвала его FormSubmitted.

Тип тега — «Событие». Категория, как мы уже решили, — «Формы заявки». В действие я отправляю {{Page Path}} — переменная, которая показывает относительный адрес страницы. Так мы будем знать, какие страницы конвертируют лучше, какие — хуже. В ярлык прописываю «успешно», потому что это тег для успешной отправки формы.

В меню «Настройки Google Analytics» вносим идентификатор отслеживания Google Analytics. Он уже должен быть сохранён в виде переменной. Найти идентификатор отслеживания можно в аккаунте GA: администратор → отслеживание → код отслеживания:

Теперь задаём триггер — условие, при котором событие будет отправляться в Google Analytics.

Шаг 6. Настраиваем триггер для успешной отправки формы

Идём в меню «Триггеры» и создаём новый триггер. Я назвала его AjaxFormSubmitted, чтобы по названию можно было догадаться, для чего он нужен.

В качестве типа триггера выбираем «Пользовательское событие», в качестве имени события — ajaxComplete (не ошибитесь, а то не будет работать). Дальше ставим галочки напротив «Некоторые специальные события» и выбираем условия срабатывания триггера. Здесь как раз и потребуется переменная, которую мы создавали, — DLV-attribute.response. Выбираем её из списка переменных и говорим, что она должна содержать слова «FORM SUBMITTED» (поле чувствительно к регистру) — это тот ответ, который добавлял наш программист в данные, которые отправляются в Data Layer.

В нашем случае пришлось добавить ещё одно условие — click text. У нас на сайте два типа форм: формы заявки и формы подписки на блог. Так вот, они обе используют ajax и при удачной отправке данных обе отправляют ответ FORM SUBMITTED. Переменные Click Text у них различаются, так что по ней можно отличить одну форму от другой.

Шаг 7. Настраиваем тег неуспешной отправки формы

Он будет настраивается аналогично тегу успешной отправки, только передавать другие данные и срабатывать при других условиях.

Создаём новый тег, называем его FormSubmissionFail, тип тега — Событие, Категория — «Форма заявки», Действие — переменная {{Page Path}}, Ярлык — ошибка отправки. И добавляем идентификатор отслеживания.

Триггер создаём новый — AjaxFormSubmission-Failed. Тип — Пользовательское событие, Имя события — ajaxComplete (опять же, ошибаться нельзя), галочка на «Некоторые специальные области» и условием ставим, что переменная DLV-attribute.response содержит ответ «DATA LOST».

Шаг 8. Проверяем работу тегов

Для этого включаем режим предварительного просмотра. Хотя он у вас уже включён, так что нужно нажать на ссылку «Обновить» в плашке с предупреждением о предварительном просмотре.

Идём на сайт, обновляем страницу со сбросом кэша (cmd+shift+R на Mac или ctrl+F5 на Windows). Заполняем форму, которую отслеживаем. В панели предпросмотра после её отправки должно появиться событие ajaxComplete.

Кликаете на него — справа появляется список тегов, которые сработали при отправке формы. Если сработал тег FormSubmitted, значит, всё хорошо.

Если не сработал, кликаете по тегу, который должен был сработать, появляются сведения о триггере, который вызывает этот тег:

У нас на скриншоте три зелёные галочки — это все условия, которые заставляют триггер срабатывать. Если бы какое-то из них не выполнялось, напротив него был бы красный крестик. В общем, благодаря этому легко обнаружить и исправить ошибку.

Ещё один вариант ошибки — если срабатывают даже те теги, которые не должны срабатывать. Значит, в триггере у них одинаковые условия для выполнения. Тогда кликаете по тегу, идёте во вкладку Variables, в обоих тегах ищите переменные, которые у них отличаются. Эти переменные вписываете в условия срабатывания тегов. Иначе — неверные данные в аналитике, невозможность строить прогнозы и планы, всё катится к чертям, компания разоряется, сотрудники остаются без работы.

Надеюсь, вы будете внимательны, правильно настроите формы и сможете получать хорошие данные.

Ранее мы уже писали о том, как установить и настроить Google Tag Manager на сайт, а также как с его помощью настроить отслеживание кликов. В этой статье мы расскажем о том, как с помощью GTM настроить отслеживание успешной отправки формы.

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

Достаточно настроить в Google Analytics цель «Переход на страницу благодарности».

Рисунок 1

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

Настройка отслеживания успешной отправки форм на сайте при передаче данных с помощью submit

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

Рисунок 2

Далее проверяем, активированы ли переменные в разделе «Формы».

Рисунок 3

На следующем этапе создаём триггер с такими параметрами:
Тип: «Отправка формы»
Условия активации: «Некоторые формы»
Условие, при наступлении которого должен активироваться триггер: в нашем случае это Form ID = cfprm1 на главной странице сайта

Рисунок 4

Затем создаём тег с такими параметрами:
Тип тега: «Universal Analytics»
Тип отслеживания: Событие
Категория: мы назвали «Form»
Действие: мы назвали «Otpravka»
Триггер активации: триггер, созданный на предыдущем шаге

Рисунок 5

Рисунок 6

После того как мы убедились в правильной настройке тега (для этого используем режим предварительного просмотра), настраиваем отслеживание цели в Google Analytics.

Таким образом, мы настроили отслеживание события с помощью GTM без вмешательства в исходный код сайта.

Настройка отслеживания успешной отправки форм на сайте при передаче данных с помощью AJAX

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

А. Найти Javascript код, в котором расположена функция, отправляющая данные через AJAX;
Б. Найти в этой функции параметр «Success», отвечающий за действия, которые будут выполняться после успешной отправки данных на сервер;
В. Прописать внутри function() { … } команду
dataLayer.push({'event': 'event_name'}) заменив «name» придуманным названием.
Мы написали так:
dataLayer.push({'event': 'otpravka_form'}) 

В коде это выглядит следующим образом:

Рисунок 7

Г. Настроить отслеживание успешной отправки формы с помощью GTM. Для этого нужно создать триггер со следующими параметрами:
Тип триггера: «Пользовательское событие»
Имя события: нужно указать event, который был прописан в функции; в нашем случае это ‘otpravka_form’

Рисунок 8

Затем нужно создать тег с такими параметрами:
Тип тега: «Universal Analytics»
Тип отслеживания: Событие
Категория: мы назвали «form ajax»
Действие: мы назвали «otpravka»
Триггер активации: триггер, созданный на предыдущем шаге

Рисунок 9

После того как вы убедитесь в правильной настройке тега (для проверки нужно использовать режим предварительного просмотра), можете настроить отслеживание цели в Google Analytics.

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

Еще статьи по теме:
Настройка отслеживания 404 ошибок с помощью Google Tag Manager
Настройка отслеживания e-commerce с помощью Google Tag Manager

Еще по теме:

• Инструменты для SEO-Junior, как ускорить выполнение задач — советы

Работа с семантикой Сбор маркеров Serpstat Системы Метрик Сбор облака запросов Несколько потоков в Key Collector Антикапча Чистка запросов Лемматизатор «Анализ групп» в Key Collector…

• Парсим сайт при помощи XPath

Что такое XPath Терминология XPath и отношение узлов Синтаксис Предикаты Как парсить данные с помощью Google Spreadsheets Синтаксис XPath-запроса для Google Spreadsheets Распространённые выражения Разметка…

• Аудит сайта при помощи плагина SeoTools для Excel — подробная инструкция

Как спарсить метаданные с помощью Excel, проверить битые ссылки, получить данные из поисковых систем? В сегодняшней статье мы рассмотрим возможности плагина SeoTools – одного из…

• Как узнать частоту ключевого запроса в Яндекс и Google

Эта статья рассчитана на новичков в SEO, а также на владельцев сайтов, которые выбрали себе запросы для продвижения, но не знают, частотные ли это запросы….

• Сравнительный обзор бесплатного SiteAnalyzer с аналогичными платными сервисами

Что может SiteAnalyzer? Простота в использование инструмента Генерация sitemap.xml в один клик Перекрестный анализ сайтов Постраничная скорость загрузки сайта Тонкие настройки парсера Все ведь любят…

Google Диспетчер тегов. Основы отправки форм

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

Вы, вероятно, заметили триггеры и встроенные переменные форм в Диспетчере тегов Google. Включите хотя бы одну переменную форм и создайте триггер отправки формы, который прослушивает все формы отправки заявок. Таким образом вы включите автоматический прослушиватель событий формы GTM.

Функция автоматического прослушивания формы слушает стандартное событие браузера отправки данных. Однако подавляющее большинство форм используют другие способы отправки своих данных (например, jQuery $.ajax), поэтому submit event не может работать. В этом случае Диспетчер тегов Google никогда не регистрирует отправку формы. И это довольно распространенная проблема.

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

Тэг + Триггер

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

1. Перейдите к тегам.

2. Нажмите кнопку «Создать».

3. В конфигурации тегов выберите «Universal Analytics»:

• Выберите тип отслеживания — Событие.
• Категория события — Представление формы (в случае необходимости выбирайте другой соответствующий заголовок).
• Действие события — Контактная форма (в случае необходимости выбирайте другой подходящий заголовок).
• Метка события — {{URL-адрес страницы}}. В случае необходимости выбирайте другие значения для категории, действия и метки события.
• Выберите параметр «Параметры Google Analytics».

4. Оставьте элемент Triggering пустым (временно) и нажмите «Сохранить». Мы вернемся к нему позже. 80% данного поста посвящены различным типам триггеров, которые вы сможете использовать. Выбор типа триггера зависит от способа разработки формы.

7 методов отслеживания формы, о которых я упоминал в заголовке данного поста, являются триггерами. Каждый из них зависит от разных элементов/событий, которые происходят на веб-сайте после отправки формы:

• Функция автоматического прослушивания формы.
• Страница «Спасибо за заказ».
• Отслеживание формы AJAX.
• Отслеживание видимости элементов на сайте.
• Написание собственного автозапуска.
• Отслеживание события через Datalayer (dataLayer.push).
• Очистка с помощью DOM.

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

Готовые руководства

Теперь, прежде чем погрузиться в данное руководство, вы должны знать следующее: весь этот гид универсален и охватывает практически любую форму на планете (ну, может быть не любую, но около 95% всех форм (полученная статистика)).

Однако, чтобы сэкономить вам некоторое время, я хотел бы спросить, используете ли вы формы Contact Form 7, Caldera Forms или Gravity Forms?

Если да, то у меня есть хорошие новости для вас: ниже приведены три руководства, адаптированные к плагинам популярной формы ( на английском):

• Как отслеживать форму Contact Form 7 с помощью Диспетчера тегов Google
• Как отслеживать формы Caldera с помощью Диспетчера тегов Google
• Как отслеживать формы Gravity с помощью Диспетчера тегов Google

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

Какой метод отслеживания формы следует выбрать?

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

Открыть полную схему в новом окне

Я уверен, что некоторые части этой схемы могут выглядеть размытыми и не совсем ясными. Продолжайте читать, и вам всё станет ясно.

# 1. Отслеживание форм с помощью Google Tag Manager (со слушателем форм)

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

Затем откройте список всех триггеров (кликнув по Триггерам на левой боковой панели). Создайте новый триггер:

• Название «Все формы отправки заявок».
• Тип триггера – «Форма отправки заявки».
• Оставить «Ждать теги».

• Установите флажок «Проверить правильность». Как только проверка будет завершена, GTM не будет запускать триггер, если предотвращено действие формы (передача и перенаправление) по умолчанию. Если этот параметр не установлен, триггер будет отключен при регистрации события отправки (даже если форма отправляется с ошибками (например, несколько обязательных полей остаются пустыми)). На скриншоте ниже я включил этот триггер ТОЛЬКО на странице, где находится форма контактной информации (Путь к странице содержит «Связаться с нами»).
• Запуск. В этом примере я настроил отслеживание всех форм (которые находятся на странице «Связаться с нами» (потому что в предыдущем абзаце этого руководства я установил триггер для включения только на определенной странице).

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

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

Он ДОЛЖЕН появиться. Если баннер отсутствует, прочитайте это руководство, как исправить предварительный просмотр GTM и режим отладки.

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

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

Вернемся к отслеживанию формы. Заполните форму (не оставляйте поля пустыми):

1. Нажмите кнопку отправки. Событие gtm.formSubmit появилось в консоли предварительного просмотра и отладки? Если нет, то автоматический прослушиватель событий формы GTM не будет работать с этой формой, и вы должны выбрать следующий вариант отслеживания формы, описанный в данном посте.

2. Если в окне предварительного просмотра и отладки появилось событие gtm.formSubmit, вы должны провести еще один тест. Попробуйте оставить хотя бы одно обязательное поле формы пустым и снова отправить форму. Таким образом вы имитируете ошибку в своей форме:

• Если событие gtm.formSubmit запускается еще раз, вы должны проверить другие параметры отслеживания формы, упомянутые в этой статье.
• Если событие gtm.formSubmit не сработало — отлично! Это означает, что GTM будет отслеживать только те формы, которые были успешно завершены (это именно то, что вам нужно).

Отлично! Мы определили, что нашу форму можно отслеживать с помощью встроенного прослушивателя формы GTM. Давайте создадим триггер специально для этой формы. Помните событие gtm.formSubmit, которое упоминалось ранее? Нажмите на него (в режиме предварительного просмотра и отладки), затем нажмите «Переменные».

Затем прокрутите вниз и начните искать любую переменную формы, уникальную именно для данной формы. Обычно это переменная Form ID, в других случаях — классы форм (но Form ID является лучшим вариантом (в случае доступности)). На изображении ниже я представил форму (где переменная Form ID является form_contact2).

Это хороший идентификатор, который не используется ни на каких других элементах сайта, поэтому я буду использовать его для моего триггера:

1. Перейдите в «Триггеры» и нажмите «Создать».

2. Выберите раздел «Конфигурация триггера» и выберите тип триггера — представление формы.

3. Нажмите «Проверить правильность» и установите URL-адрес, который соответствует RegEx (.*). Это правило означает, что триггер отправки формы будет доступен на всех страницах. Если вы хотите сделать его доступным только на определенных страницах, вы можете добавить более конкретные правила, такие как URL страницы содержит/связаться с нами/ (это зависит от URL-адреса вашей контактной формы).

4. Затем настройте этот триггер для запуска только в некоторых формах и введите следующее правило: Form ID равен form_contact2.

• Если вы не видите переменную идентификатора формы — включите ее в список встроенных переменных Диспетчера тегов Google.
• Form ID может (и, вероятно, будет) отличаться в вашей ситуации (по сравнению с моим примером).

Проверка

1. Назначьте данный новый триггер тегу Google Analytics, который вы создали в начале.

2. Откройте (или обновите) режим предварительного просмотра и отладки, обновите веб-страницу с формой, которую вы хотите отслеживать.

3. Затем заполните форму и отправляйте. Если тег Google Analytics был запущен успешно — это хорошая новость! Также (если возможно) попробуйте отправить другую форму на свой сайт: в случае успешной отправки, тег GA не должен срабатывать.

Еще о способах отслеживания формы с помощью Диспетчера тегов

# 2. ОТСЛЕЖИВАНИЕ СТРАНИЦЫ «СПАСИБО» С ПОМОЩЬЮ ДИСПЕТЧЕРА ТЕГОВ GOOGLE

# 3. ОТСЛЕЖИВАНИЕ ФОРМЫ AJAX С ПОМОЩЬЮ ДИСПЕТЧЕРА ТЕГОВ GOOGLE

# 4. ФОРМЫ ОТСЛЕЖИВАНИЯ С ИСПОЛЬЗОВАНИЕМ ТРИГГЕРА ВИДИМОСТИ ЭЛЕМЕНТОВ

# 5. НАПИШИТЕ СВОЙ СОБСТВЕННЫЙ АВТОМАТИЧЕСКИЙ ПРОСЛУШИВАТЕЛЬ СОБЫТИЙ

# 6. ОТСЛЕЖИВАНИЕ ФОРМ С ПОМОЩЬЮ СОБЫТИЙ DATALAYER

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

Материал подготовлен на основе статьи на Analytics mania

Оцените статью

Поделитесь в соцсетях