Google Tag Manager

Уровень данных – dataLayer в Google Tag Manager

Материал обновлен:
15:09:2020
Комментарии:
29

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

Что такое уровень данных или dataLayer?

Итак, начнем с главного – dataLayer это название переменной JavaScript, которая служит для передачи данных, которые Google Tag Manager не может получить сам (если мы говорим об использовании со стороны пользователя, но через уровень данных идет весь обмен информацией сайта и контейнера), но они необходимы ему для работы, такая переменная называется уровнем данных.

Уровень данных — это ключевое понятие, именно через него осуществляется взаимодействие сайта и контейнера Google Tag Manager. dataLayer это всего лишь имя переменной, через которую осуществляется передача информации. По этой причине при обсуждении вопросов связанных с Google Tag Manager, при необходимости, можно использовать формулировки уровень данных и dataLayer. В подобных ситуациях они являются синонимами.

Вместе с тем на практике вместо dataLayer можно использовать любое другое имя переменной, в то время как ее суть “уровень данных” всегда будет оставаться неизменным. Я крайне редко встречал настройки Google Tag Manager, в которых, имя уровня данных по умолчанию dataLayer было изменено.

Изменение имени уровня данных

Каким образом можно изменить имя переменной, обозначающей уровень данных? Это выполняется при инициализации контейнера Google Tag Manager на страницах сайта, посмотрим на код контейнера:

Обратите внимание на вторую снизу строчку кода. Видите в ней фрагмент dataLayer? Это то место, где необходимо задать имя переменной уровня данных Google Tag Manager, если вы хотите его изменить.

Посмотрим на данные в уровне данных если его имя dataLayer:

Уровень данных Google Tag Manager - имя переменной по умолчанию dataLayer

Уровень данных Google Tag Manager – имя переменной по умолчанию dataLayer

Теперь изменим имя переменной уровня данных:

Посмотрим, что получилось:

Уровень данных - изменение имени переменной

Уровень данных – изменение имени переменной

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

dataLayer с технической стороны

Мы уже знаем, как правильно называть dataLayer, научились его переименовывать, но что это такое с технической точки зрения? Нам важно это знать, чтобы уметь грамотно пользоваться и манипулировать им. Уровень данных, это обычный объект JavaScript.

В комментарии к этой публикации вы можете найти замечание, что уровень данных — это не объект, а массив. Проверив это утверждение мы получаем подтверждение того, что это действительно объект, при этом у него его есть методы, которые мы используем для взаимодействия с ним. Возможно, здесь не все верно с технической точки зрения и специалисты мне возразят, я готов исправить формулировки, если такое возражение поступит.

Зачем может понадобится такая информация? Например, для передачи данных из уровня данных в некоторую JavaScript функцию для обработки данных.

Передача информации в уровень данных (dataLayer)

Если у нас уровень данных (кто еще не привык к терминологии, то dataLayer) это переменная JavaScript, то становится очевидным значение конструкции:

Она служит для добавления значения в массив, не более. Обратимся к официальной документации:

Метод push() добавляет один или более элементов в конец массива и возвращает новую длину массива (источник).

Примером использования конструкции dataLayer.push() является передача пользовательского события в Google Tag Manager (события, на которое мы явно указываем, например, по результатам отправки AJAX формы, которую нельзя перехватить иным способом).

Пример фиксации пользовательского события

Пример фиксации пользовательского события

Для тех, кто работает с Google Tag Manager периодически возникает вопрос о передачи данных из системы управления сайтом в Google Analytics или Яндекс Метрику. Ярким примером служит фиксация транзакции. Научимся правильно описывать и определять уровень данных. На практике мы имеем два варианта передачи данных в уровень данных (dataLayer):

• до кода контейнера
• после кода контейнера

