Skip to content
Home > Posts > WooCommerce and Google Analytics fix

WooCommerce and Google Analytics fix

March 2, 2020 | , ,

By now, you have probably heard of the issues we are seeing with Google Analytics conflicting with WooCommerce sites. Thankfully, there is a solution!

Wait, what’s the issue again?​​

When we add the Google Analytics script to the site, it conflicts with how the cart loads and/or caches. When an item is added to the cart, and you navigate to the Cart page, it will show as empty. However, if you refresh the page or wait a few seconds before navigating to the cart, it will display as normal.

The fix:

​​Most of us have been using the gtag.js script to add Google Analytics to our sites, either because that is what the customer provided, or because that’s just what we’re used to using.

Here’s an example of the gtag.js script: 

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_MEASUREMENT_ID');
</script>

The gtag.js script is the culprit behind our cart issues. However, there is an alternative script we can use, that does not produce the same issues – analytics.js.

Here’s an example of the analytics.js script: 

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Using the above example, you would replace ‘UA-XXXXX-Y’ with the customer’s UA ID.

So, what’s the difference between gtag.js and analytics.js?​​

Really, not a whole lot (for our purposes and scope). gtag.js is a new version of Google Analytics’ JavaScript capture API, which is meant to streamline tracking across all Google products. The main difference is that it includes data layers for tag management systems, such as Google Tag Manager. However, on the backend it is simply loading in the older analytics.js library. A situation where gtag.js would be needed is if the customer is using a Tag Management System (TMS) or Google Tag Manager (GTM). However, we will know if they are using Google Tag Manager because they will provide two Google Tag Manager scripts to be placed on the site, which will look like this:

GTM <head> code: 

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-TX4L84B');</script>
<!-- End Google Tag Manager -->

GTM <body> code: 

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TX4L84B"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

TL;DR:

Use analytics.js instead of gtag.js.

Solution by Laura Kulas

, , , , ,
Scroll To Top