[Видео] Переменные с точечной нотацией в GTM

04 декабря, 2019

Обратиться к свойствам объекта в JavaScript можно несколькими способами: с помощью точечной нотации (dot notation) или скобочной нотации (bracket notation). Но зачем это знать веб-аналитику? Постараемся разобраться.

Работая с GTM, вы можете столкнуться с такими задачами:

  1. извлечь данные какого-либо объекта из уже сформированного уровня данных (dataLayer), например, электронной торговли или динамического ремаркетинга;
  2. получить данные из полей форм в момент отправки заявки.

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

Как это сделать? Чтобы вы лучше понимали, о чем пойдет речь в этой статье, рекомендую прочитать материал «Отслеживание выбранного элемента из выпадающего списка в GTM».

Причем же здесь переменные и точечная нотация? Постараюсь подробно пояснить на следующих примерах. Когда мы работаем в JavaScript с массивами, мы можем хранить в них различные элементы и объекты.

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

Переменные с точечной нотацией в GTM

Массив элементов

И мы хотим получить из iMassiv второй элемент со значением “GTM”. Для этого можно указать его номер в квадратных скобках:

Переменные с точечной нотацией в GTM

Полученное значение "GTM"

Элементы массива нумеруются, начиная с 0. Поэтому GTM – 1 элемент в массиве, 0 – Google Analytics, 2 - 15, 3 – 23.03, 4 – true.

Давайте усложним пример. Вместо элементов будем работать с объектами. Они используются для хранения коллекций различных значений и более сложных сущностей. Объект может быть создан с помощью фигурных скобок { } с необязательным списком свойств. Свойство - это пара «ключ: значение», где:

  • ключ – это строка (также называемая «именем свойства»),
  • значение – что угодно.

Подробнее об объектах в JavaScript можно почитать здесь, о массивах по этой ссылке.

Немного изменив массив, получим:

Переменные с точечной нотацией в GTM

Массив объектов

Напоминает конструкцию уровня данных (dataLayer)? Что-то похожее вы наверняка видели при настройке электронной торговли и динамического ремаркетинга. Вот как выглядит dataLayer для интернет-магазина с типом с объектами передаваемыми в момент показов товаров Показы (Impressions).

Переменные с точечной нотацией в GTM

Событие gtm-ee-event электронной торговли

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

Переменные с точечной нотацией в GTM

Полученный результат "Сервис"

Это и есть точечная запись (Точечная нотация, Dot notation). Поскольку у меня единственный уровень вложенности, то используется одна точка. Но если нам нужно добавить еще одно свойство со значением внутри объекта, а потом вывести значение этого свойства, то будет использоваться уже две точки:

Переменные с точечной нотацией в GTM

Точечная нотация

В примере выше я к GTM добавил еще один объект с новым свойством и значением в фигурных скобках { }.

Теперь задача приобретает совсем понятный вид. Как извлекать такие данные из dataLayer, который уже предопределен и хранит в себе определенные пары с ключом и значением?

Варианта 2:

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

Переменные с точечной нотацией в GTM

В консоли разработчика искать значение вложенного элемента

2. можно воспользоваться расширением Datalayer Checker для браузера Google Chrome.

Это самый простой способ отладки и проверки реализаций dataLayer без использования консоли разработчика. Datalayer Checker быстро покажет все необходимые свойства объектов в нужном формате (FLAT & JSON):

Переменные с точечной нотацией в GTM

Готовые переменные с точечной нотацией

Останется только скопировать и вставить ключ в Google Tag Manager для пользовательской переменной типа Переменная уровня данных (Версия 2).

Переменные с точечной нотацией в GTM

Пример переменной типа "Переменная уровня данных"

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

В Google Tag Manager можно определить интерпретацию точек в имени переменной. Делается это с помощью версии уровня данных:

