Tracking link clicks with google analytics?

Please note that _gaq.push(..) refers to tracking with the legacy Classic Analytics Web Tracking (ga.js). The new standard Universal Analytics Web Tracking (analytics.js) uses a different methodology like:

ga('send', 'event', 'button', 'click', 'nav buttons', 4);

The first two options cannot be changed, they pass the send option with the hit type event to the ga function .

The next two options are required as well, the last two are optional. They represent:

  • button (string | required) : Category
  • click (string | required) : Action
  • nav buttons (string | not required) : Label
  • 4 (Positive Integer | not required) : Value

More information may be found at : https://developers.google.com/analytics/devguides/collection/analyticsjs/events


The other answers don't take into consideration that the request may not get completed before the page changes, causing the event not to be recorded.

That's the problem with this solution found in other answers:

 <a
    href="http://example.com"
    onclick="ga('send', 'event', {eventAction: 'click', eventCategory: 'Example'})"
 >example</a>

Google Analytics documentation does provide a solution to this:

Tracking outbound links and forms can be tricky because most browsers will stop executing JavaScript on the current page once a new page starts to load. One solution to this problem is to set the transport field to beacon

beacon transport allows data to be sent asynchronously to a server, even after a page was closed.

Add transport: 'beacon', like this:

 <a
    href="http://example.com"
    onclick="ga('send', 'event', {transport: 'beacon', eventAction: 'click', eventCategory: 'Example'})"
 >example</a>

Unfortunately, some browsers don't support beacon, including IE 11 (caniuse). To work around this, you could cancel the page navigation, send the request to Google Analytics, wait for its completion, and then launch the page navigation. Fortunately, all the modern major browsers do support it.


You probably want to use event tracking - this is a simple Javascript function to can fire from the click event on your links. You will need to make sure you have the standard google tracking script on your page too.

From Google Event Tracking Guide

Event Tracking is a method available in the ga.js tracking code that you can use to record user interaction with website elements, such as a Flash-driven menu system. This is accomplished by attaching the method call to the particular UI element you want to track. When used this way, all user activity on such elements is calculated and displayed as Events in the Analytics reporting interface. Additionally, pageview calculations are unaffected by user activity tracked using the Event Tracking method. Finally, Event Tracking employs an object-oriented model that you can use to collect and classify different types of interaction with your web page objects.

Example:

<a href="www.google.com" onclick="_gaq.push(['_trackEvent', 'Google Link', 'Action label', 'Additional info']);">link</a>

UPDATE

The above is for the older version of the API - ga.js. If you are using the newer Universal tracking please refer to the docs. Effectively the data passed is the same as before, however the call is different.

Example for event tracking using the newer API:

<a href="www.google.com" onclick="ga('send', 'event', 'Google Link', 'Action label', 'Action Value');">link</a>