Set up a purchase event

Overview

This tutorial shows you how to set up a purchase event on your website so you can measure when someone makes a purchase. The tutorial includes the dimensions, metrics, and reports that Analytics populates with data from the event. To learn more about the ecommerce events, see Measure ecommerce.

Before you begin

This tutorial assumes that you've done the following:

It also assumes that you have the following:

  • Access to your website source code
  • The Editor (or above) role to the Google Analytics account

Step 1: Add the event to your website

You should place the purchase event on the page of your website where someone makes a purchase. For example, you could add the event on the confirmation page that appears when someone makes a purchase. This tutorial shows you how to add the event to a page where someone clicks a "Purchase" button.

Place the event in a <script> tag at the end of the <body> tag. Placing the event directly in the <script> tag triggers the event when the page loads. The next section describes how to trigger the event when someone clicks "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>Submit</button>
    <script>
    gtag("event", "purchase", {
        transaction_id: "T_12345_1",
        affiliation: "Google Merchandise Store",
        value: 25.42,
        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",
          currency: "USD",
          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: 9.99,
          quantity: 1
        }]
    });
    </script>
</body>
</html>

Step 2: Connect the event to a button

You can set up the purchase event so it triggers when someone clicks a "Purchase" button in a few ways. One way is to add an ID to the "Purchase" button and then place the event code in an event listener. In the following example, the event is only sent when someone clicks a button with the 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",
                affiliation: "Google Merchandise Store",
                value: 25.42,
                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",
                  currency: "USD",
                  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: 9.99,
                  quantity: 1
                }]
          });
      });
    </script>
</body>
</html>

Step 3: Verify that you're collecting the data

The DebugView report shows realtime data from your website so you can make sure you're setting up events correctly. To enable debug mode on a web page, add the following debug_mode parameter to the config command:

<!--
  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",
                affiliation: "Google Merchandise Store",
                value: 25.42,
                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",
                  currency: "USD",
                  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: 9.99,
                  quantity: 1
                }]
        });
    });
    </script>
</body>
</html>

Once you enable debug mode, you will start to see events populate the DebugView report as people use your website. For example, clicking the "Purchase" button on your website populates the report with the following data. You can select an event to see the parameters, user properties, and items associated with the event.

A screenshot of the DebugView report

Step 4: See your ecommerce data

After about 24 hours, the data you sent with the purchase event becomes available in your reports, explorations, and Google Analytics Data API. You can also access the data in BigQuery when you set up BigQuery Export.

The "purchase" event automatically populates a variety of pre-built dimensions and metrics, which are used in your reports, explorations, and so on. The following are some of the dimensions that are populated with data from the purchase event in the first step:

Parameter Dimension Value
affiliation Item affiliation Google Merchandise Store
currency Currency USD
discount Item discount amount 2.22
index Item list position 0
item_brand Item brand Google
item_category Item category Apparel
item_id Item ID SKU_12345
item_list_id Item list ID related_products
item_list_name Item list name Related Products
item_name Item name Stan and Friends Tee
item_variant Item variant green
location_id Item location ID ChIJIQBpAG2ahYAR_6128GcTUEo (the Google Place ID for San Francisco)
shipping Shipping amount 5.99
tax Tax amount 4.90
transaction_id Transaction ID T_12345

In addition to the dimensions, Google Analytics populates a number of ecommerce and revenue-related metrics. For example, if a user clicks the "Purchase" button once, then the following metrics are populated in Google Analytics:

  • Item revenue metric has a value of $9.99
  • Total revenue metric has a value of $25.42
  • Ecommerce purchases metric has a value of 1

You can use these dimensions and metrics to build explorations and custom reports, but you can also use the following prebuilt Ecommerce purchases report to see your ecommerce data:

A screenshot of the Ecommerce purchases report