40

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']);"
Flimm
  • 136,138
  • 45
  • 251
  • 267
user3191726
  • 429
  • 1
  • 4
  • 9

5 Answers5

41

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>
geedubb
  • 4,048
  • 4
  • 27
  • 38
  • Okay, so I just add: onClick=”_gaq.push(['_trackEvent', 'Link', 'Click', 'Banner Advert1']);” to the link I want to track and it will show up on GA? – user3191726 Jan 15 '14 at 20:30
  • What are the other options for the Category field? – user3191726 Jan 15 '14 at 20:31
  • Yes - they will show up under your google.com/analytics panel under On the left-hand menu, Behavior / Events – geedubb Jan 15 '14 at 20:33
  • @user3191726 You can use any string you want for all fields depending on your needs – geedubb Jan 15 '14 at 20:34
  • 3
    The problem with this answer is that the page navigation may happen before the event has a chance to get recorded. See [my answer](https://stackoverflow.com/a/50062249/247696). – Flimm Apr 27 '18 at 12:20
  • You should probably now be using gtag(...) rather than ga(...) - see this answer: https://stackoverflow.com/a/50214862/362376 – eAi Apr 08 '20 at 13:08
  • 1
    @eAi yes, indeed things have changed 6 years on ;) – geedubb Apr 08 '20 at 13:48
29

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

AnuragBabaresco
  • 604
  • 8
  • 19
  • As per documentation only first two (button and click - in this example, which are eventCategory and eventAction in documentation) are required. EventLabel and eventValue are not required. – Strabek Jun 22 '16 at 14:50
  • Thanks for pointing that out @Strabek. I think there must have been an update to that. I'll update my post accordingly. – AnuragBabaresco Jun 23 '16 at 18:16
  • What is the function of digit '4' here ? – Osmani Jul 05 '17 at 11:30
21

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.

Community
  • 1
  • 1
Flimm
  • 136,138
  • 45
  • 251
  • 267
  • Does the transport=beacon guarantees delivery then? – Dmitry Jul 18 '18 at 00:22
  • 2
    @Dmitry transport beacon means that the request will still be sent even after the tab is closed or the page is navigated away. Of course, nothing absolutely guarantees delivery, you might have a power cut and the machine might get turned off. – Flimm Jul 18 '18 at 09:31
7

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.

Dev
  • 457
  • 6
  • 18
7

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

Exil
  • 311
  • 2
  • 11
  • 26