Отслеживание формы по клику через Google Tag Manager

Отслеживание формы по клику через Google Tag Manager

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

Начнем по порядку

Почему для отслеживания целей в Analytics мы используем Google Tag Manager?

На это есть 2 основные причины:

1. Отслеживание целей на сайте с ajax стандартным кодом

ga(‘send’, ‘event’, ‘order1’, ‘order1’);

Не работает.

2. С помощью GTM мы минимизируем работу с директориями/админками сайтов или же снижаем количество работы для программистов до одной задачи – установки кода Google Tag Manager.

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

Итак, исходя из проблем, первое что нам нужно — это установить Google Tag Manager на сайт.

Для установки кода этого нам потребуется:

1. Зайти в Google Tag Manager tagmanager.google.com

Интерфейс в Google Tag Manager довольно простой на свой вид, но сложный по строению при первом знакомстве с ним.

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

Создание аккаунта

3. Далее открывается окно, в котором вводим название кампании, названия контейнера и, где будет использоваться контейнер в нашем случае выбираем Веб-сайт.

Все данные потом можно будет изменить.

Название аккаунта

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

4.Подверждаем условия использования.

Подтверждение условия пользования

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

Код Google Tag Manager

6. Проверить установлен ли код можно открыв сайт и нажав комбинацию Ctrl+U, далее ищем наш отрезок кода.

Перейдем к меню Tag Manager’а

Суть меню следует из особенностей tag manager

1. Первым идет контейнер – это фрагмент js-кода. Следуя из названия он явлется контейнером для тегов.

2. Тег – это скрипты, которые мы устанавливаем для google analytics или, к примеру, для отслеживания отправки форм или код яндекс метрики. Все они теперь располагаются в одном контейнере.

3. Триггер – простым языком, это условие, при которым активируется тег, к примеру, отслеживание отправки формы.

4. Переменные – это параметры, состоящие из 2 частей. Названия переменной и ее значения к примеру, URL — example.com/index.html. Переменные нужны для того, чтобы задать условия в триггере.

Меню Google Tag Manager

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

Для этого заходим в Переменные. И нажимаем на кнопку «Настроить» в подменю «Встроенные переменные».

Переменные кнопка "Настроить"

В открывшемся меню опускаемся до Кликов и Форм и включаем переменные Click Classes и Click Element в кликах и все пункты в формах. С помощью этих переменных можно будет определить клик по тому или иному объекту на сайте.

Переменные Форм и Кликов

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

Создаем Тег

Создание Тега в GTM

  • Для этого нажимаем на «Новый Тег» в конфигурации тега и выбираем Universal Analytics.

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

Создание тега Universal Analytics

Настройка Тега Universal Analytics

  • В пункте «Настройки google analytics» нажимаем на «Новая переменная…» и здесь указываем Идентификатор отслеживания нашего Analytics (его можно посмотреть в Администратор-> настройках ресурса)

Идентификатор отслеживания.png

  • Называем переменную и нажимаем сохранить.

Создание переменной Google Analytics.png

  • Здесь же нажимаем на Триггеры и выбираем All Pages

Переменная все страницы

Этот Тег создается для отслеживания заходов/переходов посетителей по страницам сайта.

Называем Тег и нажимаем сохранить.

Сохранение Тега Universal Analytics.png

Для отслеживание всех кликов и форм создаем специальные Триггеры:

1. Триггер для всех кликов

Переходим в меню триггеры нажимаем создать выбираем в меню «Клик» — «Все элементы» даем название и жмем сохранить.

Создание триггера

Задание переменной триггера

Сохранение тригера.png

2. Триггер для отправки форм

Жмем Создать -> В меню «Взаимодействия пользователей»-> «Отправка формы»-> Сохранить

Создание триггера

Создание триггера формы

Далее нажимаем на отправить, указываем название и жмем опубликовать.

Отправка изменений GTM.png

Переходим обратно на рабочую область и нажимаем предварительный просмотр.

Заходим на сайт.

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

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

  • Выбираем тот клик, который вызывает отправку формы.

Отслеживание клика через Google Tag Manager

  • Переходим на вкладку Variables и копируем значение Click Classes

Variables в GTM и Click Classes

  • Идем обратно в наш GTM и создаем тег «Событие»

Создние тега Событие

В конфигурации выбираем Universal Analytics.

Тип отслеживания «Событие» и задаем категорию и действие, которые в последствии пропишем в analytics.

Выбираем уже созданные настройки Google Analytics.

Создание тега событие

Далее создаем Новый триггер

Создание нового триггера.png

Клик -> Все элементы

Создание триггера по заданному клику

И выбираем «Некоторые клики»

Задаем в настройках Click Classes «Содержит» и те параметры, которые мы скопировали с сайта.

Триггер по клику отправки формы

