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

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

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

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

Стъпка 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“ в менюто отляво.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Стъпка 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, както следва:

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

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

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, както следва:

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

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

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, както е показано по-долу.

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

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

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, както е показано по-долу.

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

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

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, както е показано по-долу.

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

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

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, както е показано по-долу.

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

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

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, както е показано по-долу.

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

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

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, както следва:.

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

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

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, както е показано по-долу.

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

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

Обобщение

Коректното отчитане на електронната търговия е част от задълженията на всеки маркетолог на онлайн магазин. С преминаването към 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!