設定購買事件

本教學課程說明如何在網站上設定 purchase 事件，以便評估使用者購物的時機。本教學課程包含 Analytics (分析) 填入事件資料的維度、指標和報表。如要進一步瞭解電子商務事件，請參閱「評估電子商務」一文。

事前準備

本教學課程假設您已完成下列事項：

此外，您也需要具備下列權限：

網站原始碼存取權
Google Analytics (分析) 帳戶的「編輯者」(或更高層級) 角色

步驟 1：在網站上新增事件

建議您將 purchase 事件放在使用者進行購買的網頁上。舉例來說，您可以將事件加入使用者完成購買時顯示的確認頁面中。本教學課程說明如何將事件加入使用者點擊「購買」按鈕的頁面。

將事件放在 <body> 標記結尾處的 <script> 標記中。只要將事件直接加入 <script> 標記，系統就會在載入網頁時觸發事件。下一節將說明在有人點擊「購買」時如何觸發事件。

<!--
  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>

步驟 2：將活動連結至按鈕

您可以設定 purchase 事件，在有人透過多種方式點選「購買」按鈕時觸發。其中一種方法是將 ID 加進「購買」按鈕，然後在事件監聽器中放入事件代碼。在以下範例中，只有在使用者按下 ID 為 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>

步驟 3：確認您正在收集資料

「DebugView」DebugView報表會顯示網站的即時資料，方便您確認事件設定正確無誤。如要在網頁上啟用偵錯模式，請將下列 debug_mode 參數新增至 config 指令：

<!--
  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>

啟用偵錯模式後，隨著有人使用您的網站，系統就會開始在「DebugView」DebugView報表中填入事件。舉例來說，只要按一下網站上的「購買」按鈕，報表就會填入下列資料。您可以選取事件來查看與事件相關聯的參數、使用者屬性和項目。

DebugView 報表的螢幕截圖

步驟 4：查看電子商務資料

大約 24 小時後，您以 purchase 事件傳送的資料會顯示在報表、探索和 Google Analytics Data API 中。設定 BigQuery Export 時，您也可以在 BigQuery 中存取資料。

「purchase」事件會自動填入各種預先建立的維度和指標，用於報表、探索等。以下是在第一個步驟中，系統會填入 purchase 事件資料的部分維度：

參數	維度	值
`affiliation`	商品關聯	Google 商品網路商店
`currency`	幣別	USD
`discount`	商品折扣金額	2.22
`index`	商品清單位置	0
`item_brand`	商品品牌	Google
`item_category`	商品類別	服飾
`item_id`	項目 ID	SKU_12345
`item_list_id`	商品清單 ID	related_products
`item_list_name`	商品清單名稱	相關產品
`item_name`	項目名稱	Stan and Friends T 恤
`item_variant`	商品子類	綠色
`location_id`	項目位置 ID	ChIJIQBpAG2ahYAR_6128GcTUEo (舊金山的 Google 地點 ID)
`shipping`	運費	歐元
`tax`	稅額	歐元
`transaction_id`	交易 ID	T_12345

除了維度，Google Analytics (分析) 還會填入多項電子商務和收益相關指標。舉例來說，假設使用者一次點選「購買」按鈕，Google Analytics (分析) 會填入下列指標：

「商品收益」指標的值為 $30.03 美元
總收益指標的值為 $30.03 美元
「電子商務購買」指標的值為 1

您可以使用這些維度和指標建立探索和自訂報表，但也可以使用下列預先建立的「電子商務購買」報表查看電子商務資料：

「電子商務購買」報表的螢幕截圖