Сейчас в сети: 667
Учитесь работать в Google Analytics вместе с нами!
star_border

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:

 

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

 

В качестве значения переменной может выступать как строка (заключается в кавычки), так и другие типы значений, например, числа, вложенные массивы и пр.

 

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

 

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

 

 

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

 

 

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

 

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

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

 

Что такое event в dataLayer

 

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

 

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

 

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

 

Переменные уровня данных и пользовательские события в 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 примет следующий вид:

 

 

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

 

 

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

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

 

 

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

 

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

 

              1. Отслеживание отправки форм

В статье “Учимся работать в GTM”  в пункте, посвященному отслеживанию отправки форм я уже рассказывала подробно, как использовать dataLayer для трекинга форм, отправляющих данные посредством ajax.

 

              2. Отслеживание e-commerce‎

Не обойтись без уровня данных и при установке электронной торговли на сайтах интернет-магазинов.

На странице успешного оформления заказа необходимо разместить следующий код:

 

 

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

 

  

Также частыми примерами использования является передача всевозможных атрибутов посетителя – User ID, Client ID, тип пользователя (залогинен/не залогинен) и пр.

 

Как вы уже поняли, уровень данных – это один из важных инструментов при настройке передачи данных для аналитики и других систем. Понимание того, как он устроен и как используется, очень важно для постановки задач и для поиска неисправностей в отслеживании. Надеюсь, что моя статья будет полезной для вас!

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

Меня зовут Анастасия. Занимаюсь интернет-рекламой и веб-аналитикой в компании OdesSeo. Сертифицированный специалист по Google AdWords и Google Analytics. Всегда рада поделиться опытом и узнать что-то новое=)