Все это сохраняем и отправляем изменения.

Отправка изменений GTM.png

И далее заходим в Google Analytics

  • Переходим в настройки Целей
  • Добавляем новую цель

Настройка цели в Analytics

  • Выбираем Собственная и Жмем далее

Создание собственной цели в GA

Даем название цели и выбираем тип «Событие», жмем Далее.

Выбор типа цели в Google Analytics

В открывшемся меню вводим те данные события, которые ранее задавали в Google Tag Manager.

Создание события в GA на клик из GTM

Всё! Цели созданы!

Теперь требуется проверить их работоспособность.

В Google Analytics перейдем в Отчеты реального времени далее в отчет «Конверсии» и перейдя на сайт заново заполняем форму и отправляем ее. В Analytics должна при этом отработать цель.

Отслеживание конверсий в реальном времени

Сработанные события

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

Как отслеживать клики по кнопке с помощью Google Tag Manager

Константин Булгаков

Кнопки на сайте являются ключевым конверсионным элементом любой веб-страницы. Не имеет значения, какие действия пользователи выполняли, так как в 99,8% случаях посетители вынуждены взаимодействовать с кнопками.

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

В рамках материала мы настроим GTM и научимся передавать события в системы веб-аналитики при контакте посетителя сайта с формами и кнопками в них.

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

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

Шаг 1: Определяем Class или Id элемента

Для начала определим уникальные атрибуты class или id выбранной кнопки. Google Tag Manager будет отслеживать взаимодействие именно по этим атрибутам.

Для того чтобы определить уникальный идентификатор для кнопки, переходим на страницу с формой подписки. Вызываем стандартную функцию просмотра кода в Google Chrome (Ctrl + Shift + I) и наводим курсор на кнопку.

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

Для дальнейшего отслеживания взаимодействия с кнопкой запоминаем id-элемент «mc-embedded-subscribe» . Именно он нам и пригодится в последующей настройке.

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

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

Шаг 2: Активация переменной

Уникальный идентификатор кнопки мы определили, теперь время перейти в интерфейс Google Tag Manager.

  1. Переходим в аккаунт Google Tag Manager и выбираем нужный контейнер;
  2. Открываем раздел меню Переменные и нажимаем на кнопку Настроить;
  3. В блоке Клики рекомендую сразу активировать поля Click Classes и
    Click ID.

Важно! В нашем примере мы используем тип переменной Click ID, так как в коде кнопки используется атрибут id . Повторюсь, что в вашем случае может быть атрибут class , в таком случае для отслеживания потребуется использовать переменную Click Classes.

Шаг 3: Настройка триггера

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

  1. Переходим в раздел меню Триггеры;
  2. Создаем новый триггер с типом Клик – Все элементы;
  3. Выбираем условия активации триггера — Некоторые клики;
  4. Указываем условие Click ID (идентификатор клика) содержит mc-embedded-subscribe ;

Настройка триггера Все элементы

Теперь триггер будет активироваться при клики на элемент с идентификатором mc-embedded-subscribe . А это нам как раз и нужно!

Сохраняем и переходим к следующему этапу настройки.

Шаг 4: Передача события в Google Analytics

Создаем и настраиваем теги, которые будут передавать события при активации триггера по заданным условиям в системы Google Analytics и Яндекс.Метрика.

Начнем с Google Analytics.

  1. Переходим в раздел меню Теги и нажимаем Создать;
  2. Выбираем тип триггера Google Аналитика — Universal Analytics;
  3. В поле Тип отслеживания выбираем Событие;
  4. Указываем в свободной форме поля Категория и Действие;
  5. В поле Настройки Google Analytics добавляем переменную с идентификатором отслеживания Google Analytics;
  6. В нижнем блоке триггеры добавляем ранее созданные нами триггер с типом Все элементы.

Как создать переменную c идентификатором отслеживания Google Analytics в Google Tag Manager можно почитать здесь.

На выходе получаем примерно такую конфигурацию тега для Google Analytics.

Создание нового тега для Google Analytics

В нижнем блоке Триггеры добавляем ранее созданные нами триггер для активации тега:

Триггер Все элементы

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

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

Настройки цели в Google Analytics

Накопленные данные по собранным событиям можно посмотреть в отчете Поведение > События или проверить результат передачи данных с помощью Отчета в режиме реального времени.

С Google Analytics разобрались, теперь разберем настройку для системы Яндекс.Метрика.

Шаг 5: Передача события в Яндекс.Метрику

Для Метрики все по аналогии с предыдущим примером, но выбираем другой тип тега.

  1. Переходим в раздел меню Теги и создаем новый;
  2. Выбираем тип тега — Пользовательский HTML;
  3. В пустую область вставляем специальный код, который будет отправлять данные в Метрику;

