Skip to main

How to set up Enhanced Link Attribution in Google Analytics

Enhanced Link Attribution is an extra feature of Google Analytics, switched off by default.

Its purpose is to let you see which links on your site work well and which ones almost nobody clicks.

Knowing that, you can improve the navigation and usability of the site — which in turn does its position in Google no harm at all.

Setting it up takes three steps:

  1. Enable it in your Google Analytics account, as described in the official documentation.
  2. Change the Google Analytics tracking code on your site — at the very least add the line ga(‘require’, ‘linkid’);, again as described in that documentation.
  3. Give every link you want to track an id with a unique name. Without it Analytics cannot tell exactly which link was clicked.

For the Hugo static site generator we have a ready-made recipe.

Add your Google Analytics property to config.yaml:

googleAnalytics: "UA-123-45"

Create the template file layouts/partials/ga.html holding the standard tracking code:

<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', '{{ .Site.GoogleAnalytics }}', 'auto');
ga('require', 'linkid');
ga('send', 'pageview');
</script>

Include it in your site template immediately after the <body> tag:

{{ partial "ga" }}

Then add to your links the code that builds a unique id (here top-menu is simply a name that makes sense to you for the block the links sit in):

id="top-menu*{{ replace .URL "/" "*" }}"

The result looks roughly like this:

<a href="/contacts/" id="top-menu__contacts_">Contacts</a>