Настройване на електронна търговия в Google Analytics 4 чрез Google Tag Manager

Следенето на електронната търговия е едно от основните задължения на всеки маркетинг специалист. Би трябвало вече да сме запознати как можем да настроим електронна търговия при Universal Analytics, а ако все още някой изпитва затруднения, може да погледнете нашата статия в блога - Как да настроите разширена електронна търговия с Google Tag Manager.

В тази статия ще се съсредоточим върху това как да настроим  електронна търговия в Google Analytics 4 с помощта на Google Tag Manager, тъй като само след няколко месеца старите версии на Google Analytics вече няма да бъдат активни.

Важно е, преди да започнем, да уточним, че има някои разлики при настройването на електронната търговия при GA4 и UA.

Промени в параметрите (schemas)

Промяната в параметрите (schemas) е най-основната разлика между GA4 и UA. Докато настройваме събитията за електронна търговия, трябва да подадем различните параметри като product details, price, brand и други. В този случай при повечето от тях има съществени разлики при едната и другата версия на Google Analytics.

В таблицата можете да откриете разликите във всеки един параметър, който можем да използваме при настройването на електронната търговия.

Google

Analytics 4

Universal Analytics

Описание

view_promotion

promoView

Преглеждане на промоция

select_promotion

promoClick

Клик върху промоция

view_item_list

impressions

Преглед на списък с продукти

select_item productClick

productClick

Клик върху продукт

view_item

detail

Преглед на детайли за продукта

add_to_cart

addToCart

Добавяне на продукт в количката

add_to_wishlist

N/A

Добавяне на продукт към списък с желания

remove_from_cart

removeFromCart

Премахване на продукт от количката

view_cart

N/A

Преглед на количката

begin_checkout

checkout

Иницииране на процеса на плащане

add_shipping_info

checkout_option

Добавяне на информация за доставка по време на чек аут

add_payment_info

checkout_option

Добавяне на информация за плащане по време на чек аут

purchase

purchase

Покупка на продукт

refund

refund

Възстановяване на сума 

item_id

id ID

Номер на продукт  / SKU

item_name

name

Име на продукта

item_list_name

list

Име на списък с продукти

item_list_id

N/A

Номер на списък с продукти

index

position

Позиция на продукта в списъка

item_brand

brand

Марка на продукта

item_brand

brand

Продуктова категория

item_category_2

category

Продуктова категория 2-ро ниво

item_category_3

category

Продуктова категория 3-то ниво

item_category_4

category

Продуктова категория 4-то ниво

item_category_5

category

Продуктова категория 5-то ниво

item_variant

variant

Вариант на име на продукт или описание

affiliation

N/A

Афилиейт на магазина

discount

N/A

Отстъпка на продукта

coupon

coupon

Използван код за отстъпка

price

price

Продуктова цена

currency

N/A

Валута

quantity

quantity

Брой продукти

promotion_id

ID

Номер на промоция

promotion_name

name

Име на промоция

transaction_id

id

Уникален ID номер на транзакцията, необходима за събитията “purchase” и “refund”

value

revenue

Стойност на продукта

shipping

shipping

Такса за доставка за избран продукт в количката

payment_type

option

Методът на плащане, изпратен с add_payment_info

Настройване на електронна търговия в GA4 с GTM

За да настроите коректно електронната търговия чрез Google Tag Manager, ще е необходимо да се дефинира или коригира Data Layer, ако имате дефиниран такъв. За това ще ви бъде нужна помощ от програмист или от екипа, който работи по вашия сайт.

След като имате дефиниран DataLayer, можете да създадете DataLayer Variable в GTM по следните стъпки:

Стъпка 1: Влезте в профила си в Google Tag Manager и кликнете върху „Variables“ в менюто отляво

Стъпка 1: Влезте в профила си в Google Tag Manager и кликнете върху „Variables“ в менюто отляво.

Стъпка 2: Кликнете върху „New“.

Стъпка 3: Изберете подходящо име на променливата и кликнете върху „Variable Configuration“.

Стъпка 4: От менюто, което ще се появи в дясната част на екрана, изберете “Data Layer Variable”.

Стъпка 5: Ще се отвори прозорец с променливата конфигурация (Variable Configuration). Въведете „ecommerce.items“ в полето на “Data Layer Variable Name”.

Стъпка 6: Кликнете върху „Save“ в горния десен ъгъл.

След като е настроена променливата “Data Layer Variable”, можем да продължим към настройването на събития за проследяване на електронната търговия. 

1. Преглед/Импресии на продуктов списък (Product Views/Impressions)

Трябва да настроим този таг на страниците, на които имаме продукти - начална страница, категорийни страници и т.н.

Конфигурация на DataLayer:

За да измерим Product Views/Impressions, трябва да изпратим списък с продукти и техните атрибути към Data Layer чрез “dataLayer.push” и да подадем ивента „view_item_list“ заедно с тези данни.

dataLayer.push({
  event: "view_item_list",
  ecommerce: {
    items: [
     {
      item_id: "",
      item_name: "",
      affiliation: "",
      coupon: "",
      currency: "",
      discount: ,
      index: 0,
      item_brand: "",
      item_category: "",
      item_category2: "",
      item_category3: "",
      item_category4: "",
      item_category5: "",
      item_list_id: "",
      item_list_name: "",
      item variant: "",
      location_id: "",
      price: ,
      quantity: 
    },
    {
      item_id: "",
      item_name: "",
      affiliation: "",
      coupon: "",
      currency: "",
      discount: ,
      index: 0,
      item_brand: "",
      item_category: "",
      item_category2: "",
      item_category3: "",
      item_category4: "",
      item_category5: "",
      item_list_id: "",
      item_list_name: "",
      item_variant: "",
      location_id: "",
      price: ,
      promotion_id: "",
      promotion_name: "",
      quantity: 
    }]
  }
});

Конфигурация на таг:

След като кодът по-горе бъде изпратен към DataLayer, следващата стъпка е да създадете вашия таг.

Стъпка 1: В Google Tag Manager кликнете върху „Tags“ в менюто отляво.

Стъпка 1: В Google Tag Manager кликнете върху „Tags“ в менюто отляво.

Стъпка 2: Кликнете върху „New“, за да създадете нов таг.

Стъпка 2: Кликнете върху „New“, за да създадете нов таг.

Стъпка 3: Изберете релевантно име на тага си и кликнете върху „Tag Configuration“.

Стъпка 3: Изберете релевантно име на тага си и кликнете върху „Tag Configuration“.

Стъпка 4: От дясната страна на екрана ще се появи прозорец, от който да изберете типа на тага. Изберете „Google Analytics:GA4 Event“.

Стъпка 4: От дясната страна на екрана ще се появи прозорец, от който да изберете типа на тага. Изберете „Google Analytics:GA4 Event“.

Стъпка 5: Ще се отвори нов прозорец, в който можете да конфигурирате своя таг. Кликнете върху „Select Configuration Tag“.

Стъпка 5: Ще се отвори нов прозорец, в който можете да конфигурирате своя таг. Кликнете върху „Select Configuration Tag“.

Стъпка 6: От падащото меню можете да изберете или вашия Pageview Tag, или „None- Manually Set ID“. В нашия случай ще изберем „None-Manually Set ID“.

Стъпка 6: От падащото меню можете да изберете или вашия Pageview Tag, или „None- Manually Set ID“. В нашия случай ще изберем „None- Manually Set ID“.

Стъпка 7: Следващата стъпка е да въведете вашето “Measurement ID” от GA4. Можете да го намерите в GA4 акаунта си - “Admin” -  „Data Streams“.

 

Стъпка 8: Посочете името на събитието - 'view_item_list'. То ще се появи в отчетите в GA4.

Стъпка 8: Посочете името на събитието - 'view_item_list'. То ще се появи в отчетите в GA4.

Стъпка 9: Кликнете върху падащото меню „Event Parameters“:

Стъпка 9: Кликнете върху падащото меню „Event Parameters“:

Стъпка 10: Кликнете върху бутона „Add Row“

Ще се покажат две нови полета - „Parameter Name“ и „Value“.

Стъпка 11: Въведете „items“ в полето „Parameter Name“ и кликнете върху бутона „+“ под полето „Value“:

Стъпка 11: Въведете „items“ в полето „Parameter Name“ и кликнете върху бутона „+“ под полето „Value“:

Стъпка 12: Ще се появи нов прозорец, от който трябва да изберете променливата, която създадохме по-рано - „Ecommerce DataLayer - GA4“. 

Стъпка 12: Ще се появи нов прозорец, от който трябва да изберете променливата, която създадохме по-рано - „Ecommerce DataLayer - GA4“.

Конфигурацията на вашия таг би трябвало да изглежда по следния начин:

Конфигурацията на вашия таг би трябвало да изглежда по следния начин:

Стъпка 13: Продължаваме с настройването на Trigger. Кликнете върху полето „Choose a trigger to make this tag fire…“.

Стъпка 13: Продължаваме с настройването на Trigger. Кликнете върху полето „Choose a trigger to make this tag fire…“.

Стъпка 14: Ще се появи нов прозорец за избор на тригер. Кликнете върху „+“ в горния десен ъгъл, за да добавите нов тригер.

Стъпка 15: Изберете подходящо име на вашия тригер и кликнете върху полето „Trigger Configuration“.

Стъпка 15: Изберете подходящо име на вашия тригер и кликнете върху полето „Trigger Configuration“.

Стъпка 16: Ще се появи нов прозорец вдясно, скролнете надолу и изберете „Custom Event“.

Стъпка 16: Ще се появи нов прозорец вдясно, скролнете надолу и изберете „Custom Event“.

Стъпка 17: Ще се отвори поле „Trigger Configuration“. Трябва да се въведе “Event name”. В това събитие това е „view_item_list“, тъй като измерваме импресиите на продукта.

Стъпка 18: Кликнете върху „Save“ в горния десен ъгъл. Вашият таг ще изглежда по следния начин:

Стъпка 18: Кликнете върху „Save“ в горния десен ъгъл. Вашият таг ще изглежда по следния начин:

По този начин успешно създадохте първото си събитие за електронна търговия в GA4!

Важно:

Принципът за създаване на всички събития е сходен на този, който показахме. По тази причина за останалите събития ще покажем кода за Data Layer, както и крайния вид на конфигурацията на тага и тригера.

2. Клик върху продукт (Product/item list clicks)

Конфигурация на DataLayer:

За да измерим кликовете върху даден продукт, трябва да изпратим продукта и неговите атрибути към Data Layer чрез “dataLayer.push” и да подадем ивента 'select_item' заедно с тези данни.

dataLayer.push({
  event: "select_item",
  ecommerce: {
    items: [
    {
      item_id: "",
      item_name: "",
      affiliation: "",
      coupon: "",
      currency: "",
      discount: ,
      index: 0,
      item_brand: "",
      item_category: "",
      item_category2: "",
      item_category3: "",
      item_category4: "",
      item_category5: "",
      item_list_id: "",
      item_list_name: "",
      item_variant: "",
      location_id: "",
      price: ,
      quantity: 
    }
    ]
  }
});

Конфигурация на таг:

След като кодът по-горе бъде изпратен към DataLayer, можете да конфигурирате своя таг в Google Tag Manager, както следва:

Tag type: GA4 Event

Event name: select_item

Event parameter (name – value): ‘items’ – {{Ecommerce Datalayer - GA4}}

Variable type: data layer variable – ‘ecommerce.items’

 

Конфигурация на тригер:

Можете да създадете тригер със следната информация:

Trigger type: Custom event

Trigger condition: event equals ‘select_item’

3. Преглед на продуктови детайли (Product/item detail views)

За да измерим Product Views, трябва да изпратим продукта и неговите атрибути към Data Layer чрез “dataLayer.push” и да подадем ивента „view_item“ заедно с тези данни.

dataLayer.push({
  event: "view_item",
  ecommerce: {
    items: [
    {
      item_id: "",
      item_name: "",
      affiliation: "",
      coupon: "",
      currency: "",
      discount: ,
      index: 0,
      item_brand: "",
      item_category: "",
      item_category2: "",
      item_category3: "",
      item_category4: "",
      item_category5: "",
      item_list_id: "",
      item_list_name: "",
      item_variant: "",
      location_id: "",
      price:,
      quantity: 
    }
    ]
  }
});

Конфигурация на таг:

След като кодът по-горе бъде изпратен към DataLayer, можете да конфигурирате своя таг в Google Tag Manager, както следва:

Tag type: GA4 Event

Event name: view_item

Event parameter (name – value): ‘items’ – {{Ecommerce Datalayer - GA4}}

Variable type: data layer variable – ‘ecommerce.items’

Конфигурация на тригер:

Можете да създадете тригер със следната информация:

  • Trigger type: Custom event
  • Trigger condition: event equals ‘view_item

4. Добавяне в количката (Add to cart)

За да измерим добавянето в количката, трябва да изпратим продукта и неговите атрибути към Data Layer чрез “dataLayer.push” и да подадем ивента 'view_item' заедно с тези данни.

dataLayer.push({
  event: "add_to_cart",
  ecommerce: {
    items: [
    {
      item_id: "",
      item_name: "",
      affiliation: "",
      coupon: "",
      currency: "",
      discount: ,
      index: 0,
      item_brand: "",
      item_category: "",
      item_category2: "",
      item_category3: "",
      item_category4: "",
      item_category5: "",
      item_list_id: "",
      item_list_name: "",
      item_variant: "",
      location_id: "",
      price:,
      quantity: 
    }
    ]
  }
});

Конфигурация на таг:

След като кодът по-горе бъде изпратен към DataLayer, можете да конфигурирате своя маркер на Google Tag Manager, както е показано по-долу.

Tag type: GA4 event

Event name: add_to_cart

Event parameter (name – value): ‘items’ – {{Ecommerce Datalayer - GA4}}

Variable type: data layer variable – ‘ecommerce.items’

Конфигурация на тригер:

Можете да създадете тригер със следната информация:

Trigger type: Custom event

Trigger condition: event equals ‘add_to_cart’

5. Премахване от количката (Remove from cart)

За да измерим събитието премахване от количката, трябва да изпратим продукта и неговите атрибути към Data Layer чрез “dataLayer.push” и да подадем ивента 'remove_from_cart' заедно с тези данни.

dataLayer.push({
  event: "remove_from_cart",
  ecommerce: {
    items: [
    {
      item_id: "",
      item_name: "",
      affiliation: "",
      coupon: "",
      currency: "",
      discount: ,
      index: 0,
      item_brand: "=",
      item_category: "=",
      item_category2: "=",
      item_category3: "=",
      item_category4: "=",
      item_category5: "=",
      item_list_id: "=",
      item_list_name: "=",
      item_variant: "",
      location_id: "",
      price:,
      quantity: 
    }
    ]
  }
});

Конфигурация на таг:

След като кодът по-горе бъде изпратен към DataLayer, можете да конфигурирате своя маркер на Google Tag Manager, както е показано по-долу.

Tag type: GA4 event

Event name: remove_from_cart

Event parameter (name – value): ‘items’ – {{Ecommerce Datalayer - GA4}}

Variable type: data layer variable – ‘ecommerce.items’

Конфигурация на тригер:

Можете да създадете тригер със следната информация:

Trigger type: Custom event

Trigger condition: event equals ‘remove_from_cart’

6. Преглед на промоция (Promotion views/impressions)

За да измерим Promotion views/impressions, трябва да прехвърлим продукта и неговите атрибути към Data Layer чрез “dataLayer.push” и да подадем събитието „view_promotion“ заедно с тези данни.

