1

The website includes pages like

  • example.com/category1/product1 and
  • example.com/category2/product1 and
  • example.com/category3/product1

Here, the example.com/category1/product1 is the canonical page; and all other pages are duplicate pages.

The duplicate pages are marked with proper canonical tags using <link rel="canonical" href="example.com/category1/product1"/>

Although, all of these duplicate pages contain the same Google Analytics Code. So are these three pages considered as individual pages in Google Analytics? If yes, then how to configure Google Analytics so that traffic to the all three URLs are consolidated in one single canonical URL?

  • How do you set up your Analytics tracking: ga.js, gtag.js, Google Tag Manager or any other methods? – kgrg Aug 9 at 5:17
  • I am going to use global site tag (gtag.js) – Bhargav Joshi Aug 9 at 16:15
1

You can modify your Google Analytics tracking snippet to use the canonical URL that you specify. Your normal GA tracking snippet should look something like this:

<!-- 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 -->

Google has instructions for modifying the ga('send', 'pageview'); line to specify the URL of the page getting tracked. Their example is ga('send', 'pageview', location.pathname);

This StackOverflow question has the JavaScript to get the canonical URL: document.querySelector("link[rel='canonical']").getAttribute("href");

We can put that together to use the location.pathname unless the canonical exists. We can also use the regular expression /https?:\/\/[^\/]+/i to strip the protocol and host name off the canonical URL.

var path=location.pathname
var canonical=document.querySelector("link[rel='canonical']")
if (canonical) path=canonical.getAttribute('href').replace(/https?:\/\/[^\/]+/i,'')
ga('send', 'pageview', path);

The only other wrinkle is that your canonical needs to be defined before your GA snippet. Otherwise it won't be in the page when the JS looks for it. your final canonical and snippet should look something like this in the <head> section of your pages:

<link rel=canonical href="http://example.com/hello-world">
<!-- 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');
var path=location.pathname
var canonical=document.querySelector("link[rel='canonical']")
if (canonical) path=canonical.getAttribute('href').replace(/https?:\/\/[^\/]+/i,'')
ga('send', 'pageview', path);
</script>
<!-- End Google Analytics -->

This doesn't check to make sure the canonical is on another page on your own site. If you use some external canonical URLs to other sites, you would have to add some more checks to the code.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.