Пять секретов уровня данных или dataLayer в Google Tag Manager

Google Tag Manager
Бесплатная версия онлайн курса по Google Tag Manager

7 уроков, более 2 часов обучающих видео материалов. Вы можете начать изучение прямо сейчас!
Более 600 человек уже изучают этот вариант курса

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

Итак, начнем с главного – dataLayer это название переменной JavaScript, которая служит для передачи данных, которые 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

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

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

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

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

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

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

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

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

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

Для тех кто не понял в чем секрет – поясню. Конструкция push() предназначена для добавления значения в массив, не более. Четвертый секрет раскрыт.

Продолжим? Давайте теперь научимся правильно описывать и определять уровень данных.

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

Иногда, код описывающий транзакцию (или любые другие данные) в уровне данных, необходимо разместить ДО кода Google Tag Manager, иногда ПОСЛЕ кода контейнера.

В чем разница спросите вы? А вот в чем. Если вы описываете данные ДО кода 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, в Google Tag Manager. Буду рад, если поделитесь своими секретами в комментариях.

Автор блога: Иванов Иван, практикующий веб-аналитик. Специалист по внедреннию Google Analytics и Яндекс Метрики. Занимаюсь разработкой решений для формирования данных и отчетов по сквозной аналитике. Автор обучающего курса по Google Tag Manager, преподаватель в Нетологии
Еженедельная рассылка кейсов!
Обсуждение
  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

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

Ваш комментарий
Выберите рубрику
Google Analytics (69)
Google Tag Manager (57)
Яндекс Метрика (8)
Обзоры (3)
Яндекс Директ (2)
Power BI (1)
Последние публикации
Последние комментарии