Здесь, XXXXXXX — номер вашего счетчика, а subscribe_done — название идентификатора цели, которое указывается в свободной форме.

Настройка тега для Яндекс.Метрики

В блоке Триггеры выбираем созданный ранее триггер для активации тега.

Также не забываем создать цель в Яндекс.Метрике:

    в Метрику и выберите из списка нужный счетчик;
  1. В меню выберите Настройки и перейдите во вкладку Цели;
  2. Нажмите на кнопку Добавить цель и выберите тип Java-Script событие;
  3. Укажите понятное название для создаваемой цели;
  4. В поле идентификатор цели укажите название (в нашем случае указываем subscribe_done );
  5. Cохраните настройки.

Накопленные данные по выполненным целям можно будет посмотреть в стандартном отчете Конверсии.

Отлично! Мы разобрали принципы и последовательность действий по настройке Google Tag Manager для передачи события в системы аналитики по кнопке. Рад, если изложенный материал хоть немного упростил настройку и сэкономил вам время.

Не разобрались?

Инструкция не помогла? Нашли ошибку в описании? Пишите письма на info@konstantinbulgakov.com или оставляйте комментарии в форме ниже под статьей.

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

Отслеживаем взаимодействие пользователей с формами при помощи Google Tag Manager

Отслеживаем взаимодействие пользователей с формами при помощи Google Tag Manager

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

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

Интересно? Тогда давайте по-быстрее приступим.

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

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

  • Включить встроенные переменные типа Clicks. Для этого перейдите в раздел Переменные > Встроенные переменные и нажмите кнопку Настроить:

Включаем встроенные переменные GTM типа Clicks

  • Узнать идентификатор, класс или CSS-селектор необходимой нам кнопки. Зачастую у необходимого элемента отсутствует класс или ID, поэтому мы пойдем по пути селектора CSS. В браузере Chrome нажмите правой кнопкой мыши на интересующем элементе и выберите пункт Просмотреть код. В открытом новом окне, на выделенном коде нажмите еще раз правой кнопкой мыши и выберите Copy > Copy selector:

Как узнать идентификатор, класс или CSS-селектор необходимой кнопки

  • Создать триггер с необходимым условием. Выбираем тип триггера- Все элементы. Условие активации — Некоторые клики. И задаем следующее условие:

Создание тригера по клику на определенную кнопку формы

где, вместо YOUR_SELECTOR указываем скопированное значение CSS-селектора.

  • Создать тег для отправки данных в Google Analytics. Тип необходимого тега Google Analytics — Universal Analytics. Тип отслеживания — Событие. Категорию, Действие и Ярлык события можно задать на своё усмотрение:

Тег отправки события по клику на кнопку формы

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

Передача значения введенного в поля формы

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

Перед использованием необходимо заменить YOUR_SELECTOR на CSS-селектор необходимого поля. Получить его можно по аналогии с CSS-селекторами кнопки. Только кликать правой кнопкой теперь нужно не на кнопку, а на соответствующее поле:

Как узнать CSS-селектор поля ввода формы

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

Если все верно, получите текущее значение поля:

Проверка CSS-селектора в консоли разработчика

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

Переменная для хранения информации с инпутов формы

Теперь сможете использовать эту переменную для передачи данных в любую внешнюю систему. Рады? Я тоже! Самое время перейти к настройке валидации формы через Google Tag Manager.

Проверка валидации формы при клике

Для этого решения нам понадобиться еще одна пользовательская переменная, назовем её >, типа Собственный код JavaScript:

Переменная Google Tag Manager для валидации формы при клике

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

где вместо значений YOUR_SELECTOR_NAME, YOUR_SELECTOR_EMAIL, YOUR_SELECTOR_TEL необходимо ввести значение CSS-селекторов для соответствующих полей формы. Как это сделать мы разбирали выше.

Теперь, когда мы настроили валидацию внутри переменной GTM самое время создать триггер и тег для отправки данных в Google Analytics. Первый создаем по аналогии с обычным кликом на кнопку, единственное отличие — созданная нами переменная для проверки валидации должна иметь значение true.

Тригер для настройки проверки валидации формы при клике

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

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

Изменение данных в полях формы

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

Здесь нам понадобится:

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

Пользовательский HTML тег для отслеживания взаимодействия с полями формы в GTM

Код который используется:

Вместо значения YOUR_SELECTOR необходимо ввести значение CSS-селектора формы.

Триггером для данного тега выбираем событие Window Loaded. Лучше всего ограничить трегер только теми страницами, на которых есть соответствующая форма. Например для главной:

Тригер Window Loaded для отслеживания взаимодействия с полями формы

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

  • Тег для отправки данных в Google Analytics с соответствующим триггером. Для отправки данных создаем триггер типа Пользовательское событие и указываем имя события change form:

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

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

