Как передавать события GA4, если используется тег analytics.js для стандартного отслеживания электронной торговли

Из этого руководства вы узнаете, как перейти с реализации стандартного отслеживания электронной торговли с помощью analytics.js для Universal Analytics на использование событий электронной торговли Google Аналитики 4.

Дополнительные ресурсы и руководства по переходу на GA4 можно найти на сайте Переход на Google Аналитику 4: ресурсы для разработчиков.

Результат

Выполнив приведенные ниже инструкции, вы создадите реализацию Google Аналитики 4, которая будет отправлять события электронной торговли GA4 в новый ресурс GA4 и существующий ресурс Universal Analytics. Ресурс Universal Analytics будет получать данные электронной торговли GA4, но изменений в отчетах не произойдет.

Перенос выполняется в два этапа:

Перенос данных о транзакциях из UA в событие GA4 "purchase"
- В Universal Analytics стандартный режим отслеживания электронной торговли поддерживает отправку данных о транзакциях и товарах. После перехода на использование события purchase в Google Аналитике 4 эта функция будет работать аналогичным образом.
Добавление событий электронной торговли GA4 (необязательно)
- Если вы добавите события электронной торговли GA4, то сможете пользоваться всеми функциями отслеживания, доступными в GA4. Примеры событий GA4: просмотры товаров и взаимодействия с ними, взаимодействия перед покупкой и взаимодействия при оформлении покупки.

Подготовка

Проверьте, соответствует ли ваша текущая реализация следующему описанию:
- Вы работаете с ресурсом Universal Analytics.
  - Определить это можно по наличию идентификатора отслеживания, который есть у ресурсов Universal Analytics.
- События электронной торговли отслеживаются на вашем сайте с помощью библиотеки analytics.js.
Изучите преимущества и недостатки разных вариантов перехода на GA4. Убедитесь, что вам подходит использование событий электронной торговли Google Аналитики 4 в существующей реализации Universal Analytics.
В справочной информации по совместимости событий описывается, как преобразовывается событие purchase из GA4 при отправке в ресурс UA.

Что следует учитывать

Изучите приведенную ниже информацию, чтобы понять, подходит ли вам использование событий электронной торговли Google Аналитики 4 в существующей реализации Universal Analytics.

Преимущества	Недостатки
Вы сможете просматривать данные электронной торговли и в отчетах GA4, и в отчетах Universal Analytics. Перейдя на использование события `purchase` в GA4, вы сможете получать отчеты Universal Analytics со всеми доступными данными.	Для перехода с analytics.js на gtag.js нужно будет приложить дополнительные усилия: рекомендуется перенести из analytics.js в gtag.js все специальные показатели (события, временные метки, просмотры страницы и т. д.).

Реализация

1. Перенесите отслеживание UA из analytics.js в gtag.js

Чтобы отправлять события электронной торговли GA4, вам нужно перенести код отслеживания (в том числе ваш собственный) из analytics.js в gtag.js.

Для этого:

Удалите фрагмент кода analytics.js.
Добавьте на сайт Google-тег (gtag.js) и укажите в нём идентификатор отслеживания вашего ресурса UA.
Перенесите ваш собственный код отслеживания из analytics.js в gtag.js. В разделах ниже показано, как перенести событие транзакции при стандартном отслеживании электронной торговли. Общую информацию о переносе отслеживания для других случаев можно найти в Центре для разработчиков.

До: тег analytics.js

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');    // Universal Analytics property.
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

После: Google-тег (gtag.js)

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

  gtag('config', 'UA-XXXXX-Y');    // Universal Analytics property.
</script>

2. Обновите реализацию отслеживания электронной торговли для передачи событий GA4

Вместо событий электронной торговли Universal Analytics начните использовать события Google Аналитики 4. В результате в ресурс Universal Analytics будет передаваться событие purchase из GA4. Последствия такого изменения описаны в разделе Что следует учитывать.

В примере ниже показано, как перенести событие транзакции из analytics.js (при отслеживании электронной торговли в стандартном режиме) в аналогичное ему событие purchase в GA4, поддерживаемое в Universal Analytics.

До переноса: транзакция в UA при отслеживании электронной торговли в стандартном режиме (analytics.js)

В примере ниже показано, как в analytics.js отслеживается транзакция с двумя товарами.

// Add the transaction.
ga('ecommerce:addTransaction', {
  id: '1234',     // Transaction ID.
  affiliation: 'Google Store',
  revenue: '29.97',
  shipping: '5.25',
  tax: '2.42'
});

// Add the items belonging to the transaction.
ga('ecommerce:addItem', {
  id: '1234',     // Transaction ID.
  name: 'Android Warhol T-Shirt',
  sku: 'P12345',  // Item ID.
  category: 'Apparel/T-Shirts',
  price: '12.99',
  quantity: '2'
});
ga('ecommerce:addItem', {
  id: '1234',     // Transaction ID.
  name: 'Flame challenge T-Shirt',
  sku: 'P67890',  // Item ID.
  category: 'Apparel/T-Shirts',
  price: '3.99',
  quantity: '1'
});
ga('ecommerce:send');

После переноса: отслеживание событий purchase в GA4 (gtag.js)

Событие транзакции в analytics.js и событие purchase в GA4 имеют следующие отличия:

В GA4 одно событие purchase содержит сведения о всех товарах транзакции и другие связанные с ней данные, тогда как в analytics.js выполняется несколько команд ga() для сбора этой информации.
В GA4 событие имеет одно поле transaction_id, а в analytics.js идентификатор транзакции добавляется для каждого товара.
В GA4 предусмотрено несколько полей для указания категории товара. В analytics.js для этого предназначено одно поле, в котором используется разделитель /, чтобы показать иерархию. При этом события из GA4 с несколькими полями для категорий товаров поддерживаются в ресурсе UA благодаря преобразованию параметров категорий.

 gtag('event', 'purchase', {
   currency: 'USD',
   transaction_id: '1234',    // Transaction ID.
   value: 29.97,
   affiliation: 'Google Store',
   shipping: 5.25,
   tax: 2.42,
   items: [
    {
      item_id: 'P12345',     // Item ID.
      item_name: 'Android Warhol T-Shirt',
      item_category: 'Apparel',
      item_category2: 'T-Shirts',
      price: 12.99,
      quantity: 2
    },
    {
      item_id: 'P67890',    // Item ID.
      item_name: 'Flame challenge T-Shirt',
      item_category: 'Apparel',
      item_category2: 'T-Shirts',
      price: 3.99,
      quantity: 1
    }
  ]
});

3. Создайте и настройте ресурс GA4

После перехода на события электронной торговли GA4 настройте отправку данных в новый ресурс Google Аналитики 4, используя один из указанных ниже вариантов.

Вариант 1. Воспользуйтесь ассистентом настройки GA4 и активируйте подключенные теги сайта

Ассистент настройки GA4 автоматически создаст ресурс GA4 и скопирует следующие настройки ресурса Universal Analytics: название ресурса, URL сайта, часовой пояс и настройки валюты. Он также поможет вам активировать подключенные теги сайта. Эта функция позволяет использовать существующие теги Universal Analytics (gtag.js) для ресурса GA4.

Следуйте инструкциям Ассистента настройки GA4, чтобы создать и настроить ресурс Google Аналитики 4. Чтобы использовать подключенные теги сайта, установите флажок Включить сбор данных с помощью существующих тегов.

Вариант 2. Измените код gtag.js

Создайте ресурс Google Аналитики 4.
- Воспользуйтесь Ассистентом настройки GA4, чтобы добавить ресурс Google Аналитики 4. Снимите флажок Включить сбор данных с помощью существующих тегов, когда появится соответствующее приглашение. Вы также можете создать ресурс Google Аналитики 4 без использования Ассистента настройки GA4. Ассистент удобен тем, что при его использовании основные настройки из ресурса Universal Analytics копируются автоматически.
Найдите идентификатор тега для ресурса GA4.
Добавьте ресурс GA4 в существующий фрагмент кода gtag.js с помощью команды config с идентификатором тега.

Ниже приведен пример кода gtag.js, в котором настроены и ресурс Universal Analytics, и ресурс Google Аналитики 4.

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

  gtag('config', 'UA-XXXXX-Y');         // Universal Analytics property.
  gtag('config', 'TAG_ID');  // Google Analytics 4 property.
</script>

4. Добавьте другие события электронной торговли (необязательно)

Чтобы использовать в GA4 все возможности отчетов, добавьте другие события GA4. Подробная информация приведена в статье об отслеживании электронной торговли в Google Аналитике 4.

Если gtag.js используется с конфигурацией по умолчанию, события GA4 передаются как в ресурсы UA, так и в ресурсы GA4. События GA4, передаваемые в ресурс UA, преобразуются, как описано в справке по совместимости событий. В gtag.js можно контролировать, какие события передаются в ресурсы UA и GA4, с помощью группирования и маршрутизации данных. Например, данные о событии purchase можно отправлять в ресурсы UA и GA4, а другие события GA4 – только в ресурс GA4.