Уровень данных

Уровень данных – это объект, который используется в Google Менеджере тегов и gtag.js для передачи информации в теги. С его помощью вы можете передавать события и переменные, а также настраивать триггеры с учетом значения переменных.

Например, таким триггером может быть активация тега ремаркетинга, когда значение purchase_total превышает 7000 рублей или наступает определенное событие (нажатие кнопки и т. п.). Уровень данных представлен в виде объекта JSON. Пример.

{
  event: "checkout_button",
  gtm: {
    uniqueEventId: 2,
    start: 1639524976560,
    scrollThreshold: 90,
    scrollUnits: "percent",
    scrollDirection: "vertical",
    triggers: "1_27"
  },
  value: "120"
}

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

Способ реализации

При настройке Менеджера тегов на веб-странице вам потребуется создать уровень данных. В примере ниже выделена часть кода с уровнем данных. Он создается до загрузки Менеджера тегов:

<script>
window.dataLayer = window.dataLayer || [];
</script>
<!-- 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 -->

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

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());

  gtag('config', 'TAG_ID');
</script>

Обработка информации на уровне данных

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

Если код на странице выполняет вызовы gtag() или dataLayer.push() в пользовательском шаблоне или HTML-теге, связанное сообщение будет помещено в очередь обработки после всех остальных сообщений. Это означает, что обновленные значения уровня данных могут быть недоступны для следующего события. Чтобы этого избежать, вы можете добавить название события для сообщения, когда оно отправляется на уровень данных, а затем прослушать его с помощью запуска специального события.

Важно! Не применяйте пользовательские HTML-теги для кода на основе gtag.js. Вместо этого используйте шаблоны тегов для Google Рекламы, Аналитики и Floodlight из Менеджера тегов.

Важно! Не меняйте настройки, связанные с согласием, с помощью пользовательского HTML-тега. Эти настройки нужно применять до активации тегов в контейнере Менеджера тегов. Используйте Tag Manager Consent API, чтобы настроить поведение по умолчанию и измененное поведение. Использование Tag Manager Consent API гарантирует, что новые данные о согласии обрабатываются раньше прочих элементов в очереди на уровне данных. Таким образом, все теги, активированные одним и тем же событием, получают один и тот же статус согласия.

Важно! С помощью Google Tag Assistant вы можете проверить статус уровня данных в любой момент в цепочке событий.

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

Объект dataLayer использует команду event для инициализации отправки событий.

Тег Google и Менеджер тегов используют специальную переменную уровня данных – event. С ее помощью прослушиватели событий JavaScript активируют теги, когда пользователь взаимодействует с элементами сайта. Например, можно сделать так, чтобы тег отслеживания конверсий срабатывал при нажатии кнопки для подтверждения покупки. События могут вызываться, когда пользователь взаимодействует со ссылками, кнопками, элементами для прокрутки и т. п.

Для этого используется вызов dataLayer.push(). Синтаксис для отправки события с помощью dataLayer.push():

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

Здесь event_name – это строка с описанием события, например 'login', purchase или search.

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

<button onclick="dataLayer.push({'event': 'login'});">Button 1</button>

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

В случае событий этот результат достигается вызовом метода push() API, который добавляет переменные на уровень данных или заменяет их. Самый простой синтаксис для настройки динамических переменных уровня данных выглядит так:

dataLayer.push({'variable_name': 'variable_value'});

Здесь 'variable_name' – название переменной уровня данных, которую нужно настроить, а 'variable_value' – значение переменной, которое нужно задать или заменить.

В примере ниже показано, как настроить динамическую переменную уровня данных для выбора цвета (например, в виджете для конструирования товара):

dataLayer.push({'color': 'red'});

Одновременная передача нескольких переменных

Вы можете передавать несколько переменных и событий одновременно:

dataLayer.push({
  'color': 'red',
  'conversionValue': 50,
  'event': 'customize'
});

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

Сохранение переменных уровня данных

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

<script>
window.dataLayer = window.dataLayer || [];

