Отслеживание выбранного элемента из выпадающего списка в GTM

У вас на сайте есть форма, в которой присутствует выпадающий список? И вам хотелось бы фиксировать, что посетители выбирают в раскрывающемся поле при ее отправке? Давайте разберем пример отслеживания с помощью GTM и переменной уровня данных.

В качестве примера, по традиции, буду разбирать это на graphanalytics.ru. Я добавил дополнительное поле раскрывающегося списка (тег <select>), в котором пользователю при заказе бесплатного аудита необходимо указать текущий бюджет на рекламу.

Именно эти данные мы и хотим отслеживать и передавать в Google Analytics в момент отправки формы.

Есть различные варианты решения этой задачи. Разработчик и эксперт по продуктам Google (Google Analytics и Google Tag Manager) Симо Ахава (Simo Ahava) в своем блоге предлагает несколько решений:

• с помощью пользовательского тега HTML (на английском языке);
• с помощью пользовательской переменной типа «Собственный код JavaScript» (на английском языке);

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

Для этого сделаем три простых шага:

1. Перейдем на сайт;
2. Откроем консоль разработчика (Клавиша F12, вкладка Console в Google Chrome);
3. Сделаем тестовую заявку на сайте.

После этого в консоли введем dataLayer и нажмем Enter. Появится список все прослушанных событий (от 0 до 3).

Как вы уже знаете, Google Tag Manager по умолчанию передает на уровень данных набор значений gtm.js (когда GTM готов к работе), gtm.dom (когда готова модель DOM) и gtm.load (когда окно полностью загружено). В dataLayer – это элементы 0-2. Последний 3 – это событие gtm.formSubmit – отправка нашей формы со всеми значениями. Его мы и будем исследовать.

Примечание: чтобы в консоли в dataLayer у вас появилось событие отправки формы (gtm.formSubmit), вы изначально должны настроить в GTM такое условие активации.

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

Нас интересует переменная gtm.element, поэтому нажмем еще раз на треугольник и провалимся еще на один уровень ниже.

В переменной представлены все поля нашей формы: Имя, Email, Телефон и т.д. 5 в списке идет select, наш выпадающий список. Проделаем ту же самую процедуру в третий раз. Раскрываем внутрь элемент с помощью треугольника:

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

Теперь нам необходимо сформировать нашу переменную уровня данных. Вспоминаем: мы раскрывали элемент с индексом 5, а его значение хранится в свойстве объекта value.

В Google Tag Manager можно использовать точечную нотацию для доступа к переменным ключам dataLayer, которые имеют точку в имени (например, gtm.element) или для доступа к свойствам объектов DOM (например, gtm.element.dataset.name). В моем примере переменная уровня данных будет выглядит так: gtm.element.5.value.

Возвращаемся в GTM и производим соответствующие настройки. Создаем пользовательскую переменную типа Переменная уровня данных с именем переменной gtm.element.5.value

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

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

Мы видим, что наша переменная заполнена правильно. Вы также можете проверить это в отчете Google Analytics «В режиме реального времени»:

Все отслеживаемые события доступны в отчете Поведение — События — Лучшие события.

Понравилась статья? Поставьте оценку ?