Setting Up the Data Layer to Track “Add to Cart”/”Purchase” Events with GTM and GA4

Objective

To track when a user clicks an Add to Cart button and send product details (e.g., name, ID, price, quantity) into Google Analytics 4, using dataLayer + GTM.

Overview

We’ll do this in 3 parts:

1. Push product data into the dataLayer when a user adds an item to cart
2. Set up a Custom Event trigger in GTM
3. Create a GA4 Event Tag to send the data to GA4

Step 1: Push Product Data to the dataLayer

Your developer (or you) should trigger this code when a user clicks “Add to Cart”:

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({

  event: “add_to_cart”,

  ecommerce: {

    currency: “USD”,

    value: 49.99,

    items: [

      {

        item_name: “T-Shirt”,

        item_id: “TSH123”,

        price: 49.99,

        quantity: 1

      }

    ]

  }

});

What this does:

• “event”: “add_to_cart” – triggers the event GTM will listen to
• ecommerce – contains product data to be passed into GA4

Step 2: Create a Custom Event Trigger in GTM

1. In GTM, go to Triggers
2. Click New
3. Name the trigger: Custom – add_to_cart
4. Trigger Type: Custom Event
5. Event name: add_to_cart
6. Choose: All Custom Events
7. Click Save

Step 3: Create a GA4 Event Tag for Add to Cart

1. Go to Tags → Click New
2. Name the tag: GA4 – add_to_cart
3. Tag Type: Google Analytics: GA4 Event
4. Configuration Tag: Select your existing GA4 config
5. Event Name: add_to_cart
6. Under Event Parameters, add:

Parameter Name	Value
currency	USD (or a variable)
value	{{DLV – ecommerce.value}}
items	{{DLV – ecommerce.items}} (array)

📌 To pass the items array correctly, GA4 expects enhanced ecommerce format. GTM can pass it automatically if you reference the entire ecommerce object.

Step 4: Create Data Layer Variables (Optional)

To pass individual fields (e.g., item_name, value):

1. Go to Variables → New
2. Type: Data Layer Variable
3. Name: DLV – ecommerce.value
4. Data Layer Variable Name: ecommerce.value

Repeat this for:

• ecommerce.items.0.item_name
• ecommerce.items.0.item_id
• ecommerce.items.0.quantity

📌 For nested arrays (like items[0]), GTM cannot access them directly — you’ll need a Custom JavaScript Variable (see SOP #21).

Step 5: Preview and Test

1. Click Preview in GTM
2. Add a product to the cart on your website
3. In Tag Assistant, confirm:
   • The event add_to_cart appears
   • Your GA4 tag fires
   • Parameters like item name, value, and quantity are visible

Step 6: Publish Your Changes

1. Click Submit → Publish
2. Name the version: GA4 – Add to Cart Tracking

Note

• Make sure ecommerce.items is formatted exactly as GA4 expects
• Add item_name, item_id, price, quantity to GA4 reports or custom dimensions
• Use a Custom JavaScript Variable if you want to extract specific item values from the array