Experts panel

This article has been written and edited by SEO & content specialists and reviewed by field experts.

Data Analyst and Content Marketing Specialist

Helping CEOs With Their SEO | Growing Websites Traffic x10 With 90-Day Content Sprints | Achieved +5M Revenue With SaaS & eCommerce SEO Campaigns | Trained +100 Companies | SEO Capitan & Founder @ Phanum

Everything eCommerce needs to know about implementing the GA4 data layer

Google Analytics 4 (GA4) has its own new way of tracking user behavior. This new way of tracking is fundamental for eCommerce sites because it allows you to measure more meaningful touch points of your customers’ journey: view item, view category, clicked add to cart, etc.

In this article, I will explain to you what a data layer is and how you can add the Google Analytics 4 data layer to your eCommerce site. Also, I will give you insights into what events are important to measure for eCommerce sites. And finally, I will give you code examples of how you can add the most important events for eCommerce to your data layer.

Table of contents

Google Analytics 4, what is it?
What is a data layer?
Why is the data layer important for GA4?
What events to track with the Google Analytics 4 data layer
How to add the GA4 datalayer - the base implementation
How to add relevant GA4 events for eCommerce
   Event #1 Product impressions
   Event #2 Item view
   Event #3 Add to wishlist
   Event #4 Add product to cart
   Event #5 Remove product from cart
   Event #6 Begin checkout
   Event #7 Add shipping info
   Event #8 Add payment info
   Event #9 Purchase
Final thoughts

Google Analytics 4, what is it?

Google Analytics 4 is the latest update of Google Analytics and can be seen as an improvement on Google Universal Analytics. But why is this important for eCommerce? Because the GA4 update will change and improve your analytics a lot!

In the past, Google Analytics tracked user behavior by tracking sessions and page views. While this can tell you something about user behavior, it failed to track every measurement point that is of importance for eCommerce businesses.

With the switch from Google Universal Analytics (UA) to Google Analytics 4, eCommerce websites have now much more opportunities to measure every critical touchpoint of users. This will give you better insights into user interactions and will give you more opportunities to improve your marketing strategy.

Quick reading tip: If you want to know more about Google Analytics 4 you should read our introductory article to Google Analytics 4!

What is a data layer?

Google Analytics uses two data sources – standard data and data from the data layer. Standard data that Google Analytics tracks and analyzes are page views and clicks. With UA you needed to create events via Google Tag Manager to measure these, however, with GA4 basic events are measured by default.

Why is the data layer important for GA4?

With the GA4 update, everything is measured as an event, using the data layer. First, you will have to add the data layer code to your website, for each event, for example, view a product or add to cart. But what and which events are important to track for eCommerce?

What events to track with the Google Analytics 4 data layer

View page, add to cart, view product page, search, etc. All of those are GA4 events. So in GA4, we are measuring in depth what the users do in our webshop.

The most important information and data that eCommerce businesses can gather from their users is information from the “eCommerce funnel”. Gathering information from the different steps in this funnel and analyzing the process can give you the opportunity to understand how well each step of your funnel works. This will help you tremendously in deciding what parts of your webshop to improve or adjust. And Google Analytics 4 focuses on this: giving you the best data for strategic decision-making.

This is the funnel we are talking about and which eCommerce businesses should consider when setting up their Google Analytics 4.

Google Analytics 4 funnel for eCommerce

This funnel starts at the top, where customers see an item list and can ultimately end in a purchase. Not all events are as important for every eCommerce business and it is recommended for organizations implement the events they want to control and optimize.

Some companies only measure product views and purchases, and they are fine with that data. The more complex your marketing gets, probably the more events that you want to measure. It is up to you to decide what to include and what not.

How to add the GA4 data layer – the base implementation

Before we make any data layer implementation we need to set up correctly the GA4 tag in our eCommerce site.

The very first step is to actually have a property within the GA4 environment. A GA4 property means to have a dashboard where all the data will be displayed. We can create multiple properties but in the beginning, we will be fine just with one property. If you have not set a property yet, this is what you will see from your Universal Analytics (UA) admin section:

GA4 Property

Click the button Get started.

GA4 property 2

And then click the button Create property.

With those steps completed, you will have your GA4 property set so all the data you collect will actually land somewhere where you can see it and use it.

