Konfigurowanie zdarzenia zakupu

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:

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.

Zrzut ekranu z raportem DebugView

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 Google
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:

Zrzut ekranu pokazujący raport Zakupy e-commerce