設定購買事件

本教學課程說明如何在網站上設定 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

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

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