search signals | SEO the /ha(rd|cker)/ way

Tracking Outbound Clicks

Track External Link Clicks in Google Analytics With Google Tag Manager

Linking out to high quality websites can be an important UX and SEO signal. So understanding how users are interacting with those external links can be helpful.

We’ll want to know:

  • Where users are going
  • How often they’re clicking
  • What pages they’re clicking from
  • The anchor text they’re clicking on

From the data we can take action by:

  • Pruning unclicked links
  • Create new content in the vein of the highly clicked links
  • Update the current article to provide additional clarity

Using GTM for Event Tracking

While you can use jQuery to track the click events, we’ll be using Google Tag Manager because the auto-event tracking feature makes it a fairly simple implementation and future tweaks won’t require engineering cycles or production pushes.

With GTM, all you have to do is add a small bit of code to your pages, and it creates a simple container where you can configure everything from GA to Ads, all through a simple admin panel.

Sign Up and Install the Code

The sign up process is simple and straightforward.

  1. Sign In to Google Tag Manager
  2. Create a Account
  3. Name the Container for your site
  4. Accept the Terms & Conditions
  5. Copy & Paste the GTM code block at the start of the <body> tag on your site
  1. Add a tag to capture all the link clicks
  2. Create a macro to save the anchor text
  3. Add a tag to fire off the Google Analytics Event
  4. Add a rule to capture only the clicks on external links
  5. Save a version and publish

The Link Click Listener tag allows you to capture user click events on all or specific targeted links. What’s really great is you don’t have to add any of your own custom javascript.

When a user clicks on a link that is being listened to, Google Tag Manager fires off a gtm.linkClick event. You can then create tags that wait for the gtm.linkClick event to happen, and perform additional tasks (like the external link tracker tag described below).

note: There are a number of tagging strategies. You should use the one that’s right for your use case, but below is what I typically use on this site.

  • Tag Name: SearchSignals.com » Link Click Listener
  • Tag Type: Link Click Listener
  • Firing Rules
    • SearchSignals.com » All Pages
    • Conditions:
      • {{url hostname}} matches RegEx (ignore case) searchsignals\.com$

The reason I explicitly include my own domain name is I don’t want the events to trigger when I’m developing on my site locally

2. Saving the Anchor Text with a Macro

We’ll want to save the anchor text of the link. There’s no default macro that allows you to get the anchor text of the link, so we’ll create a custom Javascript macro to easily do this.

  • Macro Name: element text
  • Macro Type: Custom JavaScript
  • Custom Javascript:
1
2
3
function () {
  return {{element}}.textContent;
}

The .textContent property is built into most browsers which is nice, but you can always adapt the macro to use innerHTML or innerText depending on your needs. Check out Mozilla’s Developer Network documentation on textContent to understand some of the differences.

The last step is to send the link click event, along with the anchor text and URL, to Google Universal Analytics. We’ll use the GA Event tracking feature to capture all the information.

  • Tag Name: External Link Tracking » GA Universal
  • Tag Type: Google Universal Analytics
  • Web Property ID: Your Google Universal Analytics UA id
  • Event Type: Event
  • Event Tracking Parameters
    • Category: External Links
    • Action: {{element url}}
    • Label: {{element text}}
    • Value: 1
    • Non-Interaction Hit: True
  • Firing Rules
    • Links - External
    • Conditions
      • {{event}} equals gtm.linkClick
      • {{element url}} does not match RegEx (ignore case) ^/[^/]
      • {{element url}} does not match RegEx (ignore case) ^[\w:]*//(www\.)?searchsignals\.com

You can always rename the category and change the order of the label and action if you want to see it differently in the default Google Analytics view. But I find this to be in the common order of usage for my own needs.

The firing rules is where all the magic happens.

The first condition allows this tag to just wait until it sees a link click event, which is the gtm.linkClick event that we were listening for above.

The second condition makes sure that we’re not capturing any relative links that typically looks like href="/some-url-path". However, we don’t want to exclude any href that starts with 2 slashes because those are usually fully qualified absolute URLs that are trying to be protocol relative (typically sites that have both HTTP and HTTPS experiences).

The last condition is to make sure that we don’t include any absolute URLs that belong to the domain we’re on. The regEx is a bit more complex than one would expect but it’s addressing a couple of use cases. Namely, I want to make sure that if have an absolute internal URL with www vs non-www that I capture both cases. Additionally, I want to make sure that if I have to exclude my domain as part of a tracking parameter in an external URL, that I don’t accidently exclude that click from being tracked.

note: If you have both GA Universal and GA Classic running on the same site, you’ll have to create 2 separate External Link Trackers.

Other Helpful Macros

If you have sites that you frequently link out to or have partnerships with, you might want to roll up the click events by domain name. The macro below will allow you to grab just the hostname from the outbound URL.

  • Macro Name: element url hostname
  • Macro Type: Custom Javascript
  • Custom Javascript:
1
2
3
function () {
  return {{element}}.hostname;
}

Caveats

If you have a Google Analytics Premium account, note that this will increase the # of events for you site. So you might want to enable it for a day, measure it … and turn it off if you need to.

References