Once you have the first property, you get the GA4 tracking code to be installed in your eCommerce.

Go to: Admin > Data streams > Tag > View tag instructions > Install manually

Then you will be shown the code snippet you need to install in your webshop.

GA4 property 3

GA4 property 4

Once you have installed that in your webshop then we can implement the data layer with all the events and product information.

How to add relevant GA4 events for eCommerce

Now that we have the right basic setup with the GA4 property let’s start collecting some data from our site. The events listed below are the recommended ones for the eCommerce funnel mentioned before in this article. To check all the events available for the GA4 you can take a look at the official documentation: Google Analytics 4 Events.

Event #1 Product impression

With view_item_list, you are able to log when the user has been presented with a list of items of a certain category. This can also be applied to other item listings than categories such as a “related products” feature or “cart recommendations”

Google Analytics 4 is able to use the data layer from Universal Analytics. However, I advise to just implement the new data layer structure, specifically for Google Analytics 4. In this article I show you the ‘old’ data layer (for UA) and the ‘new’ data layer (for GA4). Then you can see the differences between them.

Old code to measure product impressions for UA

<script>
dataLayer.push({ ecommerce: null });  
dataLayer.push({
  'ecommerce': {
    'currencyCode': 'EUR',                  
    'impressions': [
     {
       'name': 'Triblend Android T-Shirt',       
       'id': '12345',
       'price': '15.25',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Gray',
       'list': 'Search Results',
       'position': 1
     },
     {
       'name': 'Donut Friday Scented T-Shirt',
       'id': '67890',
       'price': '33.75',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Black',
       'list': 'Search Results',
       'position': 2
     }]
  }
});
</script>

New code to measure product impressions for GA4

dataLayer.push({ ecommerce: null });  
dataLayer.push({
  event: "view_item_list",
  ecommerce: {
    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
    },
    {
      item_id: "SKU_12346",
      item_name: "Google Grey Women's Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      currency: "USD",
      discount: 3.33,
      index: 1,
      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: "gray",
      location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
      price: 20.99,
      promotion_id: "P_12345",
      promotion_name: "Summer Sale",
      quantity: 1
    }]
  }
});

Event #2 Item view

With view_item, you are able to measure how many times item details are viewed. This happens for example when a user clicks on your product from a product category, related products section, or directly from the Google search results. With this event, you will be able to gather data on what categories, brands, or products are most frequently viewed.

In the past you could use the following piece of code for UA, however, now you need to implement a new piece of code for GA4. Otherwise, your Google Analytics account will not be able to gather data.

Old code to measure item views for UA

<script>
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'detail': {
      'actionField': {'list': 'Apparel Gallery'},    // 'detail' actions have an optional list property.
      'products': [{
        'name': 'Triblend Android T-Shirt',         // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray'
       }]
     }
   }
});
</script>

New code to measure item views for GA4

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "view_item",
  ecommerce: {
    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
    }
    ]
  }
});

Event #3 Add to wishlist

With add_to_wishlist, you are able to measure when an item is added to a wish list. This information can be relevant as it can give you insights into which products are added to the wishlist but never end up being purchased. Maybe this is because users are not persuaded to make the final purchase for a certain reason.

In the past (with UA) you couldn’t track users adding a product to their wishlist. However, now you can with GA4, by adding the following piece of code.

Code to measure add to wishlist events for GA4

dataLayer.push({ ecommerce: null });  
dataLayer.push({
  event: "add_to_wishlist",
  ecommerce: {
    currency: "USD",
    value: 7.77,
    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
    }
    ]
  }
});

Event #4 Add product to cart

With add_to_cart you can measure which products are added to the cart. Again this information can be relevant as it gives you information on which products are added, and which products, might be removed afterward.

In the past you could use the following piece of old code for UA, however, now you need to implement a new piece of code for GA4. Otherwise, your Google Analytics account will not be able to gather data.

Old code to measure add-to-cart events for UA

dataLayer.push({ ecommerce: null });  
dataLayer.push({
  'event': 'addToCart',
  'ecommerce': {
    'currencyCode': 'EUR',
    'add': {                                
      'products': [{                        
        'name': 'Triblend Android T-Shirt',
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1
       }]
    }
  }
});

