Upgrading WooCommerce settings for v1.3

This article is for v1.3 or newer release of my Google Tag Manager WordPress plugin. If you are using an older version (v1.2 or older) you please consider to upgrade the plugin first.

Google Tag Manager for WordPress v1.3 comes with some major changes that affects many aspects of your data and GTM settings. In this article I would like to summarize a step by step guide so that your data collection does not get brocken.

1. Update the triggers of your helper event tag(s)

Depending on how you setup your Google Tag Manager container, you will need to update one or more triggers that catch enhanced ecommerce data on several user interaction. The names of the dataLayer events changed so that when someone wants to track classic ecommerce for one GA web property and enhanced ecommerce for another web property, events like add-to-cart can be tracked properly in both classic and enhanced. The new event names of enhanced ecommerce:

  • product list clicks: gtm4wp.productClick => gtm4wp.productClickEEC
  • add to cart clicks: gtm4wp.addProductToCart => gtm4wp.addProductToCartEEC
  • remove from cart clicks: gtm4wp.removeFromCart => gtm4wp.removeFromCartECC
  • order completed: gtm4wp.orderCompleted => gtm4wp.orderCompletedEEC (this event is actually only needed if you place the container code in the footer)

All in all as you can see every event is now ending with “EEC”.

If you followed my previous guide to setup enhanced ecommerce, you will need to open the trigger where you entered the events separated with a pipe character and add EEC to the end of each event like this:

gtm4wp.addProductToCartEEC|gtm4wp.productClickEEC|gtm4wp.removeFromCartEEC

2. Add new dataLayer event to track checkout options

… and one more thing: the new version of my plugin adds support to track checkout options (payment and shipping) which introduces a new dataLayer event so actually you should update this trigger to include gtm4wp.checkoutOptionECC as well:

gtm4wp.addProductToCartEEC|gtm4wp.productClickEEC|gtm4wp.removeFromCartEEC|gtm4wp.checkoutOptionECC

3. Change when your main Google Analyics pageview tag fires

Now that you have updated this trigger (or multiple triggers depending on how you setup this previously), you will need to create a new (if this is not included already):

  • 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 this product, 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.

4. Change the same for your AdWords remarketing tag

If you are using dynamic remarketing, you will need to assign the DOM Ready trigger above to your AdWords Remarketing tag as well. This is needed to include proper data in your remarketing tag on the product list pages.

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).

All in all, you will need to update your main Google Analytics tag as well:

  • 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
  • (publish the new container version)

 

That’s it, you can now upgrade my plugin to the 1.3 (or newer) if you didn’t do this before you landed here 🙂