Skip to content
Facebook Twitter Github RSS
Google Tag Manager for WordPress
  • Home
  • FeaturesExpand
    • Basic features of GTM4WP

      You can use many post or page attribute in you Google Tag Manager setup even for custom post types and taxonomies.

      Basic data

      Page / post attributes

      Site search

      User data

      Multisite data

      3rd party data

      Browser attributes

      Device attributes

      Operating system attributes

      Weather conditions

  • SetupExpand
    • Setup advanced GTM4WP features

      Integrate your measurement with WooCommerce, setup Google Analytics 4, Google Ads remarketing or conversion tracking maximizing capabilities.

      WooCommerce related

      Google Analytics 4

      Google Ads – Dynamic Remarketing

      Google Ads – Conversion tracking

      Other setup articles

      Exclude WordPress admins

      Embedded media players

  • DevelopersExpand
    • Information for developers and WP managers

      There are several tools in GTM4WP to support your special needs and to adjust plugin behavior to your website or WooCommerce shop.

      Do you want to contribute with a bugfix or a new feature? Visit the GTM4WP’s GitHub page!

      For Developers

      Actions and filters

      WP themes + Proper ecommerce tracking

      For WP managers

      Setup GTM Environments

      Hard code GTM parameters

  • Blog
  • GDPR
Download
Google Tag Manager for WordPress
Home / GTM4WP For Developers / How to make your WordPress theme compatible with Enhanced Ecommerce tracking

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?
  • Rules of thumb
  • DIV elements around the whole page
  • Implement WooCommerce actions and filters
  • Class names used in standard template tags

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

© 2023 Google Tag Manager for WordPress - Privacy policy

  • WordPress.org plugin page
  • Plugin support
  • Plugin reviews
Cookies are not evil
This website may use cookies to remember your log-in details, to optimize site functionality for your use, and deliver marketing based on your interests.

This does not include collecting any personal data of you. In any case we need to process any of your personal data, we will ask for your specific consent later for sure.

Accepting this message only means that we will be able to analyze site content performance using larger buckets of users and to deliver tailored messages to those user buckets. We will be not able to analyze your activity alone especially not in a way where your name or any personal data of you is attached to this analysis.

Accept Settings
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-*1 yearUsed by the cookie consent manager of this website to remember your choice of cookie usage.
gtm4wp_last_weatherstatusend of user sessionUsed by a plugin of this WordPress website to dump debug related non-personal data about the weather data identified during your site visit.
Advertising
Tracking codes that could be used to tailor our messages based on your interests. This does not mean that we will be able to track your activities alone especially not in a way that would allow us to connect your name or other personal data to your website activities.
Statistical
Tracking of website usage without using any feature that would involve personal data processing either by us or by our tracking vendor. This includes IP address anonymization and disabling features related to interest based advertising.
Save & Accept
  • Home
  • Features
    • Basic features of GTM4WP

      You can use many post or page attribute in you Google Tag Manager setup even for custom post types and taxonomies.

      Basic data

      Page / post attributes

      Site search

      User data

      Multisite data

      3rd party data

      Browser attributes

      Device attributes

      Operating system attributes

      Weather conditions

  • Setup
    • Setup advanced GTM4WP features

      Integrate your measurement with WooCommerce, setup Google Analytics 4, Google Ads remarketing or conversion tracking maximizing capabilities.

      WooCommerce related

      Google Analytics 4

      Google Ads – Dynamic Remarketing

      Google Ads – Conversion tracking

      Other setup articles

      Exclude WordPress admins

      Embedded media players

  • Developers
    • Information for developers and WP managers

      There are several tools in GTM4WP to support your special needs and to adjust plugin behavior to your website or WooCommerce shop.

      Do you want to contribute with a bugfix or a new feature? Visit the GTM4WP’s GitHub page!

      For Developers

      Actions and filters

      WP themes + Proper ecommerce tracking

      For WP managers

      Setup GTM Environments

      Hard code GTM parameters

  • Blog
  • GDPR
Search