GTM Tags & Custom Scripts I Find the Most Useful in My Projects: part two — eCommerce

Table of Contents

ecommerce, ecommerce tracking, gtm, google tag manager, oneivan
In this post I will focus, as the title says, on tracking eCommerce, mainly on Wordpress WooCommerce stores and tell about a few cool tricks when it comes to Facebook Pixel tracking and Google Dynamic Remarketing via GTM.

E-commerce tracking

Notice: Finally, the 2nd part of my GTM series is here! If you haven’t read the first part on tracking contact forms, you can find it here.

In this post I will focus, as the title says, on tracking e-commerce. Since Shopify has pretty good native integration with all main advertising and analytical tools, and since I am not working that much with Magento and other e-commerce platforms — the focus will be on WordPress WooCommerce stores.

Also, I will cover some custom GTM solutions that work on every implementation that follows the official Enhanced Ecommerce documentation by Google. More specifically, I will tell you how to “translate” the Enhanced Ecommerce setup to Facebook Pixel conversion events and parameters.

Finally, Google Analytics 4 is already here, but in my opinion it’s still missing some useful stuff, so I will probably update this post sometime soon! 🙂

The fastest and free way to track Google enhanced eCommerce via GTM in WooCommerce web stores

I have already written about Google Tag Manager for WordPress, and how utterly amazing in what it does. However, besides the fact that it is absolutely free, it integrates seamlessly into WooCommerce.

google tag manager for wordpress, ecommerce, ecommerce tracking, woocommerce

So, if you have the WordPress admin access, setting up the Enhanced Ecommerce tracking would be pretty straightforward and easy. I will cover it here in a few simple steps.

Step 0 — the obvious stuff

Turn on the Enhanced Ecommerce reporting in Google Analytics — this is pretty obvious, but I’m telling it just in case you forgot.

Step 1 — plugin settings

Once you’ve installed the plugin, locate it under the Settings > Google Tag Manager in your WordPress admin panel. To enable the plugin and make it work properly, you will need to enter your GTM container ID and setup a few more things like code placement of a no-script part.

Once you’ve done that, click on the Integration tab, and then WooCommerce sub-tab. Check the box next to track enhanced e-commerce and set the number of products to track in a single batch on pages with product lists (collections). I recommend you to put 10, as a too big of a number may slow down your website.

You can freely play with other options, depending on you store setup and on what things you want to track via your dataLayer. However, don’t forget to click Save after you’re done.

Step 2 — Google Analytics Settings in your GTM

If you’re using Google Analytics Settings variable in your GTM setup, there is one important note here — do not tick the box “enable enhanced ecommerce features” as it may track the same e-commerce actions multiple times when used together with this plugin. Instead, you will override settings in Google Analytics PageView tags, and tick a box to use dataLayer there. Please refer to the images below in order to get a clear idea on how to do this.

ecommerce, gtm, google tag manager, google analytics settings

Enabling this will track: product detail views, first step of the checkout funnel, transactions / orders.

Step 3 — track e-commerce interactions

In order to track interactions such as product clicks, add to cart and similar actions you will need to:

  • Create a new custom event trigger in your Google Tag Manager container.
  • Add the following event name:
gtm4wp.productClickEEC|gtm4wp.addProductToCartEEC|gtm4wp.removeFromCartEEC|gtm4wp.checkoutOptionEEC|gtm4wp.checkoutStepEEC|gtm4wp.changeDetailViewEEC

  • Check the box to use regex matching.
  • Name the trigger as you wish and save it.
ecommerce tracking, gtm, google tag manager

After saving the trigger, you need to create a Google Analytics event tag:

  • Name the event category Ecommerce.
  • Put the event action to {{Event}} — this will dynamically insert the event name from the custom event trigger you’ve created a moment earlier.
  • Event label is not needed.
  • Select your Google Analytics Setting variable and don’t forget to override the settings to enable Enhanced Ecommerce features and dataLayer.
  • Add the previously created custom event trigger and save the tag.


Enabling this tag activates the tracking of: product list clicks, add to cart, remove from cart, product detail views on variable product pages, checkout steps after the first step, selecting checkout options (shipping, payment method).

Step 4 — track product list impression (collection pages)