dataLayer.push({
 'event': 'Pageview',
 'pagePath': 'https://www.googleanalytics.dev/pancakes',
 'pageTitle': 'Pancake Event Signup',
 'visitorType': 'customer'
});
</script>
<!-- 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 -->

Все переменные, объявленные в объекте уровня данных, сохраняются, пока посетитель остается на текущей странице. Переменные уровня данных, которые подходят для нескольких страниц (например, visitorType), должны быть объявлены в объекте уровня данных на каждой странице. Не обязательно задавать один и тот же набор переменных на уровне данных каждой страницы, но необходимо использовать единый принцип их именования. Другими словами, если для страницы регистрации вы задаете категорию с помощью переменной pageCategory, необходимо использовать ту же переменную (pageCategory) на страницах информации о товаре и покупки.

Устранение неполадок

Вот несколько советов по устранению неполадок на уровне данных:

Не переопределяйте переменную window.dataLayer. При непосредственном использовании уровня данных (например, dataLayer = [{'item': 'value'}])) все значения в разделе dataLayer будут переопределяться. При использовании Менеджера тегов уровень данных должен находиться как можно выше в исходном коде, над фрагментом-контейнером. Это можно реализовать с помощью кода window.dataLayer = window.dataLayer || [];. После объявления dataLayer используйте dataLayer.push({'item': 'value'}), чтобы добавить туда дополнительные данные. Если эта информация должна быть доступна Менеджеру тегов при загрузке страницы, то вызов dataLayer.push() также следует разместить над кодом контейнера Менеджера тегов.

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

datalayer.push({'pageTitle': 'Home'});    // Bad (datalayer in lowercase)
dataLayer.push({'pageTitle': 'Home'});    // Good (dataLayer in camel case)

Метод dataLayer.push должен вызываться допустимыми объектами JavaScript. Все названия переменных на уровне данных должны быть заключены в кавычки.

dataLayer.push({new-variable: 'value'});      // Bad - no quote marks
dataLayer.push({'new-variable': 'value'});    // Good - proper quote marks

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

Нежелательный вариант:

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});

Рекомендуемый вариант:

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitorType': 'high-value'});

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

dataLayer — это название уровня данных, по умолчанию инициируемое тегом Google или Менеджером тегов. Чтобы задать другое название, замените значение параметра уровня данных в теге Google или фрагменте-контейнере Менеджера тегов.

gtag.js

Чтобы задать новое название для уровня данных, например l=myNewName, добавьте в URL параметр запроса “l”. Замените все экземпляры названия dataLayer во фрагменте тега Google новым вариантом.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID&l=myNewName"></script>
<script>
  window.myNewName = window.myNewName || [];
  function gtag(){myNewName.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TAG_ID');
</script>

Менеджер тегов

Замените значение параметра уровня данных (выделено в примере ниже) в вашем фрагменте-контейнере.

Внимание! Не меняйте значение параметра, которое не выделено.

<!-- 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','myNewName','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

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

<script>
  myNewName = window.dataLayer || [];
  myNewName.push({'variable_name': 'variable_value'});
</script>

Примечание. На каждой странице может быть только один объект dataLayer.

Специальные методы для уровня данных

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

Важно! Чтобы использовать специальные методы для уровня данных, необходимо передавать данные непосредственно в переменную dataLayer с помощью функции .push. Если вы используете gtag, функция будет интерпретирована как недействительная команда и проигнорирована.

set

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

window.dataLayer.push(function() {
  this.set('time', new Date());
});

get

Функция get в абстрактной модели данных позволяет получить значения, заданные с помощью функции set.

window.dataLayer.push(function() {
  const existingTime = this.get('time');
  if (existingTime !== null) {
    // Change behavior based on whether or not this value exists...
  } else {
    // ...
  }
})

reset

Функция reset в абстрактной модели данных позволяет сбросить уровень данных. Это актуально для страницы, которая остается открытой и на которой размер уровня данных со временем растет. Чтобы сбросить уровень данных, используйте следующий код:

window.dataLayer.push(function() {
  this.reset();
})