Содержание [скрыть]

Datalayer в Google Tag Manager — что это такое и как работает?
DataLayer в Google Tag Manager
Google Tag Manager — это очень функциональный и полезный инструмент в работе интернет-маркетологов. Благодаря ему большинство установок необходимых для работы кодов рекламных систем и систем веб-аналитики, а также различных кодов отслеживания стало возможным без привлечения веб-разработчиков и вмешательства в код сайта. Но все же есть ряд задач, при которых для настройки корректного отслеживания необходима передача данных без привязки к DOM-структуре. В таком случае нам понадобится использовать специальную конструкцию — уровень данных (или dataLayer).Что такое dataLayer (уровень данных)
Для начала рассмотрим, что же такое dataLayer. DataLayer — это массив объектов JavaScript, с помощью которого можно передавать нужную вам информацию в Google Tag Manager. Например, это могут быть различные переменные, события. В интерфейсе GTM на основании передаваемых данных можно настраивать триггеры, а также расширять передаваемую в Google Analytics информацию о посетителях сайта своими данными.Как выглядит dataLayer
Рассмотрим пример dataLayer:
1 2 3 4 5 6 7 8 |
<script> dataLayer = [{ 'pageCategory': 'blog', 'author': 'Anastasiia' }]; </script> |
1 2 3 4 5 6 7 8 9 |
<!-- 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 --> |


Метод push для передачи данных
Передавать дополнительные значения в уровень данных можно также и после инициализирующего кода. Поскольку dataLayer является массивом, можно использовать метод push() для добавления новых элементов.
1 |
dataLayer.push({'variableName': 'variableValue'}); |
Что такое event в dataLayer
Для отслеживания различных действий пользователя в GTM предусмотрена специальная переменная event. Event можно использовать внутри обработчика того или иного события.
1 |
dataLayer.push({'event': 'eventName'}); |
1 |
<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', 'position': 'top'});" >Заказать звонок</a> |
Переменные уровня данных и пользовательские события в GTM
В GTM на основании передаваемых с помощью dataLayer данных можно создавать переменные и триггеры.Как создать переменную уровня данных в GTM
Необходимо добавить новую пользовательскую переменную,

Как создать пользовательское событие в GTM
Необходимо добавить новый триггер. В качестве типа триггера нужно выбрать “Пользовательское событие” В поле “Имя события” указать имя события, которое фигурирует в dataLayer (для примера, приведенного выше, это eventName).
Как проверить содержимое уровня данных
Чтобы проверить, что передается в dataLayer, можно воспользоваться консолью в панели инструментов разработчика. Для того, чтобы перейти в консоль, нужно кликнуть правой кнопкой мыши на любой области веб-страницы, затем в появившемся меню выбрать “проинспектировать элемент” и перейти на вкладку Console.


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


Примеры использования dataLayer
Рассмотрим несколько примеров использования уровня данных.- Отслеживание отправки форм
- Отслеживание e-commerce
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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' //количество }] }); |
- Передача идентификатора просмотренного пользователем товара для использования динамического ремаркетинга.
1 2 3 4 5 6 7 8 9 |
<script> dataLayer = [{ 'productId' : '123', 'pageType' : 'product', 'totalValue' : 1000 }]; </script> |
Подскажите пожалуйста: что нужно прописать в пользовательской переменной уровня User, чтобы она хранила информацию о категории последнего добавленного в корзину товара.
А как сделать отправку этих шагов на сервер? Вот сделал я сто раз push, но все эти данные продолжают лежать в dataLayer на странице и на сервер не уходят
Добрый день!
Для того, чтобы отправить данные на сервер системы веб-аналитики, нужно создать соответствующие теги в интерфейсе GTM.
Спасибо! Все понятно и человеческим языком!
Супер! Спасибо=)
Супер, статья!
Все понятно!
мощно! и понятно! спасибо)
Спасибо!)
Анастасия, добрый день! подскажите как правильно указать специальный параметр — переменную уровня данных в тег менеджере, если в разметке уровня данных она находится на 3м уровне, а сам продукт состоит из нескольких сегментов (для этого используем
«legs») Пример:
«ecommerce»: {
«currencyCode»: «USD»,
«impressions»: [
{…
«legs»: [
{
«Id»: 0,
«segments»: [
{
«dimension1»:
Проблема в том, что тег менеджер цепляет только те параметры, которые находятся в ивенте, те которые далее в сегменте отображаются как «undefined» в дебаг консоли тег менеджера. Спасибо
Подскажите, как выдрать и передать в GTM переменную из id-gtm в коде ссылки href=»#» id=»contact_with_author» id-gtm=»44559″ class=»send-message» ? C помощью какой функции?
Очень полезная статья! Анастасия, Спасибо!
Спасибо☺
Здравствуйте. Подскажите как передавать в dataLayer параметры из последнего примера.
Например на странице фильтра товаров где 10 или 15 товаров?
Спасибо за статью, скажите электронную торговлю, и динамический ремаркетинг разве можно внедрить через GTM? если да то все корректно работает и есть ли какие-то минусы через GTM внедрять? И может статья есть у вас? Спасибо.
Добрый день, Николай.
И для отправки данных о транзакциях, и для настройки динамического ремаркетинга можно использовать GTM. Но помимо тегов в GTM, в зависимости от конкретного сайта, обычно может потребоваться передача данных в массив dataLayer с последующим использованием в GTM. Минусов внедрения GTM лично в моей практике не было. По статьям, возможно, вам будет интересен этот пост: https://odesseo.com.ua/enhanced-ecommerce-gtm/
Дякую, якісно подані роз’яснення.
Дякую!
Добрый день. Подскажите, что нужно прописать в datalayer, чтобы передать эти данные для динамического ремаркетинга (http://prntscr.com/jergqt)Данные необходимо передавать для ecomm_prodid
«Для этого нам нужно, чтобы при успешной отправке этой формы в массив dataLayer добавлялось событие, например, назовем его ordercall. Тогда конструкция с dataLayer примет следующий вид:
1
dataLayer.push({‘event’: ‘ordercall’});»
А как это сделать, чтобы в дата леер это отобразилось?
Артем, добрый день.
Об особенностях отслеживания успешной отправки форм я писала в этой статье https://odesseo.com.ua/uchimsya-rabotat-v-gtm-v2/ пункт «Отслеживание отправки форм в GTM».
Меня интересует как именно выводиться информация в дата Леер.
Как происходил datalayer.push.
В одном из javascript-фалов Вам нужно найти функцию, отвечающую за отправку данных формы. Выглядит это примерно так:
$.ajax ({
url :’/example.com/geinfo_function’,
type : ‘post’,
data : {‘exam1’: value1},
success: function() {…}
})
Параметр success отвечает за выполнение указанных действий в случае успешной отправки формы. Внутри function() { … } нужно прописать команду
dataLayer.push({‘event’: ‘event_name’});
где event_name – имя соответствующего события.
Подробнее процесс настройки описан в статье, ссылку на которую я дала выше.
Спасибо большое за статью, очень понятно написали! Не то что эти мануалы для индейцев от гугла
Спасибо за приятные слова! Я старалась=)
Спасибо за хорошую статью.
Телеграм канал есть у вас?
Спасибо, Александр! Мне очень приятно) Да, есть. Вот ссылка: https://t.me/OdesSeo