Обратная связь
Введите ваши данные, и я свяжусь с вами!
Какой у вас вопрос?

Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c обработкой персональных данных

dataLayer (уровень данных) в Google Tag Manager

Материал обновлен 23:01:2022

В Google Tag Manager очень часто используют dataLayer, разберемся что это и зачем он нужен.

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

dataLayer — это объект JavaScript, который необходим для передачи данных в Google Tag Manager. На основе этих данных строится логика работы в контейнере, а также настраиваются теги, триггеры и переменные. Чаще всего используется при настройке Google Analytics и тегов ремаркетинга.

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

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

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

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

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

Новые кейсы, инструкции публикуются в Telegram канале, подпишитесь сейчас!

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

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

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

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

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

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

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

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

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

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

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

Зачем может понадобится такая информация? Например, для передачи данных из уровня данных в некоторую 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, то уровень данных уже есть и нужно данные в нем дополнить теми, которые вам необходимы, а не создавать новый объект.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что такое dataLayer.push()

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

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

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

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

Новые кейсы, инструкции публикуются в Telegram канале, подпишитесь сейчас!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Больше полезной информации в Telegram, подпишитесь сейчас!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как посмотреть dataLayer

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

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

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

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

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

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

Чтобы проверить, что передается в dataLayer, можно воспользоваться консолью браузера (в Google Chrome нажмите F12), затем необходимо ввести dataLayer и нажать Enter. Результатом ее выполнения является вывод содержимого переменной 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

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

Рассылка бесплатных кейсов, инструкций, обзоров
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности
Ежедневные новости из мира аналитики в Telegram канале
Настройки, интеграции, примеры реальных задач, пошаговые инструкции
материалы ПО ТЕМЕ:
ОБСУЖДЕНИЕ:
Андрей
09.07.2015 at 14:44

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

Ivan
09.07.2015 at 16:27

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

    Иван
    11.07.2015 at 13:45

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

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

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

Дмитрий
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() после кода контейнера. Все зависит от решаемой Вами задачи

Роман
10.07.2015 at 12:47

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

dataLayer = [];

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

    Иван
    11.07.2015 at 13:50

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

Anton
22.07.2015 at 01:19

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

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

Александр
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}
]
});

Артем
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 в описании уровня данных

Анна
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'}];

Ян
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 описать уровень данных)

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

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

    Иван
    28.02.2017 at 23:19

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

Илья
07.06.2017 at 14:11

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

    Иван
    09.06.2017 at 09:29

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

Костя
28.01.2018 at 17:28

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

    Иван
    23.02.2018 at 04:06

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

Олег
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

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

Олег
13.02.2020 at 10:31

Добрый день.

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

    Иван
    19.02.2020 at 19:55

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

Сергей
30.07.2021 at 13:31

Добрый день. Не подскажите как быть, если пушатся данные с страницы thank-you, если ее обновить, то данные отправляются повторно. И у меня из-за этого портится статистика. Образно есть люди которые не закрывают эту страницу, потом при открытие браузера, данные снова пушатся. Получается что один и тот же заказ увеличивается по количеству. Спасибо.

    Иван
    16.08.2021 at 23:08

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

Ivan Dziuba
11.02.2022 at 04:55

Добрый день. Спасибо за материал! Одна просьба… Подправьте вёрстку сайта для мобильных)) => перенос букв очень отвлекает.. Пример => «него» становится «н /n» «его». Спасибо!

Роман
10.03.2022 at 11:37

Добрый день.
Настроили отправку данных через datalayer при взаимодействии пользователя с элементами сайта и
события имеют значение явно не относящиеся к ним (сохраненные в datalayer ярлык события с предыдущего события).

Как решить данную проблему?

Катерина
07.04.2022 at 20:43

Иван, спасибо за статью! Подскажите, а с ga4 так можно? Передавать события, параметры событий, параметры пользователей через dataLayer?

    promet
    24.04.2022 at 10:14

    Да, все работает аналогично. Через dataLayer передаете необходимые значения, в Tag Manager-е разбираете их и передаете в любую систему

Оставить комментарий
Для добавления комментария — заполните форму!

Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c обработкой персональных данных