[Видео] Переменные с точечной нотацией в GTM
Обратиться к свойствам объекта в JavaScript можно несколькими способами: с помощью точечной нотации (dot notation) или скобочной нотации (bracket notation). Но зачем это знать веб-аналитику? Постараемся разобраться.
Работая с GTM, вы можете столкнуться с такими задачами:
- извлечь данные какого-либо объекта из уже сформированного уровня данных (dataLayer), например, электронной торговли или динамического ремаркетинга;
- получить данные из полей форм в момент отправки заявки.
Зачем это нужно? Например, чтобы передавать эти данные в Google Analytics в качестве пользовательских метрик для дальнейшего анализа и сегментации пользователей.
Как это сделать? Чтобы вы лучше понимали, о чем пойдет речь в этой статье, рекомендую прочитать материал «Отслеживание выбранного элемента из выпадающего списка в GTM».
Причем же здесь переменные и точечная нотация? Постараюсь подробно пояснить на следующих примерах. Когда мы работаем в JavaScript с массивами, мы можем хранить в них различные элементы и объекты.
Например, у нас есть такой массив, состоящий из 5 элементов с различными типами данных:
И мы хотим получить из iMassiv второй элемент со значением “GTM”. Для этого можно указать его номер в квадратных скобках:
1 |
iMassiv[1] // "GTM" |
Элементы массива нумеруются, начиная с 0. Поэтому GTM – 1 элемент в массиве, 0 – Google Analytics, 2 - 15, 3 – 23.03, 4 – true.
Давайте усложним пример. Вместо элементов будем работать с объектами. Они используются для хранения коллекций различных значений и более сложных сущностей. Объект может быть создан с помощью фигурных скобок { } с необязательным списком свойств. Свойство - это пара «ключ: значение», где:
- ключ – это строка (также называемая «именем свойства»),
- значение – что угодно.
Подробнее об объектах в JavaScript можно почитать здесь, о массивах по этой ссылке.
Немного изменив массив, получим:
Напоминает конструкцию уровня данных (dataLayer)? Что-то похожее вы наверняка видели при настройке электронной торговли и динамического ремаркетинга. Вот как выглядит dataLayer для интернет-магазина с типом с объектами передаваемыми в момент показов товаров Показы (Impressions).
Такая же вложенная структура, только пар ключ-значение гораздо больше. Для обращения к свойствам объекта используется запись через точку:
1 |
youMassiv.GTM // "Сервис" |
Это и есть точечная запись (Точечная нотация, Dot notation). Поскольку у меня единственный уровень вложенности, то используется одна точка. Но если нам нужно добавить еще одно свойство со значением внутри объекта, а потом вывести значение этого свойства, то будет использоваться уже две точки:
1 |
myMassiv.GTM.Сервис // "Google" |
В примере выше я к GTM добавил еще один объект с новым свойством и значением в фигурных скобках { }.
Теперь задача приобретает совсем понятный вид. Как извлекать такие данные из dataLayer, который уже предопределен и хранит в себе определенные пары с ключом и значением?
Варианта 2:
1. в консоли разработчика написать команду dataLayer, найти необходимое событие из списка сработанных, спуститься на нужный уровень и записать итоговое значение конкретной переменной;
2. можно воспользоваться расширением Datalayer Checker для браузера Google Chrome.
Это самый простой способ отладки и проверки реализаций dataLayer без использования консоли разработчика. Datalayer Checker быстро покажет все необходимые свойства объектов в нужном формате (FLAT & JSON):
Останется только скопировать и вставить ключ в Google Tag Manager для пользовательской переменной типа Переменная уровня данных (Версия 2).
В примере выше я хочу, чтобы в переменной выводилось наименование просматриваемого товара.
В 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.
Возвращаемся к примеру. Результатом настроенной переменной будет правильно определенное значение:
Аналогично можно извлечь значения всех других переменных (бренда, цены, категории, ID заказа и т.д.).
Отлично! Мы сделали это. Но бывают задачи более сложного уровня. Например, как отслеживание выбранного элемента из выпадающего списка в GTM (статья, что рекомендовал прочитать в самом начале). Эта информация существует в dataLayer как выбранное значение из этого списка, и для его извлечения вам нужно сначала его найти, записать путь и после передать в Google Tag Manager в качестве пользовательской переменной. А как быть с теми полями и данными, которые формируются и отправляются в момент совершения какого-либо события? Например, пользователь заполнил заявку на вашем сайте и отправил форму. dataLayer здесь не формируется, а в роли элементов являются те самые выпадающие списки, input, textarea и другие элементы форм. А отслеживать их очень хочется. Поиск вложенности и пути до переменной отнимает много времени.
На помощь приходит другое расширение браузера для Google Chrome, которое называется GTM dataLayer Sifter. Установить его можно по ссылке.
В правом верхнем углу окна браузера появится иконка с приложением. Что умеет делать это расширение?
Плагин предназначен для поиска и определения точечной нотации от элемента конкретного события по отношению к другому элементу на странице, а также извлечения значения элемента DOM (например, для поля формы) на уровне данных, которое затем можно использовать в GTM в качестве переменной.
Давайте попробуем извлечь значение поля Имя в форме на сайте graphanalytics.ru в момент ее отправки. Нам необходимо передать значение, которое заполнил пользователь, в Google Analytics.
В моем блоге есть статья на эту тему. Там это было реализовано оптимальным способом через пользовательскую переменную типа Собственный код JavaScript. В этом примере будем использовать готовое решение GTM dataLayer Sifter.
Я для этого зайду на сайт, открою форму и заполню поле Имя. Затем необходимо открыть консоль разработчика (клавиша F12 в Google Chrome). Далее заполняю все поля формы и делаю тестовую заявку (1), чтобы сработало наше событие gtm.formSubmit (триггер «Отправка формы»).
После этого я перехожу на вкладку GTM dataLayer Sifter (2) и выделяю то событие, относительно которого хочу получить значение поля Имя. В моем случае – это gtm.formSubmit (3).
После этого я могу прослушать необходимое мне поле и получить значение переменной с точечной нотацией. Для этого я перехожу на вкладку Elements и исследую элемент Имя (4). Выделяю его (5) и справа под выделенным событием в GTM dataLayer Sifter в графе Results я получаю 3 заполненных строчки:
- Path to element (Путь к элементу);
- Path to Value (Путь к значению);
- Path to Text (Путь к тексту элемента).
Копируем то, что в строчке Path to Value. Далее переходим в Google Tag Manager и создаем переменную типа Переменная уровня данных. Вставляем туда полученное значение. Сохраняем.
Теперь идем в наш тег и в качестве дополнительного поля в ярлыке события (пример!) я выберу эту переменную.
Вы можете передавать значения полей в специальных параметрах и показателях. Однако не забывайте: загрузка данных, которая может идентифицировать личность пользователя, запрещена политикой Google.
Сохраняем тег. Для проверки корректности передачи данных можно воспользоваться режимом предварительного просмотра GTM.
Для наглядности я записал видео работы расширения GTM dataLayer Sifter: