Способы формирования dataLayer - напрямую и через Google Tag Manager

13 июля, 2022

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

Содержание

Начало

Уверен, что каждый, кто хотя бы раз работал с диспетчером тегов Google, слышал о dataLayer. Уровень данных - это объект, в который вы можете помещать нужную информацию (события, переменные и прочие данные), а затем передавать ее в сторонние сервисы, например, в Google Analytics 4, Facebook *, Яндекс.Метрику, ВКонтакте и т.д.

* Деятельность американской компании Meta (бывшая Facebook) запрещена в России, организация признана экстремистской.

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

Пример работы dataLayer

Вы могли встречать данный термин даже если никогда не сталкивались с GTM. Например, в интерфейсе Яндекс.Метрики при настройке электронной коммерции:

Имя контейнера данных - dataLayer (Яндекс.Метрика, электронная коммерция)

Используя dataLayer и Google Tag Manager, можно настраивать триггеры, основанные на значениях переменных (например, активировать тег и передавать данные только при совершении покупки на сайте на сумму больше 5000 руб., то есть когда purchase > 5000) или на определенных событиях. И сами значения, и факт совершения такого события можно так же передавать в другие сервисы.

По сути, dataLayer - это переменная, которой можно присвоить некоторое значение. Только отличием dataLayer от встроенных и пользовательских переменных GTM заключается то, что:

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

Много переменных в dataLayer / Одно значение для каждой из переменной

на уровень данных можно передавать любые типы данных (строки, числа и т.д.);
на уровень данных можно передать событие (event), триггером которого будет являться Специальное событие;

Используемый триггер для событий в dataLayer

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

dataLayer не является обязательным. Если вы его не используете, то доступ к данным на странице все равно можно получать, но только через встроенные и пользовательские переменные Google Tag Manager. Но при этом вы не сможете использовать события. Однако применение dataLayer в GTM так же, как и использование JavaScript, существенно расширяет возможности вашего отслеживания. Например, для отслеживания электронной торговли, настройки функции User ID и динамического ремаркетинга.

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

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

В рамках данного материала я хотел бы больше остановиться на практической части использования уровня данных и на способах его формирования.

Способы формирования dataLayer

Самый простой пример - это демонстрация dataLayer на конкретном элементе. Давайте представим, что у нас на сайте есть кнопка, которую необходимо отслеживать. Когда пользователь совершает клик по ней, требуется передавать информацию о совершенном событии в счетчики аналитики. В качестве такой кнопки возьмем зеленую кнопку Консультация на моем тестовом проекте graphanalytics.ru:

Отслеживание кнопки

Казалось бы, для Google Tag Manager задача очень простая - активировать встроенные переменные типа Клик и настроить триггер типа Клик - Все элементы с соответствующим условием активации конкретно на данную кнопку. И вы будете правы.

А если нам необходимо сделать это нестандартно, через dataLayer и пользовательское событие? (пока не спрашивайте зачем такое усложнение). Тогда у нас есть, как минимум, два пути:

написать техническое задание (ТЗ) разработчику с просьбой сформировать уровень данных на этот элемент, и при совершении клика отправлять пользовательское событие;
самостоятельно сформировать уровень данных через Google Tag Manager, и при совершении клика так же отправлять пользовательское событие.

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

Отслеживание без Google Tag Manager и без dataLayer

Для Яндекс.Метрики существует два способа:

с использованием цели типа Клик по кнопке (через интерфейс Яндекс.Метрики);
с использованием цели типа JavaScript-событие и добавлением определенной конструкции кода на отслеживаемый элемент;

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

Копирование кода

В данном случае, это событие onclick. Поэтому итоговая конструкция будет выглядеть так:

onclick="ym(87685080, 'reachGoal', 'greenButton');"

1	onclick="ym(87685080, 'reachGoal', 'greenButton');"

Она добавляется в код самой кнопки:

Код JavaScript-события на кнопку для Яндекс.Метрики

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

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

- для Universal Analytics и библиотеки analytics.js:

ga('send', 'event', 'greenButton', 'click');

1	ga('send', 'event', 'greenButton', 'click');

- для Google Analytics 4 и библиотеки gtag.js:

gtag('event', 'click');

1	gtag('event', 'click');

, где click - название события Google Analytics 4.

Этот код можно добавить после основной конструкции от Universal Analytics. Таким образом, получится следующее:

onclick="ga('send', 'event', 'greenButton', 'click'); gtag('event', 'click');"

1	onclick="ga('send', 'event', 'greenButton', 'click'); gtag('event', 'click');"

На самом элементе общая конструкция для отслеживания события UA (analytics.js) и GA4 (gtag.js) будет выглядеть так:

Общая конструкция события для двух счетчиков Google Analytics

Примечание: подробнее о том, как настраиваются события в Google Analytics 4 через Google Tag Manager, смотрите на моем YouTube-канале.

Теперь перейдем к способам формирования отслеживания с использованием dataLayer.

1. Прямое формирование уровня данных

Для формирования dataLayer всегда используйте следующую конструкцию с методом .push:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event':'customEvent'
});

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({

'event':'customEvent'

});

С помощью первой строки window.dataLayer = window.dataLayer || [] мы проверяем, существует ли объект dataLayer. Если он существует, то используем его. В противном случае мы его создаем и он у нас пустой. Второй строчкой window.dataLayer.push({'event':'customEvent'}) мы дополняем с помощью метода .push() тот объект (массив), который был создан в первой строчке, а также передаем событие (event) с заданным названием (например customEvent).

Таким образом, вы пишите техническое задание разработчику с запросом такого вида (пример):

Просьба сформировать уровень данных с событием clickGreenButton в момент клика пользователя по зеленой кнопке Консультация.

Пример итогового кода:

onclick = "window.dataLayer = window.dataLayer || [];
window.dataLayer.push({'event':'clickGreenButton'});

После этого программист добавляет данную конструкцию на отслеживаемый элемент, точно так же, как это было с JavaScript-событием для Яндекс.Метрики и Google Analytics:

Конструкция уровня данных на отслеживаемом элементе

Теперь каждый раз, когда пользователь будет кликать по зеленой кнопке, будет срабатывать событие clickGreenButton. Убедиться в этом можно, перейдя в режим отладки Google Tag Manager:

Событие clickGreenButton на шкале событий

Для того, чтобы передать информацию об этом событии в счетчики аналитики, вам необходимо создать триггер типа Специальное событие с названием события clickGreenButton. Именно так, как вы сами написали в техническом задании!

Триггер специального события clickGreenButton

На последнем шаге вам остается только создать нужные теги и передать информацию в счетчики аналитики.

Например, для Google Analytics 4:

Пример тега GA4 со специальным событием

Если в уровне данных вам необходимо передать дополнительную информацию, то вы просто перечисляете все значения с помощью пар 'ключ':'значение'. Имя ключа и значения заключаются в одинарные кавычки, между собой они разделяются двоеточием. Например:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event':'customEvent',
'dimension1':'value1',
'dimension2':'value2'
});

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({

'event':'customEvent',

'dimension1':'value1',

'dimension2':'value2'

});

, где:

dimension1 и dimension2 - параметры;
value1 и valu2 - значения параметров.

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

Просьба сформировать уровень данных с событием clickGreenButton в момент клика пользователя по зеленой кнопке Консультация, а также передать с ним два параметра - цвет кнопки и текущее время клика пользователя (часы, минуты, секунды).

Пример итогового кода:

onclick = "window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event':'clickGreenButton',
'button_color': 'green',
'event_time': 'текущее время пользователя'
});"

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

<script type="text/javascript">
var Data = new Date(); 
var Hour = Data.getHours(); 
var Minutes = Data.getMinutes(); 
var Seconds = Data.getSeconds();
var Time = Hour + ":" + Minutes + ":" + Seconds;
</script>

var Data = new Date();

var Hour = Data.getHours();

var Minutes = Data.getMinutes();

var Seconds = Data.getSeconds();

var Time = Hour + ":" + Minutes + ":" + Seconds;

</script>

В результате это будет выглядеть примерно так:

Итоговая конструкция dataLayer с параметрами

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

button_color - green (статическое значение, не изменяется);
event_time - текущее время клика по кнопке в формате Час: Минуты: Секунды (динамическое значение, изменяется).

Убедиться в этом можно, перейдя в режим отладки Google Tag Manager и открыв API Call:

Событие clickGreenButton на шкале событий с переданными параметрами button_color и event_time

Отлично! Теперь эти данные можно извлекать из переменных и отправлять текущие значения в счетчики аналитики.

