Отслеживание значений полей в GTM (+видео)

Сентябрь 08, 2019

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

Что это значит? Предположим, у нас на сайте есть форма, в которой N-ое количество полей:

Отслеживание значений полей в GTM

Пример формы и полей на сайте (graphanalytics.ru)

И мы хотим отслеживать статистику в Google Analytics и Яндекс.Метрике не только по количеству отправленных форм (достижению цели), но еще по тому, какие данные передавал пользователь в этой форме. Например, телефон и e-mail с привязкой к Источник / Канал:

Отслеживание значений полей в GTM

Пример пользовательского отчета в Analytics

Передавать в Google Analytics можно разными способами. Рассмотрим два наиболее распространенных:

  1. передать в переменной события Google Analytics (например, в ярлыке события);
  2. передавать в качестве пользовательских параметров.

Разберем каждый из них. В качестве примера я буду показывать на двух полях формы: Телефон и Email. Но вы можете использовать любые другие.

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

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

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

Если вы нарушите указанные выше правила, ваш аккаунт Google Analytics может быть закрыт, а все данные утрачены.

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

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

Для этого создадим в Google Tag Manager пользовательскую переменную типа Собственный код JavaScript с таким кодом:

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

В GTM это выглядит так:

Отслеживание значений полей в GTM

Пример собственной переменной JS

Имя переменной vashePole может быть любым. Лично я называю их по имени самого поля в форме на сайте.

Как определить CSS-селектор для поля?

Для этого идем в браузер и открываем консоль разработчика (клавиша F12 для Google Chrome и Mozilla Firefox). С помощью мышки выделяем то поле, которое хотим отслеживать. Нажимаем на него правой кнопкой мыши и выбираем Копировать – CSS-селектор (пример для Firefox).

Отслеживание значений полей в GTM

Консоль разработчика — Исследование элемента — Копирование CSS-селектора (Firefox)

Я получил такой CSS-селектор для поля Телефон: #popup-audit > div:nth-child(1) > form:nth-child(3) > div:nth-child(5) > input:nth-child(1)

Аналогично скопирую CSS-селектор для поля Email: #popup-audit > div:nth-child(1) > form:nth-child(3) > div:nth-child(4) > input:nth-child(1)

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

Теперь идем в GTM и создаем две переменные типа Собственный код JavaScript для наших полей. Получим:

Отслеживание значений полей в GTM

Примеры переменных Телефон и Email с CSS-селекторами

Сохраняем две переменные. Теперь настраиваем триггер на отправку формы.

Отслеживание значений полей в GTM

Триггер «Отправка формы»

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

Теперь разберем передачу данных каждого способа.

Передача данных по полям в Ярлыке событий

Для этого создаем тег Universal Analytics с типом Событие. Задаем настройки:

  • Категория – произвольное (у меня Форма);
  • Действие – произвольное (у меня Отправка);
  • Ярлык – здесь выбираем нашу переменную (см. выше)
  • Триггер – наше условие активации (см. выше)
Отслеживание значений полей в GTM

Тег Universal Analytics, тип Событие

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

Отслеживание значений полей в GTM

Отчет «В режиме реального времени»

Проверить корректность передачи данных можно еще с помощью двух способов:

1. В консоли разработчика ввести конструкцию $(‘CSS-селектор’).val(),

где CSS-селектор – значение вашего селектора из поля.

Отслеживание значений полей в GTM

Проверка в консоли

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

2. В режиме предварительного просмотра GTM

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

Отслеживание значений полей в GTM

Проверка в режиме отладки GTM

Если те, которые вы заполняли, значит все настроено корректно.

Однако мы создали тег только для передачи одной переменной (number, телефон). Чтобы передавать информацию по второму полю (email) в Google Analytics, можно создать еще один такой же тег, а можно в тот же ярлык добавить еще одну переменную, разделив их между собой каким-нибудь символов. Например, вертикальной чертой |

Тогда финальная конструкция тега будет выглядеть так:

Отслеживание значений полей в GTM

Передача данных в ярлыке события двух переменных

Теперь при отправке формы в Google Analytics в ярлыке событий будут поступать данные по двум переменным, разделенных между собой |

Отслеживание значений полей в GTM

Отчет «В режиме реального времени»

Очередность отображения будет зависеть от того, как указали переменные в теге. {{number}}|{{email}} или {{email}}||{{number}}.

Посмотреть статистику по всем событиям можно в отчете Поведение – События – Лучшие события

Отслеживание значений полей в GTM

Поведение — События — Лучшие события

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

Для этого необходимо создать то количество показателей, которое вам необходимо. Переходим в Администратор – Ресурс – Пользовательские определения – Специальные параметры. Создаем параметры с областью действия Сеанс. Запоминаем индексы (в моем примере это 4 и 5).

Отслеживание значений полей в GTM

Создаем специальные параметры, запоминаем их индексы

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

Отслеживание значений полей в GTM

Настройка тега, Индекс и Значение параметра

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

Отслеживание значений полей в GTM

Проверка в режиме отладки GTM

Через некоторое время в Google Analytics начнут поступать данные. Вы можете построить специальный отчет, в котором будут только необходимы вам метрики. Например, с привязкой к Client ID:

Отслеживание значений полей в GTM

Пример специального отчета с Client ID и нашими пользовательскими параметрами Телефон и Email

А чтобы вы смогли повторить все то, что я описал в статье, прикладываю видео.

Понравилась статья и видео? Ставьте оценку 👉 и подписывайтесь на YouTube канал!

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

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