Привет! Это вторая, практическая часть истории по настройке расширенной торговли. Первая — тут. Эта часть со скриншотами, нужными буквами и ссылками на первоисточники.
Первоисточники:
Вся настройка основана на статье Netpeak`a, к которому у нас теперь нет доступа
В GA4 переводим за счет скриптов Максима Гапчука, который тоже нас ненавидит
Содержание для быстрой навигации по странице:
- GTM
- ТЗ для разработчика
- Отладка всего этого добра
Настройка GTM
Состоит из Тегов, Триггеров и Переменных. По порядку, от меньшего к большему, разбираемся ниже.
Переменные GTM
Первым делом настраиваем все перемененные в GTM:
Нужные нам выделены рамкой.
Переменные типа GTM EE (Event, category, non-interaction) нужны для настройка Analytics Universal, тогда как переменные JS — будет преобразовывать данные в datalayer в читаемый вид и понятный вид для GA4. Но для того, чтобы сделать читаемыми, необходимо объявить переменные типа DL (affiliation, ecommerce, transaction_id, value) — обязательно с корректными названиями.
Далее, по порядку (специально вынес текстом, для твоего удобства. Просто копируй и вставляй, наслаждайся процессом):
EE для UA
GTM EE Event Action
gtm-ee-event-action
GTM EE Event Category
gtm-ee-event-category
GTM EE Event Non-Interaction
gtm-ee-event-non-interaction
EE для GA4 (преобразуем данные)
JS — ga4 ecom events
function() {
var event;
var ecom = {{DL - ecommerce}};
var keys = Object.keys(ecom);
action = keys[0];
switch(true) {
case "detail" in ecom:
event = "view_item";
break;
case "add" in ecom:
event = "add_to_cart";
break;
case "remove" in ecom:
event = "remove_from_cart";
break;
case "checkout" in ecom && ecom.checkout.actionField.step == 1:
event = "begin_checkout";
break;
case "purchase" in ecom:
event = "purchase";
break;
default:
event = false;
}
return event;
}
JS — items
function() {
var items = [];
var ecom = {{DL - ecommerce}};
var keys = Object.keys(ecom);
var action = keys[0];
prod_tr = function(products, list) {
awProduct = []
products.forEach(function(item, i, products) {
o = {};
o.item_name = item.name;
o.item_id = item.id;
o.price = item.price;
o.item_brand = item.brand;
o.item_category = item.category.split("/")[0];
o.item_category2 = item.category.split("/")[1];
o.item_category3 = item.category.split("/")[2];
o.item_category4 = item.category.split("/")[3];
o.item_category5 = item.category.split("/")[4];
o.item_variant = item.variant;
o.item_list_name = list;
o.quantity = item.quantity;
awProduct[i] = o;
return awProduct;
});
return awProduct
}
switch(true) {
case "detail" in ecom:
list = ecom.detail.actionField ? ecom.detail.actionField.list : "";
prod = ecom.detail.products;
items = prod_tr(prod, list);
break;
case "add" in ecom:
list = ecom.add.actionField ? ecom.add.actionField.list : "";
prod = ecom.add.products;
items = prod_tr(prod, list);
break;
case "remove" in ecom:
list = ecom.remove.actionField ? ecom.remove.actionField.list : "";
prod = ecom.remove.products;
items = prod_tr(prod, list);
break;
case "checkout" in ecom && ecom.checkout.actionField.step == 1:
prod = ecom.checkout.products;
items = prod_tr(prod);
break;
case "purchase" in ecom:
prod = ecom.purchase.products;
items = prod_tr(prod);
break;
}
return items;
}Вытаскиваем данные для GA4
Далее объявляем переменные DL — они нужны для того, чтобы вытянуть из datalayer значения, которые нужны нам для GA4:
DL — affiliation
ecommerce.purchase.actionField.affiliation
DL — ecommerce
ecommerce
здесь надо обратить внимание на то, что Версия Уровня данных Версия 1
DL — transaction_id
ecommerce.purchase.actionField.id
DL — value
ecommerce.purchase.actionField.revenue
На этом заполнение переменных закончено! Переходим к настройкам триггеров.
Триггеры GTM
Триггеров не так много как переменных, может показаться сначала. Однако, мы просто часть триггеров упакуем в регулярное выражение, из-за чего, общее кол-во записей будет всего 3
Триггер для UA
GTM EE Event
gtm-ee-event
Условия активации — все специальные события
Триггеры для GA4
E ecom — excl. purchase
gtm-ee-event
Важно правильно указать условия активации триггера
view_item|add_to_cart|remove_from_cart|begin_checkout
E ecom — purchase
gtm-ee-event
purchase
И на этом все! далее делаем Теги.
Теги GTM
Теги — конечная часть этой настройки. Выглядеть все должно примерно так:
По сути, у нас есть 3 тега для расширенной торговли. Enhanced Ecommerce — тег для Google Analytics, и два GA4 ecom — один специальный для всех событий, кроме покупки, и отдельный, для покупки.
Я специально выделил еще 1 тег GA4 — через него, мы настраиваем поток данных для отдельного ресурса GA4. Этот момент надо учесть) (надеюсь тут ничего сложно, информации по этому поводу куча)
Настройка EE для UA
Enhanced Ecommerce
{{GTM EE Event Category}}
{{GTM EE Event Action}}
{{GTM EE Event Non-Interaction}}
В идентификатор отслеживания — делаем свой UA код, который также должен лежать в переменных
В доп.настройках указываем, что используем функцию расширенной торговли и Используем уровень данных
Триггер — очевидно что GTM EE Event!
Настройка EE для GA4
GA4 ecom purchase
{{JS — ga4 ecom events}}
Триггер: E com — purchase
| items | {{JS — items}} |
| transaction_id | {{DL — transaction_id}} |
| affiliation | {{DL — affiliation}} |
| revenue | {{DL — value}} |
| tax | 0 |
| shipping | 0 |
| currency | RUB |
GA4 ecom excl. purchase
{{JS — ga4 ecom events}}
Триггер: E com — excl.purchase
| items | {{JS — items}} |
GTM сделан, ура! что же дальше?
ТЗ для разработчика
ТЗ для разработчика стараемся делать максимально понятно, чтобы сохранить ему нервы. Вот ссылка на него — ТЫК. Чтобы скопировать, надо нажать Файл -> создать копию. Готово!
Само ТЗ адаптируем под наш сайт. Если сложно, лучше делать частями, и сначала просмотр карточки товара, далее покупка, чекаут, и уже добавить/убрать товар в/из корзины.