dataLayer.push({
  event: "view_promotion",
  ecommerce: {
    items: [
    {
      item_id: "",
      item_name: "",
      affiliation: "",
      coupon: "",
      currency: "",
      discount: ,
      index: 0,
      item_brand: "",
      item_category: "",
      item_category2: "",
      item_category3: "",
      item_category4: "",
      item_category5: "",
      item_list_id: "",
      item_list_name: "",
      item variant: "",
      location_id: "",
      price: ,
      quantity: 
    }
    ]
  }
});

Конфигурация на таг:

След като кодът по-горе бъде изпратен към DataLayer, можете да конфигурирате своя маркер на Google Tag Manager, както е показано по-долу.

Tag type: GA4 event

Event name: view_promotion

Event parameter (name – value): ‘items’ – {{Ecommerce Datalayer - GA4}}

Variable type: data layer variable – ‘ecommerce.items’

Конфигурация на тригер: event equals ‘view_promotion’

Конфигурация на тригер:

Можете да създадете тригер със следната информация:

Trigger type: Custom event

Trigger condition: event equals ‘view_promotion’

7. Клик върху промоция (Promotion clicks)

За да измерим кликовете върху различните промоции в сайта, трябва да изпратим продукта и неговите атрибути към Data Layer чрез “dataLayer.push” и да подадем събитието 'select_promotion' заедно с тези данни.

dataLayer.push({
  event: "select_promotion",
  ecommerce: {
    items: [
    {
      item_id: "",
      item_name: "",
      affiliation: "",
      coupon: "",
      currency: "",
      discount:,
      index: 0,
      item_brand: "",
      item_category: "",
      item_category2: "",
      item_category3: "",
      item_category4: "",
      item_category5: "",
      item_list_id: "",
      item_list_name: "",
      item_variant: "",
      location_id: "",
      price: ,
      quantity: 
    }
    ]
  }
});

Конфигурация на таг:

След като кодът по-горе бъде изпратен към DataLayer, можете да конфигурирате своя маркер на Google Tag Manager, както е показано по-долу.

Tag type: GA4 Event

Event name: select_promotion

Event parameter (name – value): ‘items’ – {{Ecommerce Datalayer - GA4}}

Variable type: data layer variable – ‘ecommerce.items’

Конфигурация на тригер:

Можете да създадете тригер със следната информация:

Trigger type: Custom event

Trigger condition: event equals ‘select_promotion’

8. Първа стъпка от чек аут (Checkout)

За да измерим събитието Checkout, трябва да изпратим продукт и неговите атрибути към Data Layer чрез “dataLayer.push” и да подадем събитие 'begin_checkout' заедно с тези данни.

dataLayer.push({
  event: "begin_checkout",
  ecommerce: {
    items: [
    {
      item_id: "",
      item_name: "",
      affiliation: "",
      coupon: "",
      currency: "",
      discount:,
      index: 0,
      item_brand: "",
      item_category: "",
      item_category2: "",
      item_category3: "",
      item_category4: "",
      item_category5: "",
      item_list_id: "",
      item_list_name: "",
      item_variant: "",
      location_id: "",
      price:,
      quantity: 
    }
    ]
  }
});

Конфигурация на таг:

След като горният код бъде изпратен към DataLayer, можете да конфигурирате своя маркер на Google Tag Manager, както е показано по-долу.

Tag type: GA4 event

Event name: begin_checkout

Event parameter (name – value): ‘items’ – {{Ecommerce Datalayer - GA4}}

Variable type: data layer variable – ‘ecommerce.items’

Конфигурация на таг: begin_checkout

Конфигурация на тригер:

Можете да създадете тригер със следната информация:

Trigger type: Custom event

Trigger condition: event equals ‘begin_checkout’

Конфигурация на тригер: begin_checkout’

9. Поръчка (Purchase)

За да измерим покупките в сайта, трябва да изпратим транзакции, продукти и техните атрибути към Data Layer чрез “dataLayer.push” и да подадем събитието "purchase" заедно с тези данни на “Thank you” страницата.