If you have a lot of products on your collection pages, it is advisable to track product list impressions via a helper tag. In order to properly set it up you need to:

  • Create a new custom event trigger.
  • Add the following event name: gtm4wp.productImpressionEEC
  • Name the trigger as you wish.


After creating the trigger, you need to create a new Google Analytics event tag:

  • Name the event category Ecommerce helper.
  • Put the event action to {{Event}}
  • Event label is not needed.
  • Set non-interaction hit to true in order to ensure that this tag does not influence negatively your bounce rate.
  • Select your Google Analytics Setting variable and again override the settings to enable Enhanced Ecommerce features and dataLayer.
  • Add the previously created trigger and save the tag.


Step 5 (bonus) — track Google Ads Purchase conversion by using Enhanced Ecommerce dataLayer variables

Tracking revenue with Google Ads Purchase conversion tag is quite simple if you’ve implemented Enhanced Ecommerce tracking. The first step is to define new variables: ecommerce.purchase.actionField.revenue and ecommerce.purchase.actionField.id. Save them as Data Layer Variables (use dataLayer version 2). After you’ve done it proceed to:

  • Create new Google Ads Conversion Tracking tag.
  • Put Conversion ID and label as per instructions from your Google Ads account (select Google Tag Manager as implementation method).
  • You can use Enhanced Ecommerce revenue variable to pass conversion values dynamically: {{ecommerce.purchase.actionField.revenue}}
  • Track transaction IDs with variable {{ecommerce.purchase.actionField.id}} — this will prevent any possible conversion duplicates!


Trigger:

Make a test purchase and inspect dataLayer changes. You will notice that Google Tag Manager for WordPress plugin triggers custom dataLayer event gtm4wp.orderCompletedEEC once you complete the purchase. This event can be used to trigger your Google Ads Conversion Tracking tag. In order to use it, you will first need to define it in GTM as a custom event trigger. The process is same as described above, just name your custom event gtm4wp.orderCompletedEEC.

In the case you didn’t implement Enhanced Ecommerce as described in this post (using the plugin), you will need to adjust the trigger to something which may work in your case, i.e. thank you page URL.

ecommerce, google tag manager, google ads purchase conversion, conversion tracking, google ads


How to implement Google Dynamic Remarketing for e-commerce and custom verticals via GTM and WooCommerce

By using Google Ads Dynamic Remarketing setup, you allow Google Ads to collect several more signals from your website in order to show ads to more relevant prospects and increase conversion chances. Those signals include:

  • view product in a product list
  • visiting a product detail page
  • user intention for conversion (i.e. entering the checkout)
  • user conversions


Because of this, Google gathers more robust data about your products and their selling patterns, cross-sell and up-sell opportunities. However, standard Google Dynamic Remarketing requires Merchant Center, and it’s not available in many countries. Therefore, I will also explain how to convert dynamic e-commerce variables that need Merchant Account to another vertical – such as custom, that works fine with a standard data feed.

To start with, you will need Google Tag Manager for WordPress plugin in order to setup the needed dataLayer values (or set it up manually). Go to plugin settings > Integrations > WooCommerce and enable Google Ads Remarketing. Also, you can play with product ID prefix and SKU instead of ID fields, which solely depends on your products, plugin(s) for feed generation and your general marketing setup. Since this post is about tracking, I won’t go into details on how to generate a product feed.

google ads dynamic remarketing, ecommerce, google tag manager

Okay, now that I covered the pre-setup activities – let’s move to Google Tag Manager. The first step is to setup dynamic remarketing variables. Create three new datalayer (type 2) variables with following names:

  • ecomm_prodid – dynamically collects product IDs
  • ecomm_pagetype – dynamically collects page types / categories
  • ecomm_totalvalue – dynamically collects product/cart/checkout/transaction value


After you’ve done with variables, it’s time to create a new Google Ads Remarketing tag. Copy and paste the Conversion ID you got in Google Ads interface, and then select Manually specify custom parameters and enter them as shown on picture below. This tag will track retail dynamic remarketing variables – in which case you need a Merchant Center account to run dynamic ads.

google ads dynamic remarketing, enhanced ecommerce, gtm

