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

При работе с 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. Буду рад, если поделитесь своими секретами в комментариях.

Кейсы и инструкции по настройке в вашем ящике. Подпишитесь сейчас!

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

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

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

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

    Если я правильно понимаю, пункт 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

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

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

    dataLayer = [];

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

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

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

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

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

  4. Правильно ли я понимаю что если 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}
    ]
    });

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

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

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

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

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

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

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

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

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

Добавить комментарий

Current month ye@r day *