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

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

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

Как выглядит dataLayer

Рассмотрим пример dataLayer:

<script>

dataLayer = [{
'pageCategory': 'blog',
'author': 'Anastasiia'
}];

</script>

dataLayer = [{

'pageCategory': 'blog',

'author': 'Anastasiia'

}];

</script>

В данном случае уровень данных представляет собой массив, который содержит объект, свойства которого являются теми переменными, в которые мы передаем необходимые нам значения. Так, если при загрузке страницы блога я хочу передать в dataLayer тип страницы и имя автора текущей статьи, то я могу в переменную pageCategory передать значение ‘blog’, в author — ‘Anastasiia’. В качестве значения переменной может выступать как строка (заключается в кавычки), так и другие типы значений, например, числа, вложенные массивы и пр. Важно отметить, что подобное объявление уровня данных будет корректно работать в случае, если этот фрагмент кода будет размещен до инициализирующего кода GTM.

<!-- Google Tag Manager -->

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>

<!-- End Google Tag Manager -->

new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],

j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=

'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);

})(window,document,'script','dataLayer','GTM-XXXXXX');</script>

При необходимости мы можем переопределить название массива dataLayer. Для этого в инициализирующем коде в строке

нужно заменить “dataLayer” на желаемое название.

Метод push для передачи данных

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

dataLayer.push({'variableName': 'variableValue'});

1	dataLayer.push({'variableName': 'variableValue'});

Данная конструкция будет полезна, если вы хотите передать некоторые данные не в момент загрузки страницы, а при совершении пользователем определенного действия (клик по кнопке, заполнение формы и пр.)

Что такое event в dataLayer

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

dataLayer.push({'event': 'eventName'});

1	dataLayer.push({'event': 'eventName'});

Например, при клике на кнопку, вызывающую окно заказа звонка, можно использовать конструкцию:

<a href="#order" name="order-button" onclick="dataLayer.push({'event': 'order-button-click'});" >Заказать звонок</a>

1	<a href="#order" name="order-button" onclick="dataLayer.push({'event': 'order-button-click'});" >Заказать звонок</a>

Если таких кнопок на странице две: в хедере и футере, тогда мы можем дополнить нашу конструкцию, передав уточняющие значения, а именно:

<a href="#order" name="order-button" onclick="dataLayer.push({'event': 'order-button-click', 'position': 'top'});" >Заказать звонок</a>

1	<a href="#order" name="order-button" onclick="dataLayer.push({'event': 'order-button-click', 'position': 'top'});" >Заказать звонок</a>

Переменные уровня данных и пользовательские события в GTM

В GTM на основании передаваемых с помощью dataLayer данных можно создавать переменные и триггеры.

Как создать переменную уровня данных в GTM

Необходимо добавить новую пользовательскую переменную,

в качестве ее типа выбрать “Переменная уровня данных”. В поле “Имя переменной уровня данных” указать название переменной, которое фигурирует в dataLayer (для примера, приведенного выше, это variableName).

Как создать переменную уровня данных в GTM

Как создать пользовательское событие в GTM

Необходимо добавить новый триггер. В качестве типа триггера нужно выбрать “Пользовательское событие”

Выбираем событие, которое фигурирует в dataLayer

В поле “Имя события” указать имя события, которое фигурирует в dataLayer (для примера, приведенного выше, это eventName).

указуем имя события, которое фигурирует в dataLayer

Как проверить содержимое уровня данных

Чтобы проверить, что передается в dataLayer, можно воспользоваться консолью в панели инструментов разработчика. Для того, чтобы перейти в консоль, нужно кликнуть правой кнопкой мыши на любой области веб-страницы, затем в появившемся меню выбрать “проинспектировать элемент” и перейти на вкладку Console.

Далее в консоли написать dataLayer и нажать Enter.

Ниже будет представлена внутренняя структура массива.

По умолчанию Диспетчер тегов Google передает на уровень данных следующий набор значений: gtm.js – передается в момент, когда Google Tag Manager готов к работе. gtm.dom – передается в момент, когда готова модель DOM. gtm.load – передается в момент, когда окно полностью загружено. После настройки передачи данных в dataLayer, они также будут видны в структуре массива в консоли при загрузке страницы или после совершения заданного действия. Рассмотрим пример: Предположим, что нам необходимо настроить событие заказа звонка на сайте OdesSeo.

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

dataLayer.push({'event': 'ordercall'});

1	dataLayer.push({'event': 'ordercall'});

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

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

Примеры использования dataLayer

Рассмотрим несколько примеров использования уровня данных. 1. Отслеживание отправки форм В статье “Учимся работать в GTM” в пункте, посвященному отслеживанию отправки форм я уже рассказывала подробно, как использовать dataLayer для трекинга форм, отправляющих данные посредством ajax. 2. Отслеживание e-commerce‎ Не обойтись без уровня данных и при установке электронной торговли на сайтах интернет-магазинов. На странице успешного оформления заказа необходимо разместить следующий код:

<script>

dataLayer = [{
'transactionId': '123456',                              //id транзакции
'transactionAffiliation': 'best-flowers',           //наименование магазина
'transactionTotal': '20',                                 //сумма транзакции
'transactionTax': '1.99',                                //налог
'transactionShipping': '1.99',                       //доставка
'transactionProducts': [{                              
'sku': 'AA11',                                               //артикул товара
'name': 'rose',                                             //наименование товара
'category': 'red',                                          //категория товара
'price': '20',                                                 //цена товара
'quantity': '1'                                               //количество
}]
}];

</script>

dataLayer = [{

'transactionId': '123456', //id транзакции

'transactionAffiliation': 'best-flowers', //наименование магазина

'transactionTotal': '20', //сумма транзакции

'transactionTax': '1.99', //налог

'transactionShipping': '1.99', //доставка

'transactionProducts': [{

'sku': 'AA11', //артикул товара

'name': 'rose', //наименование товара

'category': 'red', //категория товара

'price': '20', //цена товара

'quantity': '1' //количество

}]

}];

</script>

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

dataLayer.push({
'event': 'transactionComplete',                     //событие совершения транзакции
'transactionId': '123456',                              //id транзакции
'transactionAffiliation': 'best-flowers',           //наименование магазина
'transactionTotal': '20',                                 //сумма транзакции
'transactionTax': '1.99',                                //налог
'transactionShipping': '1.99',                       //доставка
'transactionProducts': [{                              
'sku': 'AA11',                                               //артикул товара
'name': 'rose',                                             //наименование товара
'category': 'red',                                          //категория товара
'price': '20',                                                 //цена товара
'quantity': '1'                                               //количество
}]
});

dataLayer.push({

'event': 'transactionComplete', //событие совершения транзакции

'transactionId': '123456', //id транзакции

'transactionAffiliation': 'best-flowers', //наименование магазина

'transactionTotal': '20', //сумма транзакции

'transactionTax': '1.99', //налог

'transactionShipping': '1.99', //доставка

'transactionProducts': [{

'sku': 'AA11', //артикул товара

'name': 'rose', //наименование товара

'category': 'red', //категория товара

'price': '20', //цена товара

'quantity': '1' //количество

}]

});

3. Передача идентификатора просмотренного пользователем товара для использования динамического ремаркетинга. Функционал ремаркетинга позволяет показывать объявления тем, кто уже посещал сайт. Динамический ремаркетинг – это ещё более эффективный инструмент, с помощью которого можно показывать рекламу именно того товара, которым интересовался пользователь. Если кто-то не сталкивался с понятием динамического ремаркетинга и еще не знаком с преимуществами этого инструмента, посмотрите эту статью. Для корректной настройки объявлений динамического ремаркетинга необходимо реализовать передачу данных о просмотренных пользователем товарах в рекламную систему. Для отправки id товара и прочих атрибутов также можно применить уровень данных. Например, для передачи идентификатора продукта, категории страницы и стоимости товара можем использовать dataLayer вида:

<script>

dataLayer = [{
   'productId' : '123',
   'pageType' : 'product',
   'totalValue' : 1000
}];

</script>

dataLayer = [{

'productId' : '123',

'pageType' : 'product',

'totalValue' : 1000

}];

</script>

Также частыми примерами использования является передача всевозможных атрибутов посетителя — User ID, Client ID, тип пользователя (залогинен/не залогинен) и пр. Как вы уже поняли, уровень данных — это один из важных инструментов при настройке передачи данных для аналитики и других систем. Понимание того, как он устроен и как используется, очень важно для постановки задач и для поиска неисправностей в отслеживании. Надеюсь, что моя статья будет полезной для вас!

Анастасия, добрый день! подскажите как правильно указать специальный параметр - переменную уровня данных в тег менеджере, если в разметке уровня данных она находится на 3м уровне, а сам продукт состоит из нескольких сегментов (для этого используем "legs") Пример: "ecommerce": { "currencyCode": "USD", "impressions": [ {... "legs": [ { "Id": 0, "segments": [ { "dimension1": Проблема в том, что тег менеджер цепляет только те параметры, которые находятся в ивенте, те которые далее в сегменте отображаются как "undefined" в дебаг консоли тег менеджера. Спасибо

Борис

3 марта, 2019 в 10:57

Подскажите, как выдрать и передать в GTM переменную из id-gtm в коде ссылки href="#" id="contact_with_author" id-gtm="44559" class="send-message" ? C помощью какой функции?

Виктор

26 февраля, 2019 в 15:19

Очень полезная статья! Анастасия, Спасибо!

Анастасия Тимошенко

27 февраля, 2019 в 10:31

Спасибо☺

Ivan

30 января, 2019 в 16:24

Здравствуйте. Подскажите как передавать в dataLayer параметры из последнего примера. Например на странице фильтра товаров где 10 или 15 товаров?

Николай

27 января, 2019 в 20:22

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

Анастасия Тимошенко

7 февраля, 2019 в 13:05

Добрый день, Николай. И для отправки данных о транзакциях, и для настройки динамического ремаркетинга можно использовать GTM. Но помимо тегов в GTM, в зависимости от конкретного сайта, обычно может потребоваться передача данных в массив dataLayer с последующим использованием в GTM. Минусов внедрения GTM лично в моей практике не было. По статьям, возможно, вам будет интересен этот пост: https://odesseo.com.ua/enhanced-ecommerce-gtm/

Sergh

17 мая, 2018 в 5:51

Дякую, якісно подані роз'яснення.

Анастасия Тимошенко

25 мая, 2018 в 9:58

Дякую!

Владимир

7 мая, 2018 в 11:26

Добрый день. Подскажите, что нужно прописать в datalayer, чтобы передать эти данные для динамического ремаркетинга (http://prntscr.com/jergqt)Данные необходимо передавать для ecomm_prodid

Артем Малькевич

4 декабря, 2017 в 14:53

"Для этого нам нужно, чтобы при успешной отправке этой формы в массив dataLayer добавлялось событие, например, назовем его ordercall. Тогда конструкция с dataLayer примет следующий вид: 1 dataLayer.push({'event': 'ordercall'});" А как это сделать, чтобы в дата леер это отобразилось?

Анастасия Тимошенко

4 декабря, 2017 в 15:55

Артем, добрый день. Об особенностях отслеживания успешной отправки форм я писала в этой статье https://odesseo.com.ua/uchimsya-rabotat-v-gtm-v2/ пункт "Отслеживание отправки форм в GTM".

Артем Малькевич

5 декабря, 2017 в 8:39

Меня интересует как именно выводиться информация в дата Леер. Как происходил datalayer.push.

Анастасия Тимошенко

5 декабря, 2017 в 8:42

В одном из javascript-фалов Вам нужно найти функцию, отвечающую за отправку данных формы. Выглядит это примерно так: $.ajax ({ url :'/example.com/geinfo_function', type : 'post', data : {'exam1': value1}, success: function() {...} }) Параметр success отвечает за выполнение указанных действий в случае успешной отправки формы. Внутри function() { … } нужно прописать команду dataLayer.push({'event': 'event_name'}); где event_name – имя соответствующего события. Подробнее процесс настройки описан в статье, ссылку на которую я дала выше.

Alex Putevoi

25 сентября, 2017 в 19:00

Спасибо большое за статью, очень понятно написали! Не то что эти мануалы для индейцев от гугла

Anastasiia Tymoshenko

26 сентября, 2017 в 7:00

Спасибо за приятные слова! Я старалась=)

Александр Качков

25 сентября, 2017 в 13:00

Спасибо за хорошую статью. Телеграм канал есть у вас?

Anastasiia Tymoshenko

26 сентября, 2017 в 7:00

Спасибо, Александр! Мне очень приятно) Да, есть. Вот ссылка: https://t.me/OdesSeo

25 комментариев

Дмитрий:

3 июля, 2020 в 11:22 дп

А как сделать отправку этих шагов на сервер? Вот сделал я сто раз push, но все эти данные продолжают лежать в dataLayer на странице и на сервер не уходят

Ответить
1. Анастасия:
  
  8 июля, 2020 в 8:02 дп
  
  Добрый день!
  Для того, чтобы отправить данные на сервер системы веб-аналитики, нужно создать соответствующие теги в интерфейсе GTM.
  
  Ответить
Alex:

11 июня, 2020 в 2:21 пп

Спасибо! Все понятно и человеческим языком!

Ответить
1. Анастасия:
  
  12 июня, 2020 в 7:51 дп
  
  Супер! Спасибо=)
  
  Ответить
Сергей:

11 октября, 2019 в 8:57 пп

Супер, статья!
Все понятно!

Ответить
Yan:

6 мая, 2019 в 12:34 пп

мощно! и понятно! спасибо)

Ответить
1. Анастасия Тимошенко:
  
  20 мая, 2019 в 10:02 дп
  
  Спасибо!)
  
  Ответить
Alex:

4 марта, 2019 в 3:36 пп

Анастасия, добрый день! подскажите как правильно указать специальный параметр — переменную уровня данных в тег менеджере, если в разметке уровня данных она находится на 3м уровне, а сам продукт состоит из нескольких сегментов (для этого используем
«legs») Пример:

«ecommerce»: {
«currencyCode»: «USD»,
«impressions»: [
{…
«legs»: [
{
«Id»: 0,
«segments»: [
{
«dimension1»:

Проблема в том, что тег менеджер цепляет только те параметры, которые находятся в ивенте, те которые далее в сегменте отображаются как «undefined» в дебаг консоли тег менеджера. Спасибо

Ответить
Борис:

3 марта, 2019 в 10:24 дп

Подскажите, как выдрать и передать в GTM переменную из id-gtm в коде ссылки href=»#» id=»contact_with_author» id-gtm=»44559″ class=»send-message» ? C помощью какой функции?

Ответить
Виктор:

26 февраля, 2019 в 3:03 пп

Очень полезная статья! Анастасия, Спасибо!

Ответить
1. Анастасия Тимошенко:
  
  27 февраля, 2019 в 10:09 дп
  
  Спасибо☺
  
  Ответить
Ivan:

30 января, 2019 в 4:03 пп

Здравствуйте. Подскажите как передавать в dataLayer параметры из последнего примера.
Например на странице фильтра товаров где 10 или 15 товаров?

Ответить
Николай :

27 января, 2019 в 8:46 пп

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

Ответить
1. Анастасия Тимошенко:
  
  7 февраля, 2019 в 1:03 пп
  
  Добрый день, Николай.
  И для отправки данных о транзакциях, и для настройки динамического ремаркетинга можно использовать GTM. Но помимо тегов в GTM, в зависимости от конкретного сайта, обычно может потребоваться передача данных в массив dataLayer с последующим использованием в GTM. Минусов внедрения GTM лично в моей практике не было. По статьям, возможно, вам будет интересен этот пост: https://odesseo.com.ua/enhanced-ecommerce-gtm/
  
  Ответить
Sergh:

17 мая, 2018 в 5:52 дп

Дякую, якісно подані роз’яснення.

Ответить
1. Анастасия Тимошенко:
  
  25 мая, 2018 в 9:42 дп
  
  Дякую!
  
  Ответить
Владимир:

7 мая, 2018 в 11:18 дп

Добрый день. Подскажите, что нужно прописать в datalayer, чтобы передать эти данные для динамического ремаркетинга (http://prntscr.com/jergqt)Данные необходимо передавать для ecomm_prodid

Ответить
Артем Малькевич:

4 декабря, 2017 в 2:15 пп

«Для этого нам нужно, чтобы при успешной отправке этой формы в массив dataLayer добавлялось событие, например, назовем его ordercall. Тогда конструкция с dataLayer примет следующий вид:

1
dataLayer.push({‘event’: ‘ordercall’});»

А как это сделать, чтобы в дата леер это отобразилось?

Ответить
1. Анастасия Тимошенко:
  
  4 декабря, 2017 в 3:04 пп
  
  Артем, добрый день.
  Об особенностях отслеживания успешной отправки форм я писала в этой статье https://odesseo.com.ua/uchimsya-rabotat-v-gtm-v2/ пункт «Отслеживание отправки форм в GTM».
  
  Ответить
  1. Артем Малькевич:
    
    5 декабря, 2017 в 8:22 дп
    
    Меня интересует как именно выводиться информация в дата Леер.
    Как происходил datalayer.push.
    
    Ответить
    1. Анастасия Тимошенко:
      
      5 декабря, 2017 в 8:55 дп
      
      В одном из javascript-фалов Вам нужно найти функцию, отвечающую за отправку данных формы. Выглядит это примерно так:
      
      $.ajax ({
      url :’/example.com/geinfo_function’,
      type : ‘post’,
      data : {‘exam1’: value1},
      success: function() {…}
      })
      
      Параметр success отвечает за выполнение указанных действий в случае успешной отправки формы. Внутри function() { … } нужно прописать команду
      
      dataLayer.push({‘event’: ‘event_name’});
      
      где event_name – имя соответствующего события.
      
      Подробнее процесс настройки описан в статье, ссылку на которую я дала выше.
      
      Ответить
Alex Putevoi:

25 сентября, 2017 в 7:00 пп

Спасибо большое за статью, очень понятно написали! Не то что эти мануалы для индейцев от гугла

Ответить
1. Anastasiia Tymoshenko:
  
  26 сентября, 2017 в 7:52 дп
  
  Спасибо за приятные слова! Я старалась=)
  
  Ответить
Александр Качков:

25 сентября, 2017 в 1:22 пп

Спасибо за хорошую статью.
Телеграм канал есть у вас?

Ответить
1. Anastasiia Tymoshenko:
  
  26 сентября, 2017 в 7:54 дп
  
  Спасибо, Александр! Мне очень приятно) Да, есть. Вот ссылка: https://t.me/OdesSeo
  
  Ответить