New code to measure add-to-cart events for GA4

dataLayer.push({ ecommerce: null });  
dataLayer.push({
  event: "add_to_cart",
  ecommerce: {
    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
    }
    ]
  }
});

Event #5 Remove from cart

With remove_from_cart you can measure which products are removed from the cart after they have been added. This gives you insights into which products are not good enough to persuade people to buy them.

Old code to measure remove-from-cart events for UA

dataLayer.push({ ecommerce: null }); 
dataLayer.push({
  'event': 'removeFromCart',
  'ecommerce': {
    'remove': {                               
      'products': [{                          
          'name': 'Triblend Android T-Shirt',
          'id': '12345',
          'price': '15.25',
          'brand': 'Google',
          'category': 'Apparel',
          'variant': 'Gray',
          'quantity': 1
      }]
    }
  }
});

New code to measure remove-from-cart events for GA4

dataLayer.push({ ecommerce: null });  
dataLayer.push({
  event: "remove_from_cart",
  ecommerce: {
    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
    }
    ]
  }
});

Event #6 Begin checkout

With begin_checkout you measure the first step in a checkout process. For some webshops, this is also the last step since they will not have a separate shipping or payment checkout page. But the webshops that do have additional checkout steps such as adding shipping or payment info, can find information on that below here.

Old code to measure begin-checkout events for UA

<script>
function onCheckout() {
  dataLayer.push({ ecommerce: null });  .
  dataLayer.push({
    'event': 'checkout',
    'ecommerce': {
      'checkout': {
        'actionField': {'step': 1, 'option': 'Visa'},
        'products': [{
          'name': 'Triblend Android T-Shirt',
          'id': '12345',
          'price': '15.25',
          'brand': 'Google',
          'category': 'Apparel',
          'variant': 'Gray',
          'quantity': 1
       }]
     }
   },
   'eventCallback': function() {
      document.location = 'checkout.html';
   }
  });
}
</script>

New code to measure begin-checkout events for GA4

dataLayer.push({ ecommerce: null });  
dataLayer.push({
  event: "begin_checkout",
  ecommerce: {
    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
    }
    ]
  }
});

Event #7 Add shipping info

With add_shipping_info you can measure how many users have submitted their shipping information. This could be valuable information because it could indicate to you when people want to buy your products, but don’t add their shipping info, for example, when you don’t deliver at their shipping address.

In the past (with UA) you couldn’t track users adding their shipping info during the checkout process. However, now you can with GA4, by adding the following piece of code.

Code to measure add shipping info events for GA4

dataLayer.push({ ecommerce: null });  
dataLayer.push({
  event: "add_shipping_info",
  ecommerce: {
    currency: "USD",
    value: 7.77,
    coupon: "SUMMER_FUN",
    shipping_tier: "Ground",
    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
    }
    ]
  }
});

Event #8 Add payment info

With add_payment_info you can measure how many users have submitted their payment information. This could be valuable information. Because this could indicate to you when people want to buy your products, but don’t add their payment info. For example, this could happen when you don’t offer a lot of payment options.

In the past (with UA) you couldn’t track users adding their payment info during the checkout process. However, now you can with GA4, by adding the following piece of code.

Code to measure add payment info events for GA4

dataLayer.push({ ecommerce: null });  
dataLayer.push({
  event: "add_payment_info",
  ecommerce: {
    currency: "USD",
    value: 7.77,
    coupon: "SUMMER_FUN",
    payment_type: "Credit Card",
    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
    }
    ]
  }
});

Event #9 Purchase

With purchase, you can add purchase data to your Google Analytics and calculate your revenue, how many items you have sold or how much of which brand for example. This can help you a lot with gathering financial data from sales.

Old code to measure purchases for UA

<script>
dataLayer.push({ ecommerce: null });  
dataLayer.push({
  'ecommerce': {
    'purchase': {
      'actionField': {
        'id': 'T12345',                         
        'affiliation': 'Online Store',
        'revenue': '35.43',                     
        'tax':'4.90',
        'shipping': '5.99',
        'coupon': 'SUMMER_SALE'
      },
      'products': [{                            
        'name': 'Triblend Android T-Shirt',     
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1,
        'coupon': ''                           
       },
       {
        'name': 'Donut Friday Scented T-Shirt',
        'id': '67890',
        'price': '33.75',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Black',
        'quantity': 1
       }]
    }
  }
});
</script>

