本頁面由 Cloud Translation API 翻譯而成。

設定購買事件

本教學課程說明如何在網站上設定 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 事件，在有人點選「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 報表，瞭解使用者瀏覽您網站的情形。舉例來說，按一下「Purchase」(購買)系統會在報表內填入下列資料。您可以選取事件來查看參數、使用者屬性和項目與事件建立關聯

DebugView 報表的螢幕截圖

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

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

「purchase」事件會自動填入各種預先建立維度和指標，用於報表和探索這裡列出的是系統為當中資料填入的部分維度第一個步驟有 purchase 事件：

參數	維度	值
`affiliation`	項目聯盟	Google 商品網路商店
`currency`	幣別	美元
`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`	項目名稱	史坦與朋友 T 恤
`item_variant`	商品子類	綠色
`location_id`	項目位置 ID	ChIJIQBpAG2ahYAR_6128GcTUEo (舊金山的 Google 地點 ID)
`shipping`	運費	歐元
`tax`	稅額	4.90 美元
`transaction_id`	交易 ID	T_12345

除了維度外，Google Analytics 也會填入多種電子商務資料和收益相關指標舉例來說，如果使用者按下「購買」按鈕一次，系統就會在 Google Analytics 中填入下列指標：

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

您可以使用這些維度和指標建立探索和自訂不過，您還是可以使用以下預先建立的電子商務購買 報表，即可查看電子商務資料：

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