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> |
В данном случае уровень данных представляет собой массив, который содержит объект, свойства которого являются теми переменными, в которые мы передаем необходимые нам значения. Так, если при загрузке страницы блога я хочу передать в dataLayer тип страницы и имя автора текущей статьи, то я могу в переменную pageCategory передать значение ‘blog’, в author – ‘Anastasiia’.
В качестве значения переменной может выступать как строка (заключается в кавычки), так и другие типы значений, например, числа, вложенные массивы и пр.
Важно отметить, что подобное объявление уровня данных будет корректно работать в случае, если этот фрагмент кода будет размещен до инициализирующего кода GTM.
|
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 --> |
При необходимости мы можем переопределить название массива dataLayer. Для этого в инициализирующем коде в строке
нужно заменить “dataLayer” на желаемое название.
Метод 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
Необходимо добавить новую пользовательскую переменную,
в качестве ее типа выбрать “Переменная уровня данных”. В поле “Имя переменной уровня данных” указать название переменной, которое фигурирует в dataLayer (для примера, приведенного выше, это variableName).
Как создать пользовательское событие в GTM
Необходимо добавить новый триггер. В качестве типа триггера нужно выбрать “Пользовательское событие”
В поле “Имя события” указать имя события, которое фигурирует в dataLayer (для примера, приведенного выше, это eventName).
Как проверить содержимое уровня данных
Чтобы проверить, что передается в dataLayer, можно воспользоваться консолью в панели инструментов разработчика.
Для того, чтобы перейти в консоль, нужно кликнуть правой кнопкой мыши на любой области веб-страницы, затем в появившемся меню выбрать “проинспектировать элемент” и перейти на вкладку Console.
Далее в консоли написать dataLayer и нажать Enter.
Ниже будет представлена внутренняя структура массива.
По умолчанию Диспетчер тегов Google передает на уровень данных следующий набор значений:
gtm.js – передается в момент, когда Google Tag Manager готов к работе.
gtm.dom – передается в момент, когда готова модель DOM.
gtm.load – передается в момент, когда окно полностью загружено.
После настройки передачи данных в dataLayer, они также будут видны в структуре массива в консоли при загрузке страницы или после совершения заданного действия.
Рассмотрим пример:
Предположим, что нам необходимо настроить событие заказа звонка на сайте OdesSeo.
Для этого нам нужно, чтобы при успешной отправке этой формы в массив dataLayer добавлялось событие, например, назовем его ordercall. Тогда конструкция с dataLayer примет следующий вид:
|
1 |
dataLayer.push({'event': 'ordercall'}); |
Для того, чтобы проверить корректность передачи данных, воспользуемся консолью.
Видим, что при успешной отправке формы заказа звонка, ивент ordercall добавляется в уровень данных.
Теперь в интерфейсе Google Tag Manager мы сможем создать триггер типа “Пользовательское событие” для отправки данных в Google Analytics или другую систему аналитики.
Примеры использования dataLayer
Рассмотрим несколько примеров использования уровня данных.
1. Отслеживание отправки форм
В статье “Учимся работать в GTM” в пункте, посвященному отслеживанию отправки форм я уже рассказывала подробно, как использовать dataLayer для трекинга форм, отправляющих данные посредством ajax.
2. Отслеживание 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' //количество }] }); |
3. Передача идентификатора просмотренного пользователем товара для использования динамического ремаркетинга.
Функционал ремаркетинга позволяет показывать объявления тем, кто уже посещал сайт. Динамический ремаркетинг – это ещё более эффективный инструмент, с помощью которого можно показывать рекламу именно того товара, которым интересовался пользователь.
Если кто-то не сталкивался с понятием динамического ремаркетинга и еще не знаком с преимуществами этого инструмента, посмотрите эту статью.
Для корректной настройки объявлений динамического ремаркетинга необходимо реализовать передачу данных о просмотренных пользователем товарах в рекламную систему. Для отправки id товара и прочих атрибутов также можно применить уровень данных.
Например, для передачи идентификатора продукта, категории страницы и стоимости товара можем использовать dataLayer вида:
|
1 2 3 4 5 6 7 8 9 |
<script> dataLayer = [{ 'productId' : '123', 'pageType' : 'product', 'totalValue' : 1000 }]; </script> |
Также частыми примерами использования является передача всевозможных атрибутов посетителя – User ID, Client ID, тип пользователя (залогинен/не залогинен) и пр.
Как вы уже поняли, уровень данных – это один из важных инструментов при настройке передачи данных для аналитики и других систем. Понимание того, как он устроен и как используется, очень важно для постановки задач и для поиска неисправностей в отслеживании. Надеюсь, что моя статья будет полезной для вас!