But what if you cannot open a Merchant Center account, because it is not supported in your country? The best bet would be to convert retail variables to custom vertical (if your business does not fall in any of these categories).

  • The first step is to create a lookup table that will translate ecomm_pagetype values to match custom business vertical requirements (see on the photo below). Name it Page Type for Custom
  • The second step is to manually specify custom parameters (while creating a remarketing tag) differently than you did in e-commerce example. Your variables should be: dynx_itemid, dynx_pagetype, dynx_totalvalue. Assign the values like on the photo below, and don’t forget to specify google_business_vertical as custom
google ads custom dynamic remarketing, lookup table, google tag manager
google ads dynamic remarketing custom vertical, ecommerce, gtm


How to use Google Enhanced Ecommerce dataLayer for Facebook Pixel Purchase event parameters

This following tutorial is not intended for WooCommerce, since it has native integration with Facebook via their official app. However, while tracking custom CMS web stores, it’s a nice thing to know that you can actually use same dataLayer variables for Enhanced Ecommerce and FB Pixel tracking.

By the way, at the time of writing this blog post, Google has just launched Google Analytics 4 which uses slightly different dataLayer variables than Universal Analytics + Enhanced Ecommerce. However, I’m pretty confident that the logic behind this process will stay same. I will update the tutorial once the GA4 gains more traction.

It’s pretty straightforward to include dataLayer variables as FB Pixel event parameters for ViewContent and Add to Cart events. However, once you have more products in cart – it gets slightly different since Facebook and Google Analytics use different array formats for event parameters.

Simo Ahava came up with an amazing solution:

  • You’ll need to create a custom JavaScript variable
  • Name it {{EECFB API}} or however you want
  • Add the following code:
function() {
  return function(products) {
    if (!Array.isArray(products)) {
      return;
    }
    
    var idList = products.map(function(prod) {
      return !!prod.id && prod.id.toString();
    });
    
    var totalValue = products.reduce(function(acc, cur) {
      return !!cur.price && !!cur.quantity ? acc + (cur.price * cur.quantity) : acc;
    }, 0);
    
    var totalQuantity = products.reduce(function(acc, cur) {
      return !!cur.quantity ? acc + parseInt(cur.quantity) : acc;
    }, 0);
    
    var contentsArray = products.map(function(prod) {
      return {
        id: !!prod.id ? prod.id.toString() : undefined,
        item_price: !!prod.price ? parseFloat(prod.price) : undefined,
        quantity: !!prod.quantity ? parseInt(prod.quantity) : undefined
      };
    });
    
    return {
      content_ids: idList,
      value: totalValue,
      num_items: totalQuantity,
      contents: contentsArray
    };
  };
}


This custom JS variable returns content_ids – array of product IDs, value – the sum of all the product prices multiplied by their respective quantities, num_items – the sum of all quantities in the array, contents – The products array converted to the format Facebook requires.

  • Create dataLayer variable – ecommerce.purchase.products, which will be used to get reference to Enhanced Ecommerce products. Finally, write your Pixel Purchase event via custom HTML tag like this:
<script>
  (function() {
    // Get reference to the Enhanced Ecommerce products
	var prods = {{ecommerce.purchase.products}};
	
	// Poll the custom Facebook API with this array
	var fbObj = {{EECFB API}}(prods);
	
	// Create the FB pixel call
	if (typeof window.fbq === 'function') {
	  window.fbq('track', 'Purchase', {
        value: fbObj.value,
        content_ids: fbObj.content_ids,
        contents: fbObj.contents,
        num_items: fbObj.num_items
	  });
	}
  })();
</script>

To sum it up: “What you’re creating here is a helper function that automatically chews up your Enhanced Ecommerce products and spits out the values in a format required by the Facebook pixel.” – Simo Ahava

To sum it up

I will try to keep this post up-to-date with the latest GTM tricks as I find and try them on my projects. Also, since GA4 is already out – this post will be updated in the near future to match the new dataLayer / tag requirements.

If you want to find out more about lead / contact form tracking — take a look here. Also, if you have some cool examples of GTM e-commerce tracking or want me to further get into specific use-cases or help you out with tracking — just let me know!

Share on linkedin
Share on twitter
Share on reddit
Share on xing
Share on telegram
Share on facebook
Share on pocket
Share on whatsapp
Share on email