New code to measure purchases for GA4

dataLayer.push({ ecommerce: null });  
dataLayer.push({
  event: "purchase",
  ecommerce: {
      transaction_id: "T_12345",
      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
      },
      {
        item_id: "SKU_12346",
        item_name: "Google Grey Women's Tee",
        affiliation: "Google Merchandise Store",
        coupon: "SUMMER_FUN",
        currency: "USD",
        discount: 3.33,
        index: 1,
        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: "gray",
        location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
        price: 20.99,
        promotion_id: "P_12345",
        promotion_name: "Summer Sale",
        quantity: 1
      }]
  }
});

Final thoughts on adding the GA4 data layer

While we do recommend adding every event from the entire eCommerce funnel, you may opt to only gather data on what is important to your business. For some smaller eCommerce businesses, it will not be necessary to measure everything. This is because the implementation of every event could get time-consuming.

However, we do recommend that every eCommerce business add all the relevant events to their data layer. Especially if you want to make decisions based on data and actual users’ insights.

Did you find this article helpful? Then you might also like our article on how to perform an eCommerce audit to boost your SEO (A 15-step checklist).

Or you might also like our article on the 5 most important schema markup implementations for eCommerce sites.

If you have made it this far through the blog…

Chances are that you are seriously looking to implement Google Analytics 4 (GA4) to optimize your webshop. That’s great we are here for it!

Phanum team

Book a meeting with us, let’s talk about your GA4!

Or learn more about your future SEO Strategist: Jairo Guerrero.

About The Author: Jelle van Santen

Jelle van Santen is a freelance content marketer who boosts innovative B2B startups with smart SEO and creative content strategies. He has master's degrees in marketing and business analytics and enjoys sharing his best insights on SEO, content, analytics, and marketing technology.

More posts by Jelle van Santen

Google Analytics 4 for eCommerce sites:
How to add the GA4 data layer

Google Analytics 4 for eCommerce sites:
How to add the GA4 data layer

Experts panel

Everything eCommerce needs to know about implementing the GA4 data layer

Google Analytics 4, what is it?

What is a data layer?

Why is the data layer important for GA4?

What events to track with the Google Analytics 4 data layer

How to add the GA4 data layer – the base implementation

How to add relevant GA4 events for eCommerce

Event #1 Product impression

Event #2 Item view

Event #3 Add to wishlist

Event #4 Add product to cart

Event #5 Remove from cart

Event #6 Begin checkout

Event #7 Add shipping info

Event #8 Add payment info

Event #9 Purchase

Final thoughts on adding the GA4 data layer

If you have made it this far through the blog…

About The Author: Jelle van Santen

Previous Post eCommerce product page SEO:<br>7 Best Practices to Apply Now

Our Blog

Next Post 4 Reasons why GA4 is great for eCommerce:<br>An introduction to Google Analytics 4

Google Analytics 4 for eCommerce sites:How to add the GA4 data layer

Google Analytics 4 for eCommerce sites:How to add the GA4 data layer

Experts panel

Everything eCommerce needs to know about implementing the GA4 data layer

Google Analytics 4, what is it?

What is a data layer?

Why is the data layer important for GA4?

What events to track with the Google Analytics 4 data layer

How to add the GA4 data layer – the base implementation

How to add relevant GA4 events for eCommerce

Event #1 Product impression

Event #2 Item view

Event #3 Add to wishlist

Event #4 Add product to cart

Event #5 Remove from cart

Event #6 Begin checkout

Event #7 Add shipping info

Event #8 Add payment info

Event #9 Purchase

Final thoughts on adding the GA4 data layer

If you have made it this far through the blog…

About The Author: Jelle van Santen

Previous Post eCommerce product page SEO:<br>7 Best Practices to Apply Now

Our Blog

Next Post 4 Reasons why GA4 is great for eCommerce:<br>An introduction to Google Analytics 4

More recent stories

Google Analytics 4 for eCommerce sites:
How to add the GA4 data layer

Google Analytics 4 for eCommerce sites:
How to add the GA4 data layer