Google Analytics Helper Examples

Grab or fork the code from abitgone's jQuery Plugins repository.

A Note Regarding the Example Links

This helper script works with Google Analytics, which requires an account. You can sign up for a free account if you don’t already have one.

The the example URLs on this page have been set up to work with my Google Analytics account for abitgone.github.com. If you want to use the example links on this page with your own account, enter your Google Analtyics in the box below and click the 'Use My Analytics Account' button.

This will tell the Google Analytics script to track against your tracking ID, not mine, so you can see the examples show up in your analytics account. You may want to set up a new property in Google Analytics for this purpose.

Basic Usage

The Google Analytics helper has two main uses:

Tracking Events
The helper allows you to track an event on links or other elements by specifing data attributes, helping you track on-page events which are not related to a web page visit, such as interaction with a video or any other user event which does not trigger a page request. More information on event tracking is available on Google’s Event Tracking Guide.
Tracking URLs
The helper allows you to track individual URLs that don’t ordinarily load the Google Analytics scripts. For example, if you wanted to track the downloads of a PDF, you can specify data attributes on the link to the PDF to track the download. More information on URL tracking is available on Google’s Tracking Basics page.

You can use one or both types of tracking on a single link.

Tracking Events

The link we’ll use for our event tracking example is shown below:

<a href="/Path/To/Your/Page" data-gahelper-event="Play" 
                             data-gahelper-event-category="Video"
                             data-gahelper-event-label="/Videos/Category/12345"
                             data-gahelper-event-value="189"
                             data-gahelper-event-noninteraction="false">Test Link</a>

The data attributes map straight to their Google Analytics counterparts:

data-gahelper-event (required) string: The name of the event you’d like to track. Generally speaking, this should be a common definition of the type of user interaction on the element. For example, you might choose Play, Pause and Stop.
data-gahelper-event-category (required) string: The category of events that your event belongs to. This will serve to group the common event definitions you chose above. Using the examples from above, you may wish to group them under the Videos category.
data-gahelper-event-label string: The optional event label is used to further define your event. Continuing with our video example, we’ve used the site-relative URL for the video being requested, /Videos/Category/12345. This parameter can be used to track any additional information for the event you wish to track, and allows multiple similar events on a page to appear as distinct elements in the event tracking report on Google Analytics.
data-gahelper-event-value integer: The optional event value is an integer type which allows you to track arbitrary numeric data against each event that is triggered. It can be used in a range of ways, which are all explained in detail in the Values section of the Google Analytics Event Tracking Guide.
data-gahelper-event-noninteraction true or false: By default, if a user comes to your page, triggers an event and then leaves the page and your website, Google Analytics will not consider that visit to be a bounce. You may, however, want it to ignore events that are tracked. By setting data-gahelper-event-noninteraction to true means that if a single page visit session triggers this event, the visit will still be classed as a bounce.
data-gahelper-preventdefault true or false: Unrelated to Google Analytics tracking, setting this parameter to true will prevent the element’s default action from firing.

As an example, our code above — the equivalent of this test link — will trigger the following Google Analytics tracking code:

_gaq.push(["_trackEvent", "Video", "Play", "/Videos/Category/12345", 189, false);

Tracking URLs

The link we’ll use for our URL tracking example is shown below:

<a href="/Path/To/Your/Document.pdf" data-gahelper-url="/Path/To/Your/Document.pdf">Test Link</a>

The following data-attributes are used for URL tracking:

data-gahelper-url (required) string: The URL you wish to track, which should be site-relative and start with a forward slash.
data-gahelper-preventdefault true or false: Unrelated to Google Analytics tracking, setting this parameter to true will prevent the element’s default action from firing.

As an example, our code above — the equivalent of this test link — will trigger the following Google Analytics tracking code:

_gaq.push(["_trackPageview", "/Path/To/Your/Document.pdf");