39
votes

I'm a complete beginner with Google Analytics, and I need to know how to set it up so that it can track the number of clicks a link on my website gets?

For example I have a link:

<a href="https://google.com">link</a>

I know I'm supposed to put an onClick event on there somewhere but I don't have any idea how it links to Google Analytics?

Is this the correct Onclick code:

onClick="_gaq.push(['_trackEvent', 'Link', 'Click', 'Banner Advert1']);"
5

5 Answers

40
votes

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>
29
votes

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

21
votes

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.

7
votes

I use this in the footer of every page setup as an event in Google Goals.

Swap out register with the slug for the page path before the success page.

<script>

  window.addEventListener('load',function(){

    if(window.location.pathname =="/register/" )

    {

      ga('send','event','register page','referrer',document.referrer)

    }

  });

</script>

Then this in Admin > Goals

  1. Custom
  2. Goal Description

enter image description here

  1. Goal details

enter image description here

This enables you to track which page URL the linked was clicked on if it resulted in a successful goal completion.

Go to Behavior > Events > Overviews for reporting data.

7
votes

I see that the other answers are referring to the old function: ga(). Which is not gonna work if you are using the newest version of Google Analytics tracking...

Here is an example for event tracking using the newest GA version gtag():

<a href="http://example.com" onclick="gtag('event', 'click', {'event_category': 'Navbar button', 'event_label': 'Navbar blue Download button'});">Download</a>

The example above has the following options:

  • Hit Type (Event | Required): Cannot be changed
  • Event Action (Text | Required): The type of interaction (e.g. 'click')
  • event_Category (Text | Required): Typically the object that was interacted with (e.g. 'Navbar button')
  • event_label (Text | Optional): Useful for categorizing events (e.g. 'Navbar blue Download button')

More details: https://developers.google.com/analytics/devguides/collection/gtagjs/migration#track_events