设置购买事件

本教程介绍了如何在网站上设置 purchase 事件,以便衡量用户何时进行了购买。本教程介绍了一些维度 指标,以及 Google 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 报告会显示来自您网站的实时数据,以便您 确保正确设置事件要在网页上启用调试模式,请将 将以下 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 报告的屏幕截图

第 4 步:查看电子商务数据

大约 24 小时后,您可通过报告探索Google Analytics Data API,查看与 purchase 事件一同发送的数据。您还可以在设置 BigQuery Export 时,访问 BigQuery 中的数据。

“购买”会自动填充各种预构建的维度 和指标,在报告和探索中使用。通过 下面列举了部分维度填充了来自 purchase 事件:

参数 维度
affiliation 商品关联商户 Google Merchandise Store
currency 币种 USD
discount 商品折扣金额 2.22
index 商品列表位置 0
item_brand 商品品牌 Google
item_category 商品类别 Apparel
item_id 商品 ID SKU_12345
item_list_id 商品列表 ID related_products
item_list_name 商品列表名称 Related Products
item_name 商品名称 Stan and Friends Tee
item_variant 商品款式 green
location_id 商品位置 ID ChIJIQBpAG2ahYAR_6128GcTUEo(旧金山对应的 Google 地点 ID)
shipping 运费 5.99
tax 税额 4.90
transaction_id 交易 ID T_12345

除了维度之外,Google Analytics 还会填充多种与电子商务和收入相关的指标。例如,如果用户点击“购买”按钮一次,Google Analytics 中便会填充以下指标:

  • “商品收入”指标的值为 $30.03
  • 总收入指标的值为 30.03 美元
  • “电子商务购买次数”指标的值为 1

您可以使用这些维度和指标来构建探索和自定义 报告,但您也可以使用以下预构建的电子商务购买 报告来查看电子商务数据:

“电子商务购买”的屏幕截图
报告