Версия 1. Разрешить точки в названиях ключей. Например, в выражении dataLayer.push('a.b.c': 'value') название ключа будет интерпретировано как a.b.c (т. е. {'a.b.c': 'value'}).

Версия 2. Интерпретировать значения с точками как иерархические значения. В этом случае выражение dataLayer.push({'a.b.c': 'value'}) будет интерпретировано как трехуровневая иерархия: {a: {b: {c: 'value'}}}.

Поскольку в документации Google (и Яндекса тоже) речь идет о вложенной иерархии, то при настройке переменных выбирают именно версию 2.

Переменные с точечной нотацией в GTM

Уровень данных для Яндекс.Метрики и Google Analytics (e-commerce)

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

Переменные с точечной нотацией в GTM

Результат переменной

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

Отлично! Мы сделали это. Но бывают задачи более сложного уровня. Например, как отслеживание выбранного элемента из выпадающего списка в GTM (статья, что рекомендовал прочитать в самом начале). Эта информация существует в dataLayer как выбранное значение из этого списка, и для его извлечения вам нужно сначала его найти, записать путь и после передать в Google Tag Manager в качестве пользовательской переменной. А как быть с теми полями и данными, которые формируются и отправляются в момент совершения какого-либо события? Например, пользователь заполнил заявку на вашем сайте и отправил форму. dataLayer здесь не формируется, а в роли элементов являются те самые выпадающие списки, input, textarea и другие элементы форм. А отслеживать их очень хочется. Поиск вложенности и пути до переменной отнимает много времени.

На помощь приходит другое расширение браузера для Google Chrome, которое называется GTM dataLayer Sifter. Установить его можно по ссылке.

Переменные с точечной нотацией в GTM

GTM dataLayer Sifter

В правом верхнем углу окна браузера появится иконка с приложением. Что умеет делать это расширение?

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

Давайте попробуем извлечь значение поля Имя в форме на сайте graphanalytics.ru в момент ее отправки. Нам необходимо передать значение, которое заполнил пользователь, в Google Analytics.

Переменные с точечной нотацией в GTM

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

В моем блоге есть статья на эту тему. Там это было реализовано оптимальным способом через пользовательскую переменную типа Собственный код JavaScript. В этом примере будем использовать готовое решение GTM dataLayer Sifter.

Я для этого зайду на сайт, открою форму и заполню поле Имя. Затем необходимо открыть консоль разработчика (клавиша F12 в Google Chrome). Далее заполняю все поля формы и делаю тестовую заявку (1), чтобы сработало наше событие gtm.formSubmit (триггер «Отправка формы»).

После этого я перехожу на вкладку GTM dataLayer Sifter (2) и выделяю то событие, относительно которого хочу получить значение поля Имя. В моем случае – это gtm.formSubmit (3).

Переменные с точечной нотацией в GTM

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

После этого я могу прослушать необходимое мне поле и получить значение переменной с точечной нотацией. Для этого я перехожу на вкладку Elements и исследую элемент Имя (4). Выделяю его (5) и справа под выделенным событием в GTM dataLayer Sifter в графе Results я получаю 3 заполненных строчки:

  • Path to element (Путь к элементу);
  • Path to Value (Путь к значению);
  • Path to Text (Путь к тексту элемента).
Переменные с точечной нотацией в GTM

GTM dataLayer Sifter - Results

Копируем то, что в строчке Path to Value. Далее переходим в Google Tag Manager и создаем переменную типа Переменная уровня данных. Вставляем туда полученное значение. Сохраняем.

Переменные с точечной нотацией в GTM

Наша переменная уровня данных

Теперь идем в наш тег и в качестве дополнительного поля в ярлыке события (пример!) я выберу эту переменную.

Переменные с точечной нотацией в GTM

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

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

Сохраняем тег. Для проверки корректности передачи данных можно воспользоваться режимом предварительного просмотра GTM.

Для наглядности я записал видео работы расширения GTM dataLayer Sifter:

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

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