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

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

Например, если вы активируете тег ремаркетинга, когда значение purchase_total превышает 100 долларов США, или на основе определенных событий, например при нажатии кнопки, ваш уровень данных можно настроить так, чтобы эти данные были доступны для ваших тегов. Объект уровня данных имеет структуру 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 добавьте код слоя данных в начало вашего скрипта, как показано в выделенном ниже примере:

<!-- 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 для настройки параметров согласия в Диспетчере тегов . Поскольку настройки согласия необходимо применить до того, как соответствующие теги сработают в контейнере Диспетчера тегов, вы должны применить API согласия Диспетчера тегов , чтобы настроить поведение по умолчанию и обновление. Использование 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() для отправки данных о событии, когда происходит действие, которое вы хотите измерить. Например, чтобы отправить событие, когда пользователь нажимает кнопку, измените обработчик нажатия кнопки так, чтобы он вызывал onclick dataLayer.push() :

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

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

Как и в случае с событиями, эта функциональность реализуется путем вызова API push() для добавления или замены переменных уровня данных на уровне данных. Основной синтаксис для установки переменных слоя динамических данных следующий:

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

Переименуйте слой данных

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

gtag.js

Добавьте параметр запроса с именем «l» к URL-адресу, чтобы задать имя нового уровня данных, например, l=myNewName . Обновите все экземпляры 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 .

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

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

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

установлен

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

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

получить

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

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

перезагрузить

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

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