How to setup Enhanced Ecommerce tracking? (v1.3+)

This article is for users of my Google Tag Manager for WordPress plugin v1.3 or newer. If you are using an older version of my plugin, please consider to upgrade or read the previous version of this article for proper setup.

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 ‘classic’) 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

Universal Analytics VS Classic Analytics tag

  • 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 Analytic tag type set to Universal Analytics

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 “Fire On” 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

  • Open your Universal Analytics pageview tag
  • Scroll down to the More settings section
  • Click on More settings if this section is closed up
  • Find Ecommerce features section, click on it
  • Check Enable Enhanced Ecommerce Features
  • Check Use data layer
  • Save your tag
  • Do this with all of your Analytics tags

Enable Ehnached Ecommerce in a Google Analytics pageview tag

 

Enabling this will activate some of the data collection:

  • Product impressions
  • Product detail impressions
  • Add to cart events
  • Remove from cart events
  • Checkout impressions
  • Checkout options
  • Transaction tracking

Please note that since WooCommerce does not have any internal banner system by default, my 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 setup
  • Select the event: Pageview
  • Select the trigger type: DOM Ready
  • Select All pages from the Fire on section
  • Name the trigger as you wish (for example: ‘PV – DOM Ready – All pages’)
  • Save the new trigger

GTM 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 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 ms 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 pageview data will be recorded for that particular pageview (so not for the whole session).

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

  • Open the tag for editing
  • Scroll down to the Fire On 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

Helper Event to track certain clicks

  • Create a new trigger in your Google Tag Manager setup
  • Select the trigger type: Custom Event
  • Add the following event names: gtm4wp.addProductToCartEEC|gtm4wp.productClickEEC|gtm4wp.removeFromCartEEC|gtm4wp.checkoutOptionEEC
  • Turn on the regex checkbox
  • Name the trigger as you wish (for example: ‘Event – Enhanced Ecom 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.)
  • Scroll down to the More settings section
  • Click on More settings if this section is closed up
  • Find Ecommerce features section, click on it
  • Check Enable Enhanced Ecommerce Features
  • Check Use data layer
  • Add the previously created 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.

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 me so that I can correct everything!