Как это сделать? Использовать пользовательскую переменную типа Переменная уровня данных. Просто задайте им имена точно так же, как вы видите их в API Call режима отладки:

Переменные уровня данных button_color и event_time

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

Например, для Google Analytics 4:

Пример тега GA4 со специальным событием и параметрами события

Дополнительные параметры цвета кнопки и текущее время передаются как параметры события, а их значениями как раз и послужат переменные уровня данных, созданные на предыдущем шаге. А для того, чтобы в ваших отчетах GA4 фиксировались дополнительные данные по событиям, вам необходимо вручную создать специальные параметры button_color и event_time в интерфейсе Google Analytics 4. Подробнее о том, как это сделать, читайте в этой статье.

2. Формирование уровня данных через Google Tag Manager

А можно было бы обойтись без технического задания и разработчика? Если вы используете Google Tag Manager, то да! dataLayer с определенным набором данных для отслеживаемого элемента можно сформировать самостоятельно.

Для этого необходимо создать тег типа Пользовательский HTML и добавить в него обработчик события (addEventListener). Тогда конструкция для кнопки будет выглядеть так:

<script>
var elem = document.querySelector('CSS-селектор');
elem.addEventListener("click", function(){
dataLayer.push({"event": "clickGreenButton2"});
});
</script>

var elem = document.querySelector('CSS-селектор');

elem.addEventListener("click", function(){

dataLayer.push({"event": "clickGreenButton2"});

});

</script>

Вместо CSS-селектор вы вставляете значение селектора отслеживаемого элемента. В моем примере у зеленой кнопки селектор section#home a.button.hp-button-1.slide-button.w-button.green.fancybox. В Google Tag Manager:

Пользовательский HTML тег

Код работает следующим образом: переменной elem присваивается значение элемента документа, который соответствует указанному селектору. Далее создается метод addEventListener с событием click и функцией обработчика, в которой мы прописываем пользовательское событие clickGreenButton2 в уровне данных.

Другими словами, при клике на конкретный элемент, содержащий заданный селектор, будет срабатывать пользовательское событие clickGreenButton2, которое мы сможем использовать в качестве триггера GTM. Аналогичным образом можно настроить отслеживание и на другие браузерные события, например отравку формы, Подробнее про прослушивание событий и addEventListener можете прочитать здесь.

Примечание: о том, что такое селекторы CSS, читайте в этом материале.

Событие clickGreenButton2 я назвал для отличия от первого способа. Вы можете назвать по-другому. В качестве триггера активации выберите All Pages (Все страницы) или же конкретизируйте его с помощью дополнительного условия.

Если совершить событие и перейти в режим отладки, то на шкале событий вы увидите точно такое же событие, что и при прямом формировании уровня данных:

Событие clickGreenButton2 на шкале событий

Следующие действия с созданием триггера и тега аналогичны предыдущим этапам - создаете триггер типа Специальное событие с названием события (в данном случае clickGreenButton2), а затем тег, который будет передавать данные о регистрируемом событии в сторонние сервисы.

Думаю, вы не сильно удивитесь, когда я скажу, что на уровень данных можно передавать и дополнительные параметры, так же через Пользовательский HTML тег, как это было с цветом кнопки и текущем времени пользователя. Только если тогда нам требовалось время на написание ТЗ, на внедрение правок разработчика и проверку корректности передачи данных, то теперь нам необходимо лишь GTM и немножко знаний JavaScript.

В параметре, передающий цвет кнопки, нет ничего сложного, поскольку он является статическим и не изменяется со временем. Здесь можно просто прописать: 'button_color': 'green'

Но что делать с текущем временем пользователя? Не так сложно, как кажется на первый взгляд. Достаточно создать переменную типа Собственный код JavaScript с такой конструкцией, а потом использовать ее в уровне данных.

Код для текущего времени пользователя

Теперь создайте тег типа Пользовательский HTML и модифицируйте его, добавив параметр button_color вручную, а в значении параметра event_time просто сошлитесь на переменную, созданную выше:

Пользовательский HTML тег с параметрами события

Совершив клик по кнопке, сработает событие clickGreenButton3, а на уровень данных передадутся параметры button_color и event_time.

Событие clickGreenButton3 на шкале событий с переданными параметрами button_color и event_time

Дальше вы знаете что делать!

Итого

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

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

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

Ссылка для теста

Метки: dataLayer, Google Tag Manager