Тег для отправки данных в Google Analytics о взаимодействии с полями формы

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

  • пользователи, которые взаимодействовали с полями формы;
  • пользователи, которые пытались отправить форму;
  • пользователи, которые успешно отправили форму.

Если у вас остались вопросы по отслеживанию форм с помощью Google Tag Manager — пишите их в комментариях.

Отслеживание отправки форм на сайте с помощью GTM

like97

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

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

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

Настройка цели в GTM

Рисунок 1

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

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

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

Уникальный идентификатор формы для отслеживания кликов в GTM

Рисунок 2

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

Проверка форм и переменных для отслеживания в GTM

Рисунок 3

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

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

Рисунок 4

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

Создание тега «Universal Analytics»

Рисунок 5

Список триггеров активации в GTM

Рисунок 6

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

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

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

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

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

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

Добавление отслеживания события с помощью AJAX

Рисунок 7

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

Настройка триггера для работы с пользовательским событием

Рисунок 8

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

Конфигурация тега «Universal Analytics»

Рисунок 9

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

image

Если у вас есть грамотные разработчики и формы на вашем сайте можно отследить с помощью стандартного триггера “Отправка формы” в Google Tag Manager или встроить событие в обработчик — я вам искренне завидую. Сегодня мы рассматриваем другой случай.

Последнее время всё реже можно встретить ситуацию, когда после отправки формы пользователь перенаправляется на новую страницу. Все манипуляции обычно происходят по тому же адресу. То есть для отправки данных используется технология AJAX.

Неточные и малоэффективные способы отслеживания статистики будут существовать всегда.

Как «косячили» раньше:

Раньше отправку форм отслеживали по индивидуальному адресу страницы. Если его не было — просили разработчиков изменить саму логику работы формы.

Как «косячат» сейчас:

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

Плюсы таких подходов:

• Простота в установке цели. Если вы не знаете, как это делать, то сможете достаточно быстро в этом разобраться.
• Большее количество заявок *sarcasm*.

• Выполненные цели не совпадают с количеством заявок. Погрешность при этом может в среднем составлять 20-30%.
• Данные по результативности источников трафика также не будут соответствовать действительности.

К тому же, трудности возникают, когда нам необходимо внести правки в код сайта, чтобы ПРАВИЛЬНО отправить событие об отправке формы:

• Разработчики клиента не знают, что/как/где нужно исправить. Эта проблема встречается довольно часто.
• Сайт находится на сторонней платформе (nethouse, insales, wix, LPgenerator и др.). Они не всегда дают возможность оперативно изменять код.

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

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

1. Необходимо сгенерировать код GTM и установить его на сайт в соответствии с требованиями Google Tag Manager: tagmanager.google.com

2. На вкладке с триггерами добавить новый — “Модель DOM Готова”.

image

3. На вкладке “Теги” создать новый с типом “Пользовательский HTML”, а в качестве триггера выбрать созданный на предыдущем шаге.

image

image

Он поможет отслеживать отправку форм. Подробнее о коде можете прочитать здесь: vk.cc/6Au3Jj

4. Затем создать переменную для данных об успешной отправке.

Чтобы узнать, какую переменную тянуть, необходимо:
— Заполнить и отправить форму

image

— Открыть консоль браузера и отправить запрос к уровню данных (скорее всего, вида «dataLayer» без кавычек). После этого появится несколько объектов:

image

В этом конкретном случае есть два объекта «ajaxSuccessData». В URL первого — “говорящая ссылка” об отправке сообщения. Второй показывает на странице блок с сообщением “Заявка отправлена”.

У вас не появились похожие данные? Вполне возможно, в вашем коде GTM просто используется другое название уровня данных.

Проверить название уровня можно в коде GTM:

image

5. Создать переменную: GTM → Переменные → Создать

На предыдущем скриншоте интересен только статус «success»:true в переменной уровня данных responseText, которая в свою очередь находится внутри контейнера ajaxSuccessData.

image

Как в этом случае проверить наличие статуса «success»:true? В поле имя переменной уровня данной нужно ввести через точку их названия:

Имя самой переменной может быть любым.

image

6. Создать триггер.

— Название триггера должно быть говорящим.
— Тип триггера «Пользовательское событие»
— Имя события — “ajaxSuccess”:

image

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

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

image

7. После того как триггер создан, можно создавать тэги отправки событий для Метрики и Analytics.

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

image

image

Сайты разные, но последовательность действий, описанная выше, для всех одна.

Отслеживайте цели правильно, и пусть ваши продажи постигнут дзен!

Автор: Павел Мрыкин, руководитель отдела автоматизации и аналитики в digital-агентстве

0 0 голоса
Рейтинг статьи

когда выйдет сериал ментовские войны 12

выход пираты карибского моря 6

сериал ментовские войны 12 сезон все серии

Ссылка на основную публикацию