Как отследить Гугл форму

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

Соответственно, форма — уязвимое место приема таких обращений, которое может сократить их число из-за своей неэффективности.

Для оценки эффективности можно использовать различные методы, но сейчас мы остановимся на оценке форм с помощью системы веб-аналитики Google Analytics.

Идея данного метода взята из статьи «Use Virtual Page Views to See Which Steps Visitors Abandon From».

В данной статье рассматривает ее применение на практике.

Отслеживание с помощью событий в Google Analytics

Сначала определим каким образом в Google Analytics будут поступать данные. Для этого будем использоваться метод отслеживания событий существующий в системе.

‍ Отслеживаем отправку форм в Google Tag Manager (2019)

Все данные, получаемые с форм, будут поступать в Google Analytics с помощью метода _trackEvent().

Спецификация данного метода такова:
_trackEvent(category, action, opt_label, opt_value)

category (обязательно) — название для группы объектов, которые следует отслеживать

action (обязательно) — данное свойство определяет тип взаимодействия с сайтом (клик, скачивание, просмотр и т.д.)

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

value (необязательно) — целое число, которое можно использовать для предоставления численных данных об отслеживаемых событиях

Установка кода на страницах сайта

Пока что мы определились каким образом данные будут передаваться системе Google Analytics.

Теперь рассмотрим откуда и как будут браться сами данные.

Для этого используем библиотеку jQuery.

Для передачи адреса страницы в систему веб-аналитики Google Analytics используется jquery url parser и :input Selector библиотеки jQuery.

В итоге код обрабатывающий форму на странице будет выглядеть следующим образом:

$(document).ready(function() < var currentPage = jQuery.url.attr(«path»); $(‘:input’).blur(function () < if($(this).val().length >0) < pageTracker._trackEvent(«Form: » + currentPage, «input_exit», $(this).attr(‘name’)); >>); >);

Значения событий (label) берутся из атрибута «name» полей формы.

В тег «head» прописываем строки подключения библиотеки:

Полученные данные в отчетах Google Analytics

Полученные результаты можно наблюдать в отчете «Отслеживание событий» системы Google Analytics.

7 способов отслеживания формы с помощью Диспетчера тегов. Способ №1

Универсальный метод отслеживания отправки формы через Goolge Tag Manager

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

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

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

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

Тэг + Триггер

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

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

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

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

• Выберите тип отслеживания — Событие.
• Категория события — Представление формы (в случае необходимости выбирайте другой соответствующий заголовок).
• Действие события — Контактная форма (в случае необходимости выбирайте другой подходящий заголовок).
• Метка события — >. В случае необходимости выбирайте другие значения для категории, действия и метки события.
• Выберите параметр «Параметры 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

Источник: www.mediaguru.ru

Отслеживание форм в GTM

(7 оценок, среднее: 5,00 из 5)

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

1. Осмотрите форму

Если вы проверите форму на своем веб-сайте с помощью инструментов разработчика вашего браузера, вы можете посмотреть на элементы html, которые составляют форму. В Chrome, например, щелкните правой кнопкой мыши на форме и выберите «Просмотреть код», чтобы увидеть html.

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

2. Включите встроенную переменную формы

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

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

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

1. В разделе «Триггеры» нажмите «Создать».
2. Замените «Триггер без имени» с описательным именем, например «Отправка контактной формы».
3. Выберите событие «Отправка формы».
4. Настроить триггер:

• Не отметьте галочкой «Ждать тегов». Я не рекомендую использовать параметр «Подождите, пока теги» по умолчанию с формами, так как он может разорвать отправку формы. Это безопасно использовать, если вы тщательно протестируете его.
• Установите флажок «Проверка ошибок». Это проверяет, что форма фактически отправлена.

1. Включить триггер при выполненнии всех этих условий:

• Выберите опции: Путь к странице содержит «Page Path». Это позволяет запускать триггер на страницах, которые имеют «контакт» в пути, например, //pm-ka.com/. Вы должны изменить это, чтобы включить триггер на странице или страницах вашего сайта, которые содержат форму контакта. Вы также можете включить триггер на всех страницах, если это необходимо.

1. Активация триггера:

• Выберите опции: Идентификатор формы содержит «контактную форму». Это использует переменную, включенную на шаге 2, и уникальный идентификатор, который вы определили на шаге 1, чтобы точно указать, какую форму вы хотите отслеживать, как «представление контактной формы». Измените «Идентификатор формы» на любую переменную, включенную на шаге 2, и измените «контактную форму» на идентификатор, найденный на шаге 1.

1. Нажмите «Сохранить» для создания триггера.

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

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

1. В разделе «Теги» нажмите «Создать».
2. Замените «Тег без имени» на описательное имя, например «Событие отправки контактной формы».
3. Выберите конфигурацию тега: выберите «Universal Analytics».
4. Настроить тег:

1. Тип отслеживания: выберите «Событие».
2. Категория: Введите «Form».
3. Действие: Введите «Представление контактной формы». Вы можете переименовать категорию события и действие в соответствии с любым соглашением об именовании событий, которое вы используете.
4. Ярлык: введите «>». Это необязательно. Нам будет полезно быстро узнать, на какой странице была отправлена ​​форма.
5. Идентификатор отслеживания: введите идентификатор отслеживания свойства Google Analytics для своего сайта.

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

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

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

Источник: pm-ka.com