dataLayer.push({
  event: "purchase",
  ecommerce: {
      transaction_id: "",
      affiliation: "",
      value: ,
      tax: ,
      shipping: ,
      currency: "",
      coupon: "",
      items: [
       {
        item_id: "",
        item_name: "",
        affiliation: "",
        coupon: "",
        currency: "",
        discount: ,
        index: 0,
        item_brand: "",
        item_category: "",
        item_category2: "",
        item_category3: "",
        item_category4: "",
        item_category5: "",
        item_list_id: "",
        item_list_name: "",
        item_variant: "",
        location_id: "",
        price: ,
        quantity: 
      }
      ]
 }});

Конфигурация на таг:

След като кодът по-горе бъде изпратен към DataLayer, можете да конфигурирате своя таг в Google Tag Manager, както следва:.

Tag type: GA4 event

Event name: purchase

Event parameter (name – value): ‘items’ – {{Ecommerce Datalayer - GA4}}

Variable type: data layer variable – ‘ecommerce.items’

Конфигурация на таг: purchase

Конфигурация на тригер:

Можете да създадете тригер със следната информация:

Trigger type: Custom event

Trigger condition: event equals ‘purchase’

Конфигурация на тригер: Custom event

10. Връщане на сума (Refunds)

За да измерим възстановяването на дадена сума, трябва да изпратим подробности за транзакцията към Data Layer чрез “dataLayer.push” и да подадем събитие „refund“ заедно с тези данни на “Thank you” страницата.

dataLayer.push({
  event: "refund",
  ecommerce: {
    currency: "",
    transaction_id: "", // Transaction ID. Required for purchases and refunds.
    value: ,
    affiliation: "",
    coupon: "",
    shipping: ,
    tax: ,
    items: [
    {
      item_id: "",
      item_name: "",
      affiliation: "",
      coupon: "",
      currency: "",
      discount: ,
      index: 0,
      item_brand: "",
      item_category: "",
      item_category2: "",
      item_category3: "",
      item_category4: "",
      item_category5: "",
      item_list_id: "",
      item_list_name: "",
      item variant: "",
      location_id: "",
      price: ,
      quantity: 
    }
    ]
  }
});

>Конфигурация на таг:

След като кодът по-горе бъде изпратен към DataLayer, можете да конфигурирате своя маркер на Google Tag Manager, както е показано по-долу.

Tag type: GA4 Event

Event name: refund

Event parameter (name – value): ‘items’ – {{Ecommerce Datalayer - GA4}}

Variable type: data layer variable – ‘ecommerce.items’

Конфигурация на таг: refund

Конфигурация на тригер:

Можете да създадете тригер със следната информация:

Trigger type: Custom event

Trigger condition: event equals ‘refund’

Конфигурация на тригер:  event equals ‘refund’

Обобщение

Коректното отчитане на електронната търговия е част от задълженията на всеки маркетолог на онлайн магазин. С преминаването към Google Analytics 4 през юли 2023, става задължително да сме запознати с новите функционалности на платформата, за да можем лесно да се адаптираме към нея и за да отчитаме коректно потребителското поведение в сайта ни.

Запознайте се и с останалите теми в блога на Netpeak, свързани с преминаването към Google Analytics 4:

1. Основни разлики между Google Analytics 4 (GA4) и Universal Analytics (UA).

2. Първи стъпки при работа с Google Analytics 4.

3. Custom Insight в GA4 - Пълно ръководство.

4. Настройки за проследяване на събития в Google Analytics 4 - бързо, лесно и точно: част I.

5. Настройки за проследяване на събития в Google Analytics 4 - бързо, лесно и точно: част II.

Пожелаваме ви успех с настройването на електронната търговия в Google Analytics 4 чрез Google Tag Manager.

До нови срещи в Netpeak Journal!

    10
    1
    6
    Открихте грешка? Маркирайте я и натиснете Ctrl + Enter.