How to make your WordPress theme compatible with Enhanced Ecommerce tracking

This article was created mainly for theme developers to give them a list of important points to consider when developing a WooCommerce enabled theme that is also compatible with the Enhanced Ecommerce implementation of the Google Tag Manager for WordPress plugin.

What is Enhanced Ecommerce?

Enhanced Ecommerce is the next generation ecommerce tracking of Google Analytics. Before this, only transactions at the end of the funnel was being recorded, now we can track interactions on the whole website. Just a few example:

• What products are being shown on what pages
• … and in what positions
• What products are being clicked in those product lists
• How many times does click a user on a cart button?
• How does this compare to the times when the detail page of this product was being shown

Read more about this feature set in the official Google help center.

Rules of thumb

Generally speaking if you keep all the hooks (actions and filters) and HTML classes and IDs from the standard WooCommerce theme files, you are already compatible with my WooCommerce integration. You should check for example Storefront’s code, testing of GTM4WP is done using this theme. It follows all the basic codes of the WooCommerce codes.

If you differ from this in any ways, you will need to check the list below and implement what you omitted during your coding.

DIV elements around the whole page

Some themes surround the whole page with a <div> element to achieve certain goals. Although this is in most cases harmless, it generates some issue with the Google Tag Manager container code.

You should be sure that after the pages has been fully loaded in the browser, the so called noscript part of the Google Tag Manager container code is usually located just after the opening body tag. This must not get moved into a page wide <div> element.

Implement WooCommerce actions and filters

To be able to track all the elements that Enhanced Ecommerce can track, my plugin hooks into several WooCommerce actions. If you forgot to add them to your theme, my plugin won’t work properly. Click on the action/filter names to see where they are being used in the standard WooCommerce template tags:

• woocommerce_before_shop_loop_item: this is normally fired in the content-product.php template file before each product being printed
• woocommerce_after_add_to_cart_button: this action is being fired on product detail pages after the cart button has been printed out. I use this hook to add the necessary code to the page to track add-to-cart clicks
• woocommerce_before_template_part: this action is being used by me in conjunction with the following action
• woocommerce_after_template_part: this action and the ‘before’ pair is being used currently to be able to hook into the product list widgets on the site. Using this I can add additional codes to widgets so that I can track product impressions and clicks on those items.
  Also very important detail is that by default those WooCommerce widgets do not add any class attribute to the product items. Because of this I add the class=”widget-product-item” attribute to each which might conflict with your code if you add classes to widget items as well within your own code
• widget_title: I use this filter to save the title of the product list widgets to pass this string to the Google Analytics reports. Using this you can see in your GA reports where your products were being shown
• woocommerce_cart_item_product: I use this filter in conjunction with the following filter to save some metadata about the product being shown on the cart page
• woocommerce_cart_item_remove_link: I use this filter in conjunction with the previous filter to add product meta data to the remove product links on the cart page. This is needed to be able to properly track remove from cart events in Google Analytics with full product details.
• woocommerce_related_products_args: the related products part of the product detail page uses this filter when applying arguments to the WordPress query. I use this to keep the info that the recent products list is being currently generated so that I can add this info while reporting product impressions and clicks to Google Analytics.
  Unfortunately there is no such filter for the up-sell and cross-sells templates. I added a pull request to the WooCommerce core to solve this issue, it might be included in WooCommerce 2.6 so that I can also report proper list names.
• woocommerce_shortcode_before_<shortcode>_loop where shortcode can be: recent_products, sale_products, best_selling_products, top_rated_products, featured_products, related_products: I use those actions to remember which product lists are being shown on a page using shortcodes. Using this I can report the list name to Google Analytics while sending product impression and click data.
• wp_footer: well, I you do not include this action in your theme
• woocommerce_cart_item_restored: this action is being used to generate an add to cart event if the user decides to restore the product that has been just removed from the cart

Class names used in standard template tags

This plugin hooks into several DOM elements to track clicks and other important events. I use jQuery as all WordPress developers use it and I need to have certain classes and IDs to be present in your theme as well. If you are uncertain where and how to use them, look at the Storefront theme’s code:

• product-quantity: this should be part of the classes on the cart page for the quantity <input> element
• update_cart: this should be the name attribute of the ‘Update cart’ button on the cart page. This and the product-quantity class is needed to properly report cart modification to Google Analytics
• checkout: this should be the name of the form on your checkout page. It is being used to report selected payment and shipping to Google Analytics
• shipping_method: you should surround the shipping method list using an element with an ID set to this. <input type=”radio”…> element should be inside of the wrapper
• payment_methods: you should surround the payment list using an element with a class set to this. <input type=”radio”…> element should be inside of the wrapper
• shop_table + cart: on the cart page the cart product list has to be inside a table using both classes like this: <table class”shop_table cart” … >
• cart_list: this should be the class of the mini cart widget that surrounds the cart items in the widget
• mini_cart_item: this should be one of the classes in the element of each product in the mini cart widget
• product-remove: this should be one of the classes in the element of each product on the cart page
• remove: this should be one of the classes in the remove link element of the mini cart widget and the normal cart page
• single_add_to_cart_button: this should be included in the classes of the cart button on a product detail page
• add_to_cart_button: this should be included in the classes of the cart button on a product list page
• product: this should be included in the classes of the product list wrapper (usually a <ul> element) on a product list page
• use the post_class() WordPress function while listing products
• product-category: if there are product categories listed on a product list page, you should include this class in the link element of the product category list items so that my tracking can omit tracking of product category links as product links