В чем разница спросите вы? А вот в чем. Если вы описываете данные ДО кода Google Tag Manager, то уровень данных (dataLayer) еще не создан самим Google Tag Manager, если описание происходит ПОСЛЕ кода Google Tag Manager, то уровень данных уже есть и нужно данные в нем дополнить теми, которые вам необходимы, а не создавать новый объект.

Описывать уровень данных можно двумя способами в зависимости от ситуации. Посмотрим на практические примеры.

Описываем уровень данных ДО кода Google Tag Manager:

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

Данные переданные через dataLayer

Данные переданные через dataLayer

Это то, что нам нужно. Пробуем второй вариант:

Смотрим в отладчике:

Некорректная передача данных

Некорректная передача данных

Необходимых нам данных нет? Ищем причину и находим ее в консоли:

Не определен dataLayer

Не определен dataLayer

Мы использовали push() для ранее не определенной переменной. Если выполнить подобный тест для описания уровня данных ПОСЛЕ кода Google Tag Manager, то вы увидите, что конструкция push() будет работать корректно, в то время как первый вариант не даст желаемого результата.

Таким образом для определения уровня данных ДО кода Google Tag Manager необходимо использовать конструкцию вида:

Если мы используем уровень данных ПОСЛЕ кода Google Tag Manager, то применяем конструкцию вида:

Универсальный метод использования dataLayer.push()

Использование двух вариантов для решения одной задачи не лучшее решение, по этой причине используют так называемое «универсальное решение». Заключается оно в том, что сначала выполняется проверка – существует ли уровень данных и если да, то используем его, а если нет, то создаем новый, после чего можно смело использовать конструкцию dataLayer.push()

Первая строчка кода выполняет проверку: существует ли переменная JavaScript с именем dataLayer. Если она есть, то используем ее. Если нет, то создаем новый, пустой, уровень данных.

Вторая строка осуществляет непосредственно передачу данных в dataLayer сведений через метод push().

Описание данных в dataLayer

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

Вложенные структуры данных в dataLayer

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

Описание подобных данных выполняется в формате JSON, я советую ознакомиться с ним не только для работы в Google Tag Manager, но и по той причине, что этот формат данных широко применяется при взаимодействии с API различных сервисов. Познакомиться с ним можно на следующих ресурсах:

Мы научились передавать и описывать данные в уровне данных (dataLayer) Google Tag Manager, но что делать с ними после того, как они попали в контейнер? Как правило их извлекают в переменные или настраивают триггер на пользовательское событие.

Переменные на основе dataLayer

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

Конфигурация переменной уровня данных

Конфигурация переменной уровня данных

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

Извлекаем данные по товару, который идет первым среди описанных:

Извлечение данных из вложенных структур

Извлечение данных из вложенных структур

Вариант 2 использует точку в названии ключа, как указание спуститься на уровень ниже и искать следующий ключ.

Вариант 1 отличается тем, что точка интерпретируется как обычный символ в имени ключа.

Пользовательское событие через dataLayer.push()

Как я обозначил ранее пользовательские события в Google Tag Manager применяются в том случае, когда он сам не может перехватить действие пользователя и мы явно указываем о том, что оно произошло. Помимо этого лучшей практикой настройки Google Tag Manager является разметка сайта уровнем данных и последующая конфигурация контейнера. Как передать пользовательское событие? Необходимо использовать ключ event :

Этот код должен сработать в тот момент, когда произошло желаемое действие на сайте. Например, клик по кнопке, отправка формы, просмотр ролика и т.п. В самом контейнере на событие, переданное через dataLayer, необходимо создать триггер со следующими настройками:

Триггер на пользовательское событие

Триггер на пользовательское событие

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

Пример кода на странице

Пример кода на странице

Пример комбинации из пользовательского события и переменных на основе dataLayer

Одним из способов оптимизации контейнера Google Tag Manager является передача через dataLayer такой структуры, в которой описано пользовательское событие и дополнительные параметры события, например:

Этот код размещается на сайте и срабатывает в тот момент, когда пользователь выполняет необходимое действие. Данные передаются в Google Tag Manager, далее необходимо создать:

  • триггер на пользовательское событие
  • переменные извлекающие данные из dataLayer

То, как создать триггер и переменные описано выше, а пример настроенного тега по переданной структуре данных может быть следующим:

Пример конфигурации тега

Пример конфигурации тега

Посмотрим через отладчик на то, что в уровне данных:

Структура данных в отладчике

Структура данных в отладчике

И то, что передано в теге:

Активация тега по пользовательскому событию

Активация тега по пользовательскому событию

Как узнать, что передано и содержится в dataLayer

Можно использовать несколько способов:

  • через отладчик Google Tag Manager
  • через консоль браузера
  • через расширения браузера

Чтобы посмотреть, что содержится в уровне данных через отладчик необходимо слева выбрать событие, затем вкладку dataLayer. Слева отображается «порция» информации, переданная в момент фиксации события, справа все, что содержится на текущий момент в уровне данных:

Структура данных в отладчике

Структура данных в отладчике

Если выбрать SUMMARY в отладчике и затем вкладку dataLayer, то получим сведения о том, что было передано в уровень данных и что в нем содержится в настоящее время.

Чтобы воспользоваться консолью браузера нажмите F12, после этого можно очистить вывод и ввести следующую инструкцию:

dataLayer в консоли браузера

dataLayer в консоли браузера

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

Содержимое уровня данных в консоле

Содержимое уровня данных в консоле

Расширения, которые могут помочь в работе можно найти в магазине. Воспользуйтесь поиском и введите dataLayer, после чего выберите одно из предложенных расширений. Я ими не пользуюсь, по этой причине какое установить посоветовать не могу – выбор за вами. Мне достаточно консоли и отладчика, по сути расширения дублируют эти сведения, иногда в более удобном виде.

Ошибки при работе с dataLayer

Остановлюсь на наиболее важных ошибках, из-за которых выполнение вами настройки и внедрения могут не работать.

В имени объектов dataLayer учитывается регистр

Имена переменных (ключи) должны быть заключены в кавычки:

Имена переменных должны быть одинаковыми на разных страницах

Неверный код

Рабочий код

Заключение

Подведем итог разобранных вопросов связанных с уровнем данных или dataLayer Google Tag Manager:

  • уровень данных – переменная JavaScript для передачи данных в контейнер Google Tag Manager
  • по умолчанию имя уровня данных dataLayer, но его можно изменить
  • нужно быть внимательным при передаче данных в dataLayer до и после контейнера Google Tag Manager
  • чтобы не допускать ошибки необходимо использовать универсальное решение для конструкции dataLayer.push()
  • информация в dataLayer описывается согласно правилам JSON, можно использовать сложенные структуры данных
  • из dataLayer данные извлекаются с помощью переменных
  • с помощью dataLayer передаются пользовательские события
  • посмотреть содержимое уровня данных можно через отладчик, консоль браузера и расширения
  • если данные не передаются, необходимо искать ошибки в описании dataLayer
Метки не заданы

Рассылка бесплатных кейсов, инструкций, обзоров

