[Видео] Извлечение данных из dataLayer

В предыдущем материале вы узнали о способах формирования уровня данных. В этой статье остановимся на вопросе извлечения данных из dataLayer разными вариантами с помощью Google Tag Manager.

На моем YouTube-канале размещено видео на эту тему, которое является частью нового онлайн-курса по Google Tag Manager:

Ниже представлена текстовая часть и дополнительные комментарии. Все, что будет описано далее, вы можете попробовать на своем проекте, создав в контейнере GTM теги типа Пользовательский HTML с соответствующим кодом.

Рекомендация к прочтению:

• Что такое уровень данных (dataLayer)?

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

Структурный уровень №1

Код:

На скриншоте выше вы можете видеть пример структурного уровня №1, когда формируется уровень данных, передается событие (например, purchase1), и вместе с ним передается ряд параметров (id, affiliation, revenue, tax, shipping, coupon) с определенными значениями. Такая конструкция свидетельствует о простой вложенности, когда на уровне события сразу же определяются параметры и их значения, к которым вы можете обратиться или которые можете извлечь.

Например, если вы хотите извлечь значение идентификатора заказа T12345, то вам необходимо создать пользовательскую переменную типа Переменная уровня данных с именем id:

И тогда в режиме предварительного просмотра Google Tag Manager это значение будет отображаться в переменной:

Аналогично и с другими параметрами уровня данных.

Структурный уровень №2

Но вы можете встретить и другую структуру вложенности. Например:

На скриншоте выше пример структурного уровня №2, когда формируется уровень данных, передается событие (например, purchase2), а внутри него присутствует дополнительная вложенность с actionField, где с помощью фигурных скобок { } задается объект и уже в нем помещаются нужные параметры и их значения.

Этот уровень вложенности отличается от предыдущего. Поэтому когда потребуется извлечь значение идентификатора заказа T12345, то простого имени id в переменной уровня данных (см. выше) уже не будет достаточно. Вместо этого вы должны использовать другое имя переменной уровня данных - actionField.id:

Такая запись с точкой называется точечной записью или точечной нотацией (dot notation).

Когда вы работаете в JavaScript с массивами, вы можете хранить в них различные элементы и объекты. Например, у вас есть такой массив iMassiv, состоящий из 5 элементов с различными типами данных:

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

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

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

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

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

Похожий массив объектов используется в электронной торговле и динамическом ремаркетинге, а также примерах в этой статье. И для обращения к свойствам объекта используется запись через точку:

Это и есть точечная запись (точечная нотация). Поскольку у нас единственный уровень вложенности, то используется одна точка.

Примечание: в моем блоге опубликована отдельная статья, посвященная переменным с точечной нотацией.

Если вы все сделаете так же, то в режиме отладки GTM значение этой переменной будет отображаться как надо:

Аналогичным образом с помощью точечной нотации извлекаются значения из других параметров.

Структурный уровень №3

Существует более сложный вариант, который будет встречаться вам в электронной торговле.

На скриншоте выше пример структурного уровня №3, когда формируется уровень данных, передается событие (например, purchase3), а внутри него присутствует дополнительная вложенность с actionField и products, в котором передаются данные по каждому товару отдельно.

Этот уровень вложенности тоже отличается от предыдущего. Поэтому когда потребуется извлечь значение идентификатор товара 6789 для Triblend Android T-Shirt, то вы должны не просто задать точечную нотацию, но еще и указать элемент массива (его порядковый номер), поскольку в products товаров с id два.

Самый простой способ это сделать - использовать специальное расширение для Google Chrome - dataLayer Checker. Активировав его, вы увидите нужное событие со всеми свойствами объекта в таком виде:

И поскольку для нашего примера я хотел извлечь идентификатор товара 6789 для Triblend Android T-Shirt, то поднеся курсор мыши к этой строке, нужно просто нажать на кнопку Copy key:

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

Помимо actionField.id появилась еще одна вложенность, разделенная точкой, и порядковый номер элемента, к которому мы обращаемся. Проверив извлечение данных с помощью режима предварительного просмотра, вы убедитесь, что расширение dataLayer Checker сформировало нам корректное значение переменной с точечной нотацией:

Резюме

Как видите, структурных уровней в dataLayer может быть много - и два, и три, и четыре, и пять, и т.д. Все зависит от проекта, уровня задачи и количества объектов, которые требуется передать. Если структурный уровень простой, то для извлечения данных из уровня данных достаточно использование название параметра. Если в нем есть дополнительная вложенность - тогда используется точечная нотация. Если есть вложенность с несколькими одинаковыми объектами, тогда используется точечная запись с указанием порядкового номера объекта.