Благодарим за интерес к предварительной версии документации о тегах Google. Этот сайт проходит публичное бета-тестирование. Оставить отзыв

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

Уровень данных – это объект, содержащий информацию, которую вы отправляете в 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, когда вы копируете тег из сервиса и добавляете на веб-страницу, там уже есть код для создания уровня данных. При самостоятельной реализации глобального тега необходимо добавить код уровня данных в начало скрипта. Пример:

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

  gtag('config', 'AW-YYYYYY');
</script>

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

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

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

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

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

Глобальные теги и Менеджер тегов используют специальную переменную уровня данных – 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. Чтобы задать другое название, замените значение параметра уровня данных в глобальном теге или фрагменте-контейнере Менеджера тегов.

gtag.js

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

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

  gtag('config', 'G-ZZZZZZ');
</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>

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

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

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();
})