Z tego samouczka dowiesz się, jak skonfigurować w witrynie zdarzenie purchase
, które umożliwia pomiar, gdy ktoś dokonuje zakupu. Zawiera on wymiary, dane i raporty, które Analytics wypełni danymi ze zdarzenia. Więcej informacji o zdarzeniach e-commerce znajdziesz w artykule Pomiar e-commerce.
Zanim zaczniesz
W tym samouczku przyjęto założenie, że zostały już przez Ciebie wykonane te czynności:
- utworzenie konta i usługi Google Analytics 4,
- utworzenie na potrzeby witryny strumienia danych z sieci,
- Umieść tag Google Analytics w swojej witrynie.
Zakładamy też, że masz:
- Dostęp do kodu źródłowego witryny
- rolę Edytujący (lub o większych uprawnieniach) na koncie Google Analytics.
Krok 1. Dodaj wydarzenie do swojej witryny
Umieść zdarzenie purchase
na tej stronie w witrynie, na której ktoś dokonuje zakupu. Możesz na przykład dodać zdarzenie na stronie potwierdzenia, która pojawia się, gdy ktoś dokona zakupu. W tym samouczku pokazujemy, jak dodać zdarzenie do strony, na której ktoś klika przycisk „Kup”.
Umieść zdarzenie w tagu <script>
na końcu tagu <body>
.
Umieszczenie zdarzenia bezpośrednio w tagu <script>
powoduje jego uruchomienie podczas wczytywania strony. W następnej sekcji opisujemy, jak wywoływać zdarzenie, gdy ktoś kliknie „Kup”.
<!--
Note: In the following code sample, make sure to
replace "TAG_ID" with your tag ID.
Learn more: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
</head>
<body>
<div>This is where the purchase form would go</div>
<button>Submit</button>
<script>
gtag("event", "purchase", {
transaction_id: "T_12345_1",
value: 30.03,
tax: 4.90,
shipping: 5.99,
currency: "USD",
coupon: "SUMMER_SALE",
items: [
// If someone purchases more than one item,
// you can add those items to the items array
{
item_id: "SKU_12345",
item_name: "Stan and Friends Tee",
affiliation: "Google Merchandise Store",
coupon: "SUMMER_FUN",
discount: 2.22,
index: 0,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Adult",
item_category3: "Shirts",
item_category4: "Crew",
item_category5: "Short sleeve",
item_list_id: "related_products",
item_list_name: "Related Products",
item_variant: "green",
location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
price: 10.01,
quantity: 3
}]
});
</script>
</body>
</html>
Krok 2. Połącz wydarzenie z przyciskiem
Zdarzenie purchase
możesz skonfigurować tak, by uruchamiało się, gdy ktoś kliknie przycisk „Kup” na kilka sposobów. Jednym ze sposobów jest dodanie identyfikatora do przycisku „Kup”, a następnie umieszczenie kodu zdarzenia w odbiorniku. W tym przykładzie zdarzenie jest wysyłane tylko wtedy, gdy ktoś kliknie przycisk o identyfikatorze purchase
.
<!--
Note: In the following code sample, make sure to
replace "TAG_ID" with your tag ID.
Learn more: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
</head>
<body>
<div>This is where the purchase form would go</div>
<button id="purchase">Purchase</button>
<script>
document.getElementById("purchase").addEventListener("click", function () {
gtag("event", "purchase", {
// This purchase event uses a different transaction ID
// from the previous purchase event so Analytics
// doesn't deduplicate the events.
// Learn more: https://support.google.com/analytics/answer/12313109
transaction_id: "T_12345_2",
value: 30.03,
tax: 4.90,
shipping: 5.99,
currency: "USD",
coupon: "SUMMER_SALE",
items: [
{
item_id: "SKU_12345",
item_name: "Stan and Friends Tee",
affiliation: "Google Merchandise Store",
coupon: "SUMMER_FUN",
discount: 2.22,
index: 0,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Adult",
item_category3: "Shirts",
item_category4: "Crew",
item_category5: "Short sleeve",
item_list_id: "related_products",
item_list_name: "Related Products",
item_variant: "green",
location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
price: 10.01,
quantity: 3
}]
});
});
</script>
</body>
</html>
Krok 3. Sprawdź, czy zbierasz dane
Raport DebugView pokazuje dane z Twojej witryny w czasie rzeczywistym, dzięki czemu możesz prawidłowo skonfigurować zdarzenia.
Aby włączyć tryb debugowania na stronie internetowej, dodaj do polecenia config
ten parametr debug_mode
:
<!--
Note: In the following code sample, make sure to
replace "TAG_ID" with your tag ID.
Learn more: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID',{ 'debug_mode': true });
</script>
</head>
<body>
<div>This is where the purchase form would go</div>
<button id="purchase">Purchase</button>
<script>
document.getElementById("purchase").addEventListener("click", function () {
gtag("event", "purchase", {
// This purchase event uses a different transaction ID
// from the previous purchase event so Analytics
// doesn't deduplicate the events.
// Learn more: https://support.google.com/analytics/answer/12313109
transaction_id: "T_12345_3",
value: 30.03,
tax: 4.90,
shipping: 5.99,
currency: "USD",
coupon: "SUMMER_SALE",
items: [
{
item_id: "SKU_12345",
item_name: "Stan and Friends Tee",
affiliation: "Google Merchandise Store",
coupon: "SUMMER_FUN",
discount: 2.22,
index: 0,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Adult",
item_category3: "Shirts",
item_category4: "Crew",
item_category5: "Short sleeve",
item_list_id: "related_products",
item_list_name: "Related Products",
item_variant: "green",
location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
price: 10.01,
quantity: 3
}]
});
});
</script>
</body>
</html>
Gdy włączysz tryb debugowania, w raporcie DebugView zdarzenia zaczną pojawiać się w miarę, jak użytkownicy korzystają z Twojej witryny. Na przykład kliknięcie przycisku „Kup” w witrynie uzupełni raport tymi danymi. Możesz wybrać zdarzenie, aby zobaczyć powiązane z nim parametry, właściwości użytkownika i elementy.
Krok 4. Wyświetl dane e-commerce
Po około 24 godzinach dane wysłane za pomocą zdarzenia purchase
staną się dostępne w raportach, eksploracjach i w interfejsie Google Analytics Data API.
Dostęp do danych w BigQuery możesz też uzyskać podczas konfigurowania funkcji BigQuery Export.
Zdarzenie „zakup” automatycznie wypełni różne gotowe wymiary i dane, które są używane m.in. w raportach i eksploracjach. Oto niektóre wymiary, które w pierwszym kroku są wypełniane danymi ze zdarzenia purchase
:
Parametr | Wymiar | Wartość |
---|---|---|
affiliation |
Powiązanie produktu | Google Merchandise Store |
currency |
Currency (Waluta) | USD |
discount |
Kwota rabatu na produkt | 2,22 |
index |
Pozycja na liście produktów | 0 |
item_brand |
Marka produktu | |
item_category |
Kategoria produktu | Odzież |
item_id |
Identyfikator produktu | SKU_12345 |
item_list_id |
Identyfikator listy produktów | related_products |
item_list_name |
Nazwa listy produktów | Powiązane usługi |
item_name |
Nazwa produktu | Koszulka ze Stanem i przyjaciółmi |
item_variant |
Wersja produktu | zielony |
location_id |
Identyfikator lokalizacji produktu | ChIJIQBpAG2ahYAR_6128GcTUEo (identyfikator Miejsc Google dla San Francisco) |
shipping |
Kwota dostawy | 5,99 EUR |
tax |
Kwota podatku | 4,90 |
transaction_id |
Identyfikator transakcji | T_12345 |
Oprócz wymiarów Google Analytics wypełnia też różne dane e-commerce i związane z przychodami. Jeśli np. użytkownik raz kliknie przycisk „Kup”, w Google Analytics zostaną wypełnione te dane:
- Dane Przychody z produktu mają wartość 30,03 PLN.
- Dane Łączne przychody mają wartość 30,03 PLN.
- Dane Zakupy e-commerce mają wartość 1.
Możesz używać tych wymiarów i danych do tworzenia eksploracji i raportów niestandardowych, ale do przeglądania danych e-commerce możesz też używać tego gotowego raportu Zakupy e-commerce: