Google Analytics E-commerce Event Setup

Master setting up e-commerce events in GA4 with gtag to track sales, conversions, and user behavior in real time. Learn how to implement accurate product and transaction tracking.

Ceyhun Enki Aksan Entrepreneur, Maker

Sep 14, 2025

Google Analytics E-Commerce Reports and Setup for E-Commerce Events article covers detailed information about Google Analytics e-commerce reports and library versions for the Google Analytics code.

warning

As of July 2023, Universal Analytics (UA) is being replaced by Google Analytics 4 (GA4) property format. After this date, UA properties will no longer be able to process new data. They are expected to become inaccessible by year-end. For details on differences between property formats and other operations, please refer to the article “Universal Analytics (UA) to Google Analytics 4 (GA4)” and you may also request technical support at (https://calendly.com/dnomia/15min).

In this article, we will examine the gtag() parameters we’ll use for e-commerce events in the Global Site Tag¹.

Global Site Tag E-Commerce Events

First, let’s categorize events into engagement and ecommerce according to the gtag event structure².

Engagement

Let’s start with a brief recap. By default, Google Analytics captures the Page View event as an automatically defined engagement event, unless otherwise specified. We can refer to this as a hit. Users of analytics.js will recognize the following code:

ga('send', {
  'hitType': 'pageview',
  'page': '/home'
});

In e-commerce activities, event tracking varies depending on whether the event is related to user interaction or page view. For example, viewing a list page or product detail page is considered an engagement event because it is directly tied to a page view. However, if the user clicks the Add to Cart button, meaning a subsequent action occurs after a page view, that new event is no longer considered an engagement. gtag treats user interaction events as ecommerce events. However, avoid confusion—both types of events will be reflected in our e-commerce reports.

Therefore, let’s provide an example of events that can be used in an e-commerce context and are considered engagement events.

gtag('event', 'view_search_results', {
  'search_term': '<query>'
});

You can send search queries performed on your website to Google Analytics using view_search_results. This event, although not directly under e-commerce events, helps you understand search behavior on your site and enables you to establish relationships with purchase actions. The <query> field represents the search query specified by the user and is also passed as the Event Label. You can associate search results with the view_item_list event used in product listings.

gtag('event', 'view_item_list', {
  "items": [
    {
      "id": "PR123",
      "name": "Basic T-Shirt",
      "list_name": "Search Results",
      "brand": "Google",
      "category": "Apparel/T-Shirts",
      "variant": "Black",
      "list_position": 1,
      "quantity": 1,
      "price": "1000"
    }, {
      "id": "PR987",
      "name": "Black TShirt",
      "list_name": "Search Results",
      "brand": "MyBrand",
      "category": "Apparel/T-Shirts",
      "variant": "Red",
      "list_position": 2,
      "quantity": 1,
      "price": "500"
    }
  ]
});

You must provide either the id or name field in this action definition³. Since the name field may change over time, I recommend that you consistently use the id field and avoid changing it as much as possible. You can view other fields such as list_name and brand under the Product List Performance report.

This report will first provide you with the list_name information. Thus, based on the code above, you’ll see the value Search Results under the Product List Name in the report. When you click on this header, you’ll be able to view data such as product views and clicks for items listed under this list.

I’ll explain why we’re not going into detail about these two actions. With Google Analytics, you can view actions that occur on your website through the Events section under the Realtime report. Of course, both engagement and ecommerce data are included here. Typically, it takes between 15 to 60 seconds for a customized report to load for a specific event. However, real-time data generally appears within 5 to 10 seconds.

When you open the Events report, you’ll first see actions performed by active users. Under the Viewing row, you’ll also see an option alongside Active Users titled Events (Last 30 min). This option will provide you with all actions that occurred on your website within the last 30 minutes.

You can see here that both engagement and ecommerce events are listed under the Event Category. When you click on the ecommerce event, you can view its detailed Event Action and Event Label information.

For view_search_results, it passes the query parameter as the Event Label, while for view_item_list it receives the value (not set) in this field. If you’d like to provide additional information, you can update the code as shown below, so that you can also use the Event Label field for view_item_list.

gtag('event', 'view_item_list', {
  "event_label": '<query>',
  "items": [
    {
      "id": "PR123",
      "name": "Basic T-Shirt",
      "list_name": "Search Results",
      "brand": "Google",
      "category": "Apparel/T-Shirts",
      "variant": "Black",
      "list_position": 1,
      "quantity": 1,
      "price": "1000"
    }, {
      "id": "PR987",
      "name": "Black TShirt",
      "list_name": "Search Results",
      "brand": "MyBrand",
      "category": "Apparel/T-Shirts",
      "variant": "Red",
      "list_position": 2,
      "quantity": 1,
      "price": "500"
    }
  ]
});

With this addition, we can now also associate view_item_list with search queries. Additionally, these event details can now be tracked through the Behavior > Events report.

Now, let’s move on to another topic. In the article titled “Google Analytics E-Commerce Setup and Reports”, I mentioned that we can use gtag with the dataLayer. Let’s now clarify this topic. First, let’s recall the gtag setup code.

    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-59809868-2"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-59809868-2');
    </script>

As can be seen in the first two lines of this code snippet, the function gtag(){dataLayer.push(arguments);} actually pushes the arguments into the dataLayer. The push() is a JavaScript method⁴ that allows us to add a new entry to a array. Thus, the events we send are appended to the dataLayer object. You can view all the event records that have been appended here by typing window.dataLayer or simply dataLayer into your browser’s console area.

However, unlike the way we use dataLayer.push(arguments) in GTM, gtag processes the data differently.

Arguments(3) ["event", "view_item_list", {…}, callee: ƒ, Symbol(Symbol.iterator): ƒ]

For this reason, the ecommerce content we send becomes ineffective. Generally, the confusion that arises between gtag and GTM setups stems from both of them defining the dataLayer⁵. However, dataLayer is not limited to use with GTM. For example, Adobe Analytics also uses dataLayer⁶. Nevertheless, it uses different parameters and object structures compared to GTM.

Now, let’s just briefly recap and move on to gtag e-commerce events.

All additional configurations related to gtag should be implemented after the standard setup code. Let’s create an example right away.

    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-5809868-2"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-59809868-2');

      // Event tracking
      gtag('event', 'view_search_results', {
        'search_term': '<query>'
      });
    </script>

The above order ensures the script runs correctly. If the addition we’re making comes before the function gtag(){dataLayer.push(arguments);} line, we will receive the error Uncaught ReferenceError: gtag is not defined and the information we’re sending will not be processed by gtag.

Since our notifications have been fully addressed, we can now proceed to the installation phase of e-commerce code.

Google Analytics GTAG E-Commerce Events

Product Listing

Earlier, in the introduction section under the Engagement heading, we demonstrated an example of Impression Data. Now, let’s modify that example slightly.

gtag('event', 'view_item_list', {
  items: [{
    id: "P12345",
    name: "Android Warhol T-Shirt",
    brand: "Google",
    category: "Apparel/T-Shirts",
    coupon: "SUMMER_DISCOUNT",
    list_name: "Search Results",
    list_position: 1,
    price: 14.99,
    quantity: 2,
    variant: "Black"
  }]
});

In this example, we slightly modified the format and included only a single product along with the coupon parameter. Among all these parameters, only id or name are required. For the view_item_list event, at least one of these two parameters must be present. The parameters brand, category, coupon, list_name, list_position, price, quantity, and variant are optional. All the information we send via view_item_list appears under the Product List Performance report⁷ ⁸. This event can be used on various pages where product lists are displayed, such as category pages, search results pages, discounted products, recommended products, and landing pages.

Item / Detail View

We can also pass product details from within a list¹. In this case, the action we’ll use is view_item. We must avoid confusing it with the product detail page. Outside of list pages, we can provide the following example for view_item. Assuming that, when a product detail page is viewed, we display the relevant products in a sub-section. Here, we can pass these products using view_item.

gtag('event', 'view_item', {
  items: [{
    id: "P12345",
    name: "Android Warhol T-Shirt",
    brand: "Google",
    category: "Apparel/T-Shirts",
    coupon: "SUMMER_DISCOUNT",
    list_name: "Similar Products",
    list_position: 1,
    price: 14.99,
    quantity: 2,
    variant: "Black"
  }]
});

For the view_item event to work successfully, at least one of the id or name parameters must be defined⁹. All other fields are optional.

Promotions

In e-commerce websites, category banners, product promotion banners, and special text offers can be considered essential elements¹⁰. The view_promotion event allows us to track the performance of these promotions.

gtag('event', 'view_promotion', {
  promotions: [{
    id: 'P_12345',
    name: 'Winter Sale',
    creative_name: 'summer_banner_2',
    creative_slot: 'banner_slot_1'
  }]
});

At least one of the id or name parameters must be defined. The relevant event appears under Marketing > Internal Promotion as Internal Promotion Views.

When a piece of content of a specified type is viewed, we send page-level information via the select_content event. For this event, the event parameters content_type, items, and promotions are used. The items parameter receives product parameters, while the promotions parameter receives promotion parameters. Other event parameters besides items are not required. At least one of the id or name parameters must be present under items. Product information is available under the Product List Performance report.

First, let’s examine the event sent when a product page is viewed.

gtag('event', 'select_content', {
  content_type: "product",
  items: [
    {
      id: "P12345",
      name: "Android Warhol T-Shirt",
      list_name: "Search Results",
      brand: "Google",
      category: "Apparel/T-Shirts",
      coupon: "SUMMER_SALE",
      variant: "Black",
      list_position: 1,
      quantity: 2,
      price: 2
    }
  ]
});

Now, let’s create the event sent when promotion details are displayed. The information sent in this event appears under Marketing > Internal Promotion as Internal Promotion Clicks.

gtag('event', 'select_content', {
  content_type: "product",
  promotions: [
    {
      id: 'P_12345',
      name: 'Summer Sale',
      creative_name: 'summer_banner_2',
      creative_slot: 'banner_slot_1'
    }
  ]
});

The events mentioned above generally represent pre-purchase interactions. Now, we can move on to events related to purchase processes.

Cart and Product Actions

The add_to_cart event indicates that a product has been added to the cart.

gtag('event', 'add_to_cart', {
  currency: 'USD',
  items: [{
    id: "P12345",
    name: "Android Warhol T-Shirt",
    brand: "Google",
    category: "Apparel/T-Shirts",
    coupon: "SUMMER_DISCOUNT",
    list_name: "Search Results",
    list_position: 1,
    price: 14.99,
    quantity: 2,
    variant: "Black"
  }],
  value: 29.98
});

Either the id or name parameter must be specified. Other parameters are optional. The event data is reflected in the Product List Performance and Shopping Behavior Analysis reports.

remove_from_cart is an event that can be used when an item is removed from the cart. This event can be used on the cart page, as well as during the checkout process (if possible). Either the id or name parameter must be specified. Other parameters are optional.

gtag('event', 'remove_from_cart', {
  currency: 'USD',
  items: [{
    id: "P12345",
    name: "Android Warhol T-Shirt",
    brand: "Google",
    category: "Apparel/T-Shirts",
    coupon: "SUMMER_DISCOUNT",
    list_name: "Search Results",
    list_position: 1,
    price: 14.99,
    quantity: 2,
    variant: "Black"
  }],
  value: 29.98
});

If your website features a wish list, favorites, or a similar feature, you can associate the add_to_wishlist event with that feature.

gtag('event', 'add_to_wishlist', {
  currency: 'USD',
  items: [{
    id: "P12345",
    name: "Android Warhol T-Shirt",
    brand: "Google",
    category: "Apparel/T-Shirts",
    coupon: "SUMMER_DISCOUNT",
    list_name: "Search Results",
    list_position: 1,
    price: 14.99,
    quantity: 2,
    variant: "Black"
  }],
  value: 29.98
});

You can track the relevant event under Behavior > Events.

Checkout Steps

Payment steps are used to optimize the shopping journey and enable early detection of potential issues. Therefore, each step of the payment process should be recorded whenever possible.

Payment flows begin with the begin_checkout event.

gtag("event", "begin_checkout", {
  value: 29.98,
  coupon: "SUMMER_DISCOUNT",
  currency: "USD",
  items: [
    {
      id: "P12345",
      name: "Android Warhol T-Shirt",
      list_name: "Search Results",
      brand: "Google",
      category: "Apparel/T-Shirts",
      coupon: "SUMMER_DISCOUNT",
      variant: "Black",
      list_position: 1,
      quantity: 2,
      price: 14.99
    }
  ]
});

The subsequent steps following begin_checkout are communicated via the checkout_progress event. The checkout_step parameter indicates the current step. When the e-commerce feature is enabled, these steps should correspond to those defined under Checkout Labeling. For example, assume the conversion journey consists of five steps: Cart, Shipping, Payment Info, Payment, and Purchase. In this case, the “Shipping” step corresponds to checkout_step: 1, while the “Payment” step corresponds to checkout_step: 3.

gtag("event", "checkout_progress", {
  coupon: "SUMMER_DISCOUNT",
  currency: "USD",
  checkout_option: "Google Pay",
  checkout_step: 1,
  value: 29.98,
  items: [
    {
      id: "P12345",
      name: "Android Warhol T-Shirt",
      brand: "Google",
      category: "Apparel/T-Shirts",
      coupon: "SUMMER_DISCOUNT",
      list_name: "Search Results",
      list_position: 1,
      price: 14.99,
      quantity: 2,
      variant: "Black"
    }
  ]
});

Again, in these events, at least one of the id or name parameters must be specified. The other parameters are optional. If you wish to record selections made during this process (for example, payment method, installment option, etc.), you can use the set_checkout_option event within the relevant payment step.

gtag('event', 'set_checkout_option', {
  checkout_step: 1,
  checkout_option: 'Google Pay',
  value: 3
});

Payment and Return Processes

The payment steps have been completed and the payment has been processed. At this point, the purchase event can be triggered. The purchase event must include all the products purchased within the items object. For each product, at least one of the id or name parameters must be specified. The other parameters are optional.

gtag("event", "purchase", {
  affiliation: "Google online store",
  coupon: "SUMMER_DISCOUNT",
  currency: "USD",
  shipping: 5.55,
  tax: 3.33,
  transaction_id: "T_1",
  value: 28.86,
  items: [
    {
      id: "P12345",
      name: "Android Warhol T-Shirt",
      coupon: "P12345_coupon",
      list_name: "Search Results",
      brand: "Google",
      category: "Apparel/T-Shirts",
      variant: "Black",
      list_position: 3,
      quantity: 1,
      price: 9.99
    },
    {
      id: "P12346",
      name: "Flame challenge TShirt",
      coupon: "P12346_coupon",
      list_name: "Search Results",
      brand: "MyBrand",
      category: "Apparel/T-Shirts",
      variant: "Red",
      list_position: 5,
      quantity: 1,
      price: 9.99
    }
  ]
});

E-commerce reports are generally based on this information. Therefore, I recommend providing as much detailed information as possible at this stage. Normally, this event is associated with page view. However, if an AJAX request is involved, you should associate this event with success.

After a payment, refund/return processes may be applicable for the entire product or order. In such cases, the refund action must be used.

gtag('event', 'refund', {
  coupon: "SUMMER_DISCOUNT",
  currency: "USD",
  shipping: 5.55,
  tax: 3.33,
  transaction_id: "T12345",
  value: 38.84, // (9.99 * 2) + 9.99 + 3.33 + 5.55
  items: [
    {
      id: "P12345",
      coupon: "P12345_coupon",
      name: "Android Warhol T-Shirt",
      list_name: "Search Results",
      brand: "Google",
      category: "Apparel/T-Shirts",
      variant: "Black",
      list_position: 3,
      quantity: 2,
      price: 9.99
    },
    {
      id: "P12346",
      coupon: "P12346_coupon",
      name: "Flame challenge TShirt",
      list_name: "Search Results",
      brand: "MyBrand",
      category: "Apparel/T-Shirts",
      variant: "Red",
      list_position: 5,
      quantity: 1,
      price: 9.99
    }
  ]
});

Acnak, you do not need to provide all of these parameters. Providing only the transaction_id and, based on that transaction, the id or name of at least one of the products purchased under that transaction is sufficient.

gtag('event', 'refund', { "transaction_id": "T12345" })

This code indicates that the entire transaction has been refunded, while the following example will only refund one item.

gtag('event', 'refund', {
  items: [
    {
      id: "P12345",
      quantity: 1,
      price: 9.99
    }
  ]
});

Product-level information related to purchases and returns is available under the Product Performance report.

In the next section of the article, we will examine how these actions can be handled in Google Tag Manager. We will also include a few additional features and provide a ready-to-use GTM setup within the same article.

Member Zone