Introduction

Prerequisites - You must have GTM installed on your ecommerce site to begin. This guide requires website code changes to support the data layer JavaScript object, which usually requires a developer. 

Purpose - This provides a high-level checklist for implementing ecommerce tracking via GA4, GTM, and data layer support. 

Goal - Track the following ecommerce interactions: 

• Product Impression 
• Product Click 
• Product Detail Page 
• Add to Cart 
• Remove from Cart
• Begin Checkout 
• Add Shipping Info 
• Add Payment Info 
• Purchase 

Official Documentation

• GA4 Recommended Events Documentation
• GA4 Required Event Parameters Documentation

Steps

1. Web - Data Layer Support
2. Google Tag Manager 
3. Google Analytics
4. Validation

Web - Data Layer Support

The data layer is a JavaScript object created by the code which installs Google Tag Manager on your site. It is considered best practice to "push" data to that object, making it available for collection by GTM. 

Ecommerce events each have required parameters which must be sent to enable ecommerce reports. Therefore, you should reference the official GA4 Recommended Events Document. 

Example: Add to Cart - we must include all parameters listed as required. The items array is a requirement then each item within that array requires two parameters: "item_name" and "item_id". 

Example continued: add to cart - an item named 'Widget Pro'

window.dataLayer.push({ecommerce: null}); 
window.dataLayer.push({
  'event': 'add_to_cart',
  'ecommerce': {
    'value': 99.99, //number
    'currency': 'USD', //3-letter ISO 4217 format
    'items': [{
      'item_id': 'SKU_3141',
      'item_name': 'Widget Pro'
    }]
  }
});

Use the Google documentation linked above as a reference to implement data layer support for all of the ecommerce interactions enumerated under Goals at the top of this guide.

Google Tag Manager 

In this section you will capture the values that have been provided via data layer in the last step.

Each GTM tag requires the following: 

1. Event Name - to be sent to GA4 for each interaction has been provided below. These event names should be sent verbatim when the tag fires.
2. Parameters - should be assigned via data layer variables. 
3. Triggers - each tags should be configured by "custom event" triggers mapping to data layer events.

Tag Name - GA4 Event Name

1. Product Impression - "view_item_list"
2. Product Click - "select_item"
3. Product Detail Page - "view_item"
4. Add to Cart - "add_to_cart"
5. Remove from Cart - "remove_from_cart"
6. Begin Checkout - "begin_checkout"
7. Add Shipping Info - "add_shipping_info"
8. Add Payment Info - "add_payment_info"
9. Purchase - "purchase"

Example - Add to Cart

Suggested Tag naming convention example: "GA4 - EEC - Add to Cart"  - where "EEC" indicates an Event Tag with Enhance Ecommerce enabled. 

Demonstrated

Trigger - 

Data Layer Variable - 

This section is complete once each event is implemented according to the documented requirements. At this point, you may QA your data layer variables and custom event triggers by viewing the site through Tag Assistant. Final QA instructions are provided at the end of this guide. 

Google Analytics 4

The Monetization report collection will allow you to begin viewing ecommerce data out-of-the box.

If you wish to report on custom parameters being sent by GTM tags, you must configure custom dimensions and/or metrics from the ADMIN section of GA4. Ensure that both Scope and Event parameter match what is sent from you GTM Event Tag.

After configuring these custom definitions, reports on data collected going forward can incorporate the dimensions and metrics. 

Validation

We have three straightforward means of validation:

1. Inspect of the data layer object in your browser

2. Review tags firing through Tag Assistant

3. Ensure all data reached your property via DebugView

Set up

You will need three tabs open to begin -  

After completing the three steps above, open your site through the Google Tag Manger Preview feature (Tag Assistant). This will allow you to open the site in Debug Mode.

Open Tag Assistant through Tag Manager, enter your URL to open the site in debug mode. This will open your site in a second tab. 

Third tab: Open you GA4 Property and navigate: Admin > Property > DebugView. While in Debug Mode, you will be able to view data collected by GA4 through the DebugView: 

At this point, you should have three tabs open:

1. Your site opened through Tag Assistant in Debug Mode

2. Tag Assistant connected to your site 

3. GA4 DebugView  

Validation Process

With your three validation tabs open, click through the site to trigger each of the ecommerce tags. For each tag perform the following QA checks.

1. Browser - open the developer console and enter "window.dataLayer" to inspect the dataLayer object. Find each event and ensure that the data included is valid and events are pushed in the correct order. 

2. Tag Assistant - For each ecommerce data layer event, there should be an event found in Tag Assistant. By clicking on the event in the left column, you can see the tags which were triggered at that time. For each ecommerce interaction there should be a data layer even that triggers the corresponding ecommerce GA4 tag. Ensure that each tag fires as expected and sends the correct parameter values.

3. DebugViewer - Ensure that each event tag triggered in the last step also appears in the timeline here. You can click into each event to see the data included. This data may not be available in the other GA4 reports for 24-48 hours. 

1. 

2. 

3.

This final step proves that ecommerce event data is reaching Google Analytics. After submitting your ecommerce tags through Google Tag Manager it may be a day or more before the standard reports reflect the data collected. 

Your ecommerce implementation is complete!