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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• CSS-селекторы в GTM. Часть I
• Селекторы в jQuery. Часть II

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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