Настройки, интеграции, примеры реальных задач, пошаговые инструкции


  1. Андрей
    09.07.2015 at 14:44

    Супер :) В свое время очень не хватало такой статьи. Спасибо

  2. Ivan
    09.07.2015 at 16:27

    Иван, привет. Ну DataLayer все-таки объект, а не массив :)

    • Ответ автора
      11.07.2015 at 13:45

      Ivan, я тоже думал над тем, массив или объект, проверка с помощью typeof() выдает объект

      • Ярослав
        14.08.2015 at 12:25

        И то, и другое будет правильно. С одной стороны, это массив (об этом говорят квадратные скобки и сам метод push()). С другой стороны – это объект (почему нет?). Ведь у него есть свойства и методы.

  3. Дмитрий
    09.07.2015 at 18:41

    Спасибо за статью!

    Если я правильно понимаю, пункт 5 (до и после сниппета гтм) не соответствует официальной документации по уровню данных гтм

    вот цитата:

    In order to fire tags on a page load matching some condition (e.g. on pages marked as having a pageCategory of sports), the pageCategory must be defined in the data layer above the container snippet (e.g. ‘pageCategory’: ‘sports’). Variables pushed to the data layer (i.e. using dataLayer.push()) after the container snippet will not be able to fire tags on page loads with a matching condition.

    ссылка – https://developers.google.com/tag-manager/devguide#datalayer

    • Ответ автора
      11.07.2015 at 13:47

      Дмитрий, речь в Вашем примере идет о загрузке страницы, для этого нужно данные передать до кода контейнера GTM, но никто не запрещает использовать передачу через push() после кода контейнера. Все зависит от решаемой Вами задачи

  4. Роман
    10.07.2015 at 12:47

    Спасибо за статью.
    Разве будет работать, если пушить ПОСЛЕ GTM без объявления переменной

    dataLayer = [];

    ПЕРЕД кодом контейнера ???

    • Ответ автора
      11.07.2015 at 13:50

      Роман, если Вы сами не определили dataLayer до кода контейнера, это выполнится автоматически.

  5. Anton
    22.07.2015 at 01:19

    Большое спасибо за статью, белстяще полезно!

  6. Ismail
    12.08.2015 at 19:07

    Спасибо за статью! Сделал так: объявил dataLayer перед основным кодом GTM, указал в нем пустые данные. Далее на странице к ссылке добавил:

    onclick=”dataLayer.push({‘name’: ’1′, ‘productname’: 2′});”

    Но почему-то данные добавляются в dataLayer только после второго клика. Проверяю через панель предварительного просмотра в GTM. С чем может быть связана проблема?

    • Ответ автора
      16.08.2015 at 23:00

      Для решения задачи необходимо иметь возможность ознакомиться с исходным кодом страницы сайта, а также настройками GTM

  7. Александр
    15.01.2016 at 20:00

    Правильно ли я понимаю что если GTM у нас в начале body то надо использовать такую конструкцию для электронной торговли? Правильный ли синтаксис?

    dataLayer.push({
    ‘transactionId’: ‘{/literal}{$order.id}{literal}’,
    ‘transactionAffiliation’: ‘{/literal}{$order.params.storefront}{literal}’,
    ‘transactionTotal’: {/literal}{$order.total}{literal},
    ‘transactionProducts’: [
    {/literal}{foreach $order.items as $item}{literal}
    {
    'sku': '{/literal}{$item.sku_id}{literal}',
    'name': '{/literal}{$item.name}{literal}',
    'price': {/literal}{$item.price}{literal},
    'quantity': {/literal}{$item.quantity}{literal}
    },
    {/literal}{/foreach}{literal}
    ]
    });

    • Ответ автора
      16.01.2016 at 22:05

      Александр, синтаксис Вам помогут проверить разработчики Вашего сайта. Вот здесь подробно про настройку классической торговли Google Analytics

  8. Артем
    24.05.2016 at 12:35

    Добрый день, Иван. Столкнулся с проблемой работы уровня данных. Проблема в том что он работает “через раз”. Раз GTM видит dataLayer тогда в отладчике такое http://screencast.com/t/doKlzHMwQW , а раз не видит тогда такое http://screencast.com/t/7qMzyKjEyRJD Скрипт уровня данных расположен как положено перед GTM http://screencast.com/t/HzFhJHqrt Много чего перепробовал – результат не меняется. Может сталкивались с таким?

    • Ответ автора
      25.05.2016 at 13:04

      Артем, уберите “обертку” jQuery в описании уровня данных

  9. Анна
    27.05.2016 at 17:07

    Иван, привет.
    Спасибо за статью. Возник вопрос. Мне нужно для групп контента, в уровень данных отправлять значение — название категории. Мне разместить код

    dataLayer.push({‘pageCategory’: ‘CategoryName’});

    До контейнера GTM или после? У вас в статье, указано, что для конструкции dataLayer.push, размещать после кода GTM

    • Ответ автора
      27.05.2016 at 17:16

      Анна, добрый день. Вероятно Вам лучше размещать ДО кода контейнера уровень данных и использовать не push , а как в примере выше: dataLayer = [{'k1':'v1', 'k2':'v2'}];

  10. Ян
    21.10.2016 at 11:01

    Можно ли записывать event при определении dataLayer? GTM будет их правильно обрабатывать?

    Пример:
    На странице спасибо за покупку сразу пишем в var dataLayer = [{ "ecommerce":{...}, "event":"transaction", ...}].
    В GTM есть тэг по отправке события в UA ЕС, срабатывающий на триггер пользовательское событие “transaction”.

    Вопрос – это правильная реализация? Или событие event”:”transaction” надо писать/вызывать после кода GTM контейнера (dataLayer.push({ “event”:”transaction”}) ?

    • Ответ автора
      21.10.2016 at 23:53

      Ян, такое описание возможно и корректно работает (до кода Google Tag Manager описать уровень данных)

  11. Саня Привет!
    28.02.2017 at 15:57

    На сайте все сделано. Но не передаются данные в ГТМ. www. mondigo .ru. push есть. Есть ошибки в коде. Из-за них?

    • Ответ автора
      28.02.2017 at 23:19

      У Вас передаются данные через push(), но вот Google Tag Manager дальше с ними (полученными данными) ничего не делает

  12. Илья
    07.06.2017 at 14:11

    В переменных с типом “Переменная уровня данных” можно выбрать “Версию уровня данных” (Версия 1, Версия 2) объясните пожалуйста что это и для чего

    • Ответ автора
      09.06.2017 at 09:29

      Илья, для версии 1 точка в имени ключа будет расценена как обычный символ, для версии 2 будет означать, что нужно пройти на уровень ниже относительно ключа до точки. Т.е. версия 2 позволяет описывать сложные структуры

  13. Костя
    28.01.2018 at 17:28

    Спасибо за статью. Спасибо за уроки :)

    • Ответ автора
      23.02.2018 at 04:06

      Спасибо Вам за интерес к блогу

  14. Олег
    03.07.2019 at 13:31

    Иван, здравствуйте! Благодаря Вашим статьям я решил огромное количество задач. Большое Вам спасибо за столько подробные разъяснения!

    И появился небольшой вопрос, связанный с передачей в Метрику параметров визита через datalayer.push: чтобы вывести в Метрике IP адреса в вебвизоре через Параметры визита, я сделал в GTM следующие шаги:
    1) создал тег с обращением к сервису определения IP адреса и вывода данных в datalayer (http://www.picshare.ru/view/10116786/). Триггером выступили все PageView (referrer do not contains mydomain.com) http://www.picshare.ru/view/10116787/
    2) добавил строку в код Метрики (установлена через GTM). Сначала поставил datalayer [0], но затем поставил [2], хотя тут не очень понятно, какое значение ставить (несмотря на уточнение в конце статьи, я так и не нашел индекс, от которого нужно отталкиваться) – http://www.picshare.ru/view/10116788/
    3) создал Custom Variable с именем как в первом теге (ipAddress) – http://www.picshare.ru/view/10116789/, а также еще один триггер с Custom event “ipEvent”(http://www.picshare.ru/view/10116790/) как в первом теге.

    Но почему-то передача Параметров визита в Метрику так и не происходит.. Буду благодарен за Вашу помощь!

    • Ответ автора
      20.08.2019 at 22:56

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

  15. Олег
    13.02.2020 at 10:31

    Добрый день.

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

    • Ответ автора
      19.02.2020 at 19:55

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

mode_edit