Skip to content

Latest commit

 

History

History
198 lines (154 loc) · 8.28 KB

outbound-link-tracker.md

File metadata and controls

198 lines (154 loc) · 8.28 KB
Raw

outboundLinkTracker

This guide explains what the outboundLinkTracker plugin is and how to integrate it into your analytics.js tracking implementation.

Overview

When a visitor to your site clicks a link that goes to another page on your site, you can usually see this information in Google Analytics because the page being navigated to will typically send its own pageview. However, if a visitor to your site clicks a link that points to an external domain, you'll never know unless you track that click separately.

The outboundLinkTracker plugin automatically detects when links are clicked to sites on different domains and sends an event hit to Google Analytics.

Historically, outbound link tracking has been tricky to implement because most browsers stop executing JavaScript on the current page once a link that requests a new page is clicked. The outboundLinkTracker plugin handles these complications for you.

The following example reports show how you can use the outboundLinkTracker plugin to see what links users are clicking on your site:

Top outbound link clicks by URL:

outbound-link-event-label

Breakdown of click type for a single link:

outbound-link-event-action

Usage

To enable the outboundLinkTracker plugin, run the require command, specify the plugin name 'outboundLinkTracker', and pass in any configuration options (if any) you wish to set:

ga('require', 'outboundLinkTracker', options);

Determining what is an outbound link

By default a link is considered outbound if the hostname of the URL it's pointing to differs from location.hostname. Note that this means links pointing to different subdomains within the same higher-level domain are (by default) still considered outbound. To customize this logic, see shouldTrackOutboundLink in the options section below.

Options

The following table outlines all possible configuration options for the outboundLinkTracker plugin. If any of the options has a default value, the default is explicitly stated:

Name Type Description
events Array A list of events to listen for on links. Since it's possible to navigate to a link without generating a click (e.g. right-clicking generates a contextmenu event), you can customize this option to track additional events.
Default: ['click']
linkSelector string A selector used to identify links to listen for events on.
Default: 'a, area'
shouldTrackOutboundLink Function A function that returns true if the link in question should be considered an outbound link. The function is invoked with the link element as its first argument and a parseUrl utility function (which returns a Location-like object) as its second argument.
Default: 
function shouldTrackOutboundLink(link, parseUrl) {
  var href = link.getAttribute('href') || link.getAttribute('xlink:href');
  var url = parseUrl(href);
  return url.hostname != location.hostname &&
      url.protocol.slice(0, 4) == 'http';
}
fieldsObj Object See the common options guide for the fieldsObj description.
attributePrefix string See the common options guide for the attributePrefix description.
Default: 'ga-'
hitFilter Function See the common options guide for the hitFilter description.

Default field values

The outboundLinkTracker plugin sends hits with the following values. To customize these values, use one of the options described above.

Field Value
hitType 'event'
eventCategory 'Outbound Link'
eventAction event.type
eventLabel link.href

Note: the reference to link in the table above refers to the <a> or <area> element being clicked. The reference to event refers to the event being dispatched by the user interaction.

Methods

The following table lists all methods for the outboundLinkTracker plugin:

Name Description
remove Removes the outboundLinkTracker plugin from the specified tracker, removes all event listeners from the DOM, and restores all modified tasks to their original state prior to the plugin being required.

For details on how analytics.js plugin methods work and how to invoke them, see calling plugin methods in the analytics.js documentation.

Examples

Basic usage

ga('require', 'outboundLinkTracker');
<a href="https://example.com">...</a>

Customizing the link selector

This code only tracks link elements with the js-track-clicks class.

ga('require', 'outboundLinkTracker', {
  linkSelector: '.js-track-clicks'
});
<a class="js-track-clicks" href="https://example.com">...</a>

Customizing what is considered an "outbound" link

This code changes the default logic used to determine if a link is "outbound". It updates the logic to only track links that go to the foo.com and bar.com domains:

ga('require', 'outboundLinkTracker', {
  shouldTrackOutboundLink: function(link, parseUrl) {
    var href = link.getAttribute('href') || link.getAttribute('xlink:href');
    var url = parseUrl(href);
    return /(foo|bar)\.com$/.test(url.hostname);
  }
});

With the above code, clicks on the following link won't be tracked, even though the link is pointing to an external domain:

<a href="https://example.com">...</a>

Tracking right-clicks and middle-clicks

Users don't always click on links with their primary mouse button: sometimes they middle-click to open the link in a background tab or right-click to copy the link address and share it.

To track all types of link clicks, specify the click, auxclick, and contextmenu events in the events option:

ga('require', 'outboundLinkTracker', {
  events: ['click', 'auxclick', 'contextmenu']
});