How to setup Enhanced Ecommerce tracking?

This article is for users of my Google Tag Manager for WordPress plugin v1.6 or newer. If you are using an older version of my plugin, please consider to upgrade.

Enhanced Ecommerce for Universal Analytics is the next generation of e-commerce tracking with lots of new features. If you are new to this please read the introduction article of the Google help first.

Step 0: pre-setup checks

Before you get started please review the following checklist to ensure everything is setup properly on your side:

Please note that you can not use both traditional ecommerce and enhanced ecommerce in your Analytics views. It is a best practice first to create a new web property where you enable enhanced ecommerce to check and learn the new feature set before adding this into your live production web property.

Also note that enabling Enhanced Ecommerce preserves you existing ecommerce data in your Analytics views. Transactions and product data collected using the traditional (or ‘standard’) ecommerce tracking will be available in your new reports as well.

Step 1: enable enhanced ecommerce in plugin settings

  • Open plugin settings page in your WordPress admin area located under Settings / Google Tag Manager
  • Click on the Integrations tab
  • Click on the WooCommerce sub-tab
  • Check the box next to the label Track enhanced e-commerce
  • Click Save changes at the bottom of the screen

Enable Enhanced Ecommerce tracking

Step 2: check the tag type of your Google Analytics main pageview tag

Google Tag Manager Enhanced Ecommerce - Check pageview tag type

  • It may happen that you already upgraded your Analytics web property to Universal Analytics but you are still using the classic tracking in your Google Tag Manager setup
    • Do not worry, classic tracking is still supported, data is being collected using this setup as well
  • Open your Google Analytics pageview tag in Google Tag Manager
  • Check the value of Tag Type
  • If you see Classic Google Analytics here, you have to modify your Google Tag Manager setup first => Go to step 3
  • If you see Universal Analytics here => Go to step 4

Google Tag Manager Enhanced Ecommerce - Check pageview tag type 2

Step 3: upgrade your Google Analytics tags

  • Open a Google Analytics tag in your Google Tag Manager settings
  • Write down every setting you set up
    • Important: changing the tag type will reset every custom settings you made!
  • Change the Tag Type to Universal Analytics
  • Re-apply every setting you made in the past
  • You should do this on each of your Analytics tags

Step 4: deactivate your transaction tag

  • If you are already using classic ecommerce tracking in your Google Tag Manager setup you should already have a tag with Track Type set to Transaction
  • Open this tag
  • Remove every “Firing Triggers” trigger
  • Delete the tag only after some weeks when enhanced ecommerce tracking is working as expected

Step 5: enable Enhanced Ecommerce in your Universal Analytics tags

If you are using a Google Tag Manager variable of type “Google Analytics” to keep GA settings in one place, it is not recommended to turn on enhanced ecommerce in this variable as you may want to track events and other interactions where no enhanced ecommerce data has to be sent. Instead, leave enhanced ecommerce off in your GA variable settings and use the overwrite feature as described below.

  • Open your Universal Analytics pageview tag
  • Enable overriding settings
  • Scroll down to the More settings section
  • Click on More settings if this section is closed up
  • Select “True” in the Ecommerce features section
  • Check Use data layer
  • Save your tag

Google Tag Manager Enhanced Ecommerce: setup pageview tag

Enabling this will activate some of the data collection:

  • Product impressions
  • Product detail impressions
  • Checkout impressions
  • Transaction tracking

Please note that since WooCommerce does not have any internal banner system by default, this plugin does not utilize Internal Promotion tracking of Enhanced Ecommerce. This can change in future versions.

Step 6: create a so called DOM Ready trigger

  • Create a new trigger in your Google Tag Manager container
  • Select the trigger type: Page View – DOM Ready
  • Select All DOM Ready events from the “This trigger fires on” section
  • Name the trigger as you wish (for example: ‘PV – DOM Ready’)
  • Save the new trigger

Google Tag Manager: DOM Ready trigger

So what does “DOM Ready” mean?

When a browser loads a page, there is a special time that is very important for most web programmers: when the document has been loaded but downloading and rendering of images and other design elementns might be still in progress. This is the first time when a programmer can access the whole document. Depending on the size of your website (without images) this usually happens just some milliseconds after the page begins to load.

Why do we need this trigger?

It is needed because of how WordPress and WooCommerce works. To be able to properly report to GA the products showing on certain pages and the positions of those products, we need to wait a bit to send the pageview event to Google Analytics so that my plugin can gather all the necessary details about what was happening on the page.

Will this have any effect on the data collected?

Actually it shouldn’t. Normally, postponing the sending of the pageview data to this DOM Ready event delays communication to Google’s servers just milliseconds. There can be however cases (especially for users with slower internet connections) where the visitor moves on to another page before this DOM Ready event happens. In this case no data will be recorded for that particular pageview.

Step 7: add the DOM Ready trigger to your main GA pageview tag

  • Open the tag for editing
  • Scroll down to the Triggerinng section and open it
  • Remove the All pages element (! important !)
  • Add the newly created DOM Ready trigger
  • Save the tag

Step 8: setup helper click tracking

Google Tag Manager: setup ecommerce events trigger

  • Create a new trigger in your Google Tag Manager setup
  • Select the trigger type: Custom Event
  • Add the following event name value: gtm4wp.addProductToCartEEC|gtm4wp.productClickEEC|gtm4wp.removeFromCartEEC|gtm4wp.checkoutOptionECC|gtm4wp.changeDetailViewEEC
  • Turn on the regex checkbox (!)
  • Name the trigger as you wish (for example: ‘Event – Ecommerce Events’)
  • Save the new trigger
  • Create a new tag
  • Tag Type should be Universal Analytics
  • Track Type should be Event
  • Set values to Event Category, Event Action and optionally Event Label
    • My suggestions:
    • Event Category = Ecommerce helper
    • Event Action = {{Event}}
  • Enable every feature you already enabled in other Analytics tags (like display features, enhanced link attribution, etc.) or select your Google Analytics settings variable if you have created one previously
  • Scroll down to the More settings section
  • Click on More settings if this section is closed up
  • Find Ecommerce features section, click on it
  • Select “True” from the Enable Enhanced Ecommerce Features dropdown
  • Check Use data layer
  • Add the previously created ecommerce event trigger
  • Save your new tag

Note: this tag is going to be a ‘messenger’. The goal of this tag is not to populate Event reports with useful data but to pass additional enhanced ecommerce product data next to your event settings while users interact with your shop.

All done!

At this point you setup everything to track enhanced ecommerce in your WooCommerce store. Enjoy! 🙂

Please note: this feature of the plugin is still in beta. If you find any bugs or issues please contact us so that we can correct everything!