How to use Google Tag Manager to track custom e-commerce events

Author:

Using Google Tag Manager (GTM) to track custom e-commerce events allows you to monitor specific actions on your e-commerce website that are important for your business, such as product views, add-to-cart actions, checkout steps, and purchases. With GTM, you can implement and manage these custom events without needing to modify the site’s code directly. Here’s a step-by-step guide on how to use Google Tag Manager to track custom e-commerce events:

Step 1: Set Up Google Tag Manager on Your Website

Before you can track any custom e-commerce events, you need to have Google Tag Manager set up on your website. If you haven’t already done so, follow the steps below:

  1. Create a Google Tag Manager Account:
  2. Install GTM on Your Website:
    • Copy the GTM container code provided by Google Tag Manager after creating your container.
    • Paste this code into your website’s <head> and <body> sections, as per the GTM instructions.

Step 2: Implement the Data Layer

The data layer is an essential component for tracking custom e-commerce events using GTM. It’s a JavaScript object that stores data related to specific actions on the website, such as product views, purchases, or cart additions. You’ll need to push relevant data to the data layer on your website to ensure that GTM can capture and process it.

Example: Adding Data Layer for E-commerce

Here is an example of a data layer implementation for an e-commerce website:

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

window.dataLayer.push({
'event': 'productView',
'ecommerce': {
'currencyCode': 'USD',
'detail': {
'products': [{
'name': 'Product Name',
'id': '12345',
'price': '29.99',
'category': 'Category Name',
'quantity': 1
}]
}
}
});

In this example:

  • The event key triggers an event called 'productView' that GTM will listen for.
  • The ecommerce object includes all relevant product information, such as name, ID, price, category, and quantity.

You will need to adjust the data layer according to the specific events you want to track (e.g., add to cart, checkout, purchase).

Step 3: Create Custom Tags in Google Tag Manager

Once the data layer is implemented, you can create custom tags in GTM to capture and send this data to various analytics or marketing platforms, such as Google Analytics or Google Ads.

Example: Track Product Views with Google Analytics (GA4)

Let’s walk through the steps to create a tag for tracking product views in Google Analytics 4 (GA4) using GTM.

  1. Create a New Tag in GTM:
    • Go to Google Tag Manager and click on Tags in the left sidebar.
    • Click New to create a new tag.
  2. Configure the Tag:
    • Choose Tag Configuration, then select Google Analytics: GA4 Event.
    • In the Configuration Tag section, select or create a GA4 configuration tag (you’ll need a GA4 property set up in your Google Analytics account).
  3. Define the Event Parameters:
    • Set the Event Name to something descriptive, such as product_view.
    • Under Event Parameters, map the values from the data layer. For example:
      • Parameter Name: currency, Value: {{Currency}} (where {{Currency}} is the variable that captures the currency code from the data layer).
      • Parameter Name: item_name, Value: {{Product Name}} (map product name from the data layer).
      • Add other relevant parameters, such as item_id, price, and quantity.
  4. Set the Trigger:
    • Click on Triggering and select New Trigger.
    • Choose Custom Event as the trigger type.
    • Set the event name to productView (or whatever event name you’ve defined in the data layer).
  5. Save and Publish:
    • Click Save to save your tag.
    • After testing the tag, click Submit and Publish to push the changes live.

Step 4: Set Up Triggers for Other Custom E-commerce Events

Now that you’ve set up tracking for product views, you can repeat similar steps to track other custom e-commerce events such as add-to-cart, begin checkout, and purchase.

Example: Track Add-to-Cart Events

  1. Create Data Layer for Add-to-Cart: Push the add-to-cart event to the data layer:
    javascript
    window.dataLayer.push({
    'event': 'addToCart',
    'ecommerce': {
    'currencyCode': 'USD',
    'add': {
    'products': [{
    'name': 'Product Name',
    'id': '12345',
    'price': '29.99',
    'category': 'Category Name',
    'quantity': 1
    }]
    }
    }
    });
  2. Create a New Tag for Google Analytics:
    • Follow the same process as for the product view event, but set the Event Name to add_to_cart.
    • Under Event Parameters, use the data layer variables for product name, ID, price, and quantity.
  3. Set the Trigger:
    • Create a new Custom Event Trigger for the addToCart event.
  4. Save and Publish:
    • Save the tag and trigger, and then publish the changes.

Example: Track Purchases (Transaction Events)

For purchases, you can track the details of completed transactions using the following data layer structure:

javascript
window.dataLayer.push({
'event': 'purchase',
'ecommerce': {
'currencyCode': 'USD',
'purchase': {
'actionField': {
'id': 'T12345', // Transaction ID
'affiliation': 'Online Store',
'revenue': '29.99',
'coupon': 'SUMMER_SALE'
},
'products': [{
'name': 'Product Name',
'id': '12345',
'price': '29.99',
'quantity': 1
}]
}
}
});

Step 5: Test Your Tags

Testing is crucial to ensure your tags are firing correctly:

  1. Use GTM Preview Mode:
    • Click Preview in GTM and enter your website URL.
    • GTM will open your site in a new tab and display a debug console to show which tags are firing and whether the data is correct.
  2. Use Tag Assistant (Chrome Extension):
    • The Tag Assistant extension can be used to check if the tags are implemented properly.
  3. Verify with Google Analytics:
    • Check the Real-Time reports in Google Analytics to see if events like product_view, add_to_cart, or purchase are being recorded.

Step 6: Publish the Changes

Once you’ve confirmed that the tags are firing correctly, click Submit in GTM to publish the changes to your live website.

Conclusion

By using Google Tag Manager to track custom e-commerce events, you can gain deeper insights into how users interact with your online store and improve your marketing strategies. With proper configuration of the data layer, tags, and triggers, you can track crucial interactions like product views, add-to-cart actions, and completed purchases. This enables you to measure your store’s performance and optimize your campaigns based on real-time data.

Categories: Digital Marketing