Как настроить отслеживание электронной торговли в GA4 через код Universal Analytics

После прекращения поддержки Universal Analytics (UA), многие функции аналитики «отвалились» и требовали новой настройки. Вместе с ними — отслеживания электронной торговли.

Для настройки модуля электронной торговли необходимо внедрение кода в сайт и привлечение разработчиков. Или это не обязательно? В этой статье я расскажу, как можно с помощью кода ecommers для UA настроить отслеживание транзакций в GA4.

1. Сравнение модулей.
2. Техническая реализация.
3. Создание переменных.
4. Создание триггера.
5. Создание тега GA4.

Сравнение модулей электронной коммерции UA и GA4

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

dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: “purchase”,
  ecommerce: {
      transaction_id: “T12345”,
      affiliation: “Online Store”,
      value: “59.89”,
      tax: “4.90”,
      shipping: “5.99”,
      currency: “EUR”,
      coupon: “SUMMER_SALE”,
      items: [{
        item_name: “Triblend Android T-Shirt”,
        item_id: “12345”,
        price: “15.2”,
        item_brand: “Google”,
        item_category: “Apparel”,
        item_variant: “Gray”,
        quantity: 1
      }, {
        item_name: “Donut Friday Scented T-Shirt”,
        item_id: “67890”,
        price: 33.75,
        item_brand: “Google”,
        item_category: “Apparel”,
        item_variant: “Black”,
        quantity: 1
      }]
  }
});

dataLayer.push({
'ecommerce': {
'purchase': {
'actionField': {
'id': '13990', // номер транзакции
'revenue': '105', 
},
'products': [{ 
'name': 'Ремень вариатора Dayco DY 7188', 
'id': '050002',
'price': '105',
'brand': 'DAYKO',
'category': 'Расходники и Запчасти',
'quantity': 1
}]
}
},
'event':'gtm-enhanced-ecommerce'
});

Основные переменные в Google Analytics 4 остались прежними, изменилось только их название. Однако из-за этого изменения GA4 уже не будет правильно соотносить переменные и, следовательно, передавать транзакции, как прежде. 

GA4 не будет работать без параметра transaction_id, например. Также в GA4 нельзя передавать доход (value) без валюты (currency). Если будет пропущена валюта, в GA4 все будет фиксироваться без дохода.

В общем, различий достаточно, но как тогда заставить код UA работать в GA4? Для начала, я выделю обязательные параметры в коде GA4. В данном блоке кода это:

• transaction_id;
• value;
• currency.

В блоке items также есть обязательные параметры. Их два:

• item_name;
• item_id.

Все остальные параметры можно передавать или не передавать на ваш выбор. Код будет работать и без них.

Техническая реализация электронной торговли в GA4

С обязательными параметрами разобрались, теперь расскажу, как заставить их работать. А именно, я расскажу, как перенастроить код для UA для ecommerce, который уже был на сайте, используя dataLayer и Google Tag Manager (GTM). 

Первым шагом определите, какие переменные вам нужны. Для этого обратитесь к коду для GA4, который я привела выше в таблице. Выделите все нужные для базовой работы модуля переменные, например:

• items;
• transaction_id;
• value;
• shipping;
• currency;
• affiliation.

Теперь, посмотрев на код для UA, я вижу, что все эти переменные уже есть в моём dataLayer. Осталось только создать переменные в GTM, присвоить им нужные значения и передать в GA4. 

Создание переменных

Чтобы создать новую переменную, необходимо перейти в GTM, на вкладку «Переменные» и нажать кнопку «Создать».

После этого задайте название переменной, ее тип (в моем случае «Переменная уровня данных») и условие для присвоения значения.

Обратите внимание на условие присвоения значения. Строка ecommerce.purchase.products означает, что эта переменная примет значение массива данных, которые уже есть в dataLayer. В коде для UA видно, что эта строка также показывает порядок обращения к массиву данных: сначала ecommerce, потом — purchase, потом — products.

Далее перехожу к настройке переменных. Настраиваю переменную уровня данных. В версии уровня данных указываю «Версия 2». Указываю путь к массиву products, то есть к информации о товаре.

В том же порядке создаю следующую переменную, называю «PC - EE - transaction_id». Она принимает значение идентификатора транзакции.

Далее переменная «PC - EE - affiliation» — это информация о том, в каком магазине или у какого партнёра была произведена покупка. Условный пример значения: «филиал 1, партнёр 2».

Создаю переменною дохода «PC - EE - value» — ценность транзакции. Это обязательный параметр.

Следующий шаг — проверить, что новые переменные действительно принимают нужные значения. Для этого в разделе «Теги» нажимаю кнопку «Предварительный просмотр».

По этой кнопке откроется окно з предпросмотром сайта. На нем делаю тестовую транзакцию в режиме. Затем в расшифровке переменных смотрю, какие значения передаются. 

Нахожу Event, который передается в момент успешной покупки. Открываю вкладку «Переменные» и нахожу среди них нужные мне.

Триггер

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

Триггер всегда будет в разделе Event вашего Google Tag Manager. 

Тег

Последний шаг — это создание тега GA4, в который вы будете передавать данные о транзакциях для отчетов.

В GTM нажимайте «Создать тег», тип тега «Событие GA4».

Дальше необходимо выбрать конфигурацию GA4 и задать название событию. В названии указываю «purchase». В GA4 именно это название отвечает за покупки.

Дальше открываю меню «Параметры события» и указываю все нужные параметры, из выбранных ранее.

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

После заполнения всех значений, страница должна выглядеть так.

Последний шаг настройки — добавление настроенного ранее триггера и проверка в режиме предпросмотра.

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

Откроется меню с параметрами этого тега. Проверяю, что все значения корректны и передается то, что мне нужно.

После проверки публикую изменения в GTM, жду 5 минут и снова делаю тестовую транзакцию. Теперь провожу проверку уже в самом GA4, в отчетах в режиме реального времени.

Рекомендую дополнительно проверять элементы в DebugView GA4.

В стандартных отчетах данные появятся спустя 24 часа.

Вывод

1. Код передачи транзакций Universal Analytics не будет работать с Google Analytics 4, поскольку названия переменных в нем не соответствуют названиям параметром в GA4.
2. Чтобы передавать транзакции в GA4 через код Universal Analytics, необходимо сопоставить названия переменных и настроить их передачу в GTM.
3. Описанный способ — это временная мера, которая не дает полной информации о транзакциях. Если вы хотите видеть все типы отчетов, а не только транзакции, стоит сразу использовать код для GA4.