trak.js – JavaScript Event Tracking API

Posted on Nov 25 2014 - 10:31am by Eric Tompkins

javascript event tracking

trak.js – Universal analytics event tracking API wrapper
Put simply, trak.js is a wrapper for any analytics API. By default it uses Google Universal Analytics but you can override this with the older ga.js or Google Tag Manager if you wish, or you can even add custom event trackers as well, instead of Google Analytics.

Getting the Library

Direct downloads

Minified (~481 B gzipped)
Unminified (~1.7 KB gzipped)

Bower

 

NPM

 

Usage:

Include trak.js in your JavaScript bundle or add it to your HTML page like this:

 

API Reference
There are two main ways to use trak.js, in your js code or as data-* attributes in your markup.

JS implementation:

 

Fires an analytics event

Arguments object: (these are all optional)

category: A string value of the category value to set
action: A string value of the action value to set
label: A string value of the label value to set
value: An integer
nonInteraction: An integer
eventName: A string value used only with Google Tag Manager. Define your GTM event name here

If any property is left undefined, the browser’s default value will be used instead.

 

Example:

Data-* attr implementation

 

Data-* attrs can also define a custom trigger type, instead of click; mouseover, touchstart, focus, blur or any other valid event can be used to trigger a trak event.

Wildcards

page.href: Uses window.location.href

page.title: Uses document.title

link.href: Uses this.href

link.title: Uses this.title

referrer: Uses document.referrer

 

Using data-* attr options with but fire event with js

You can also use data-* attr options but fire events in js. To do this, add the relevant data-trak data and also a data-trakwithjs boolean attribute. This means that the event will only fire when you run it in your js. To run in your js, use the trak.attrEvent method like we have below:

See this in use in the trak demo.

Options

Various default trak.js options can be overridden:

trak.options.clean

Choose whether you’d like to clean the provided category, action and labels

Type: boolean Default: true

trak.options.delimeter

trak.js includes a cleaning method to normalise the arguments that are passed to it. Spaces are converted to an underscore by default but can be overridden by reassigning this value.

Type: string Default: _

trak.options.trackType

Type: string Default: ga

Alternatives:

  • ga : Google Analytics (Universal
  • _gaq : Google Analytics (ga.js) Old version
  • gtm : Google Tag Manager

Use this to change your default tracking provider.

trak.options.additionalTypes

Type: function Default: undefined

Add any other event tracking providers. See below for example:

trak.options.debug

Type: boolean Default: false

Show debug logs in the javascript console

Which tracking API’s are used?

The default implementation uses latest version of Google Analytics (ga.js) but trak.js also supports the older _gaq type or Google Tag Manager.

Browser Compatibility

trak.js has been tested in the following browsers:

  • Chrome
  • Firefox 3+
  • Opera 10+
  • Internet Explorer 8+

Tags: Javascript Event Tracking

About the Author

Eric Tompkins is an Experienced Web Developer and Digital Media Professional. As well as a Professional Photographer and Technical Instructor. You can follow on Twitter @_codemics.

  • Hi Eric, thanks for posting the trak.js info. I notice that the code embeds here are all broken, could you fix them? Also, trak.js was updated today so your readers may like to know about that – have a look at the Github repo to find out more.

    P.S. I created trak.js