Analytics.js
============

Google analytics event tracking module with support for both classic and universal analytics code.

$3

Requires the async version of the Google Analytics to be loaded in the page. See the tracking code quickstart for more infomation:
https://developers.google.com/analytics/devguides/collection/gajs/

$3

``sh
npm install --save springload-analytics.js


or

bower install springload-analytics.js

or

git clone https://github.com/springload/Analytics.js analytics
`

$3

Just add a data-analytics attribute to a container containing links you want to track. Every link in that container will be tracked using the default category (uri), default action (click), default label (href), and default value (undefined).

`html



`

Initialise GA once the document is ready.

jQuery example:

`javascript
$(document).ready(function() {
GA.init();
});
`

Vanilla ES6 example:

`javascript
import GA from 'springload-analytics.js';

GA.init();
`

$3

You can override default options by passing an object to the init method. JQuery example below

`javascript
$(document).ready(function() {

var options = {
default_category: "Calculator",
default_action: "Interaction",
default_separator: ":",
default_trackable_attribute: "aly",
default_trackable_event: "mouseenter",
default_trackable_element: "span",
default_label_is_text_content: true
categories: {
buttons: "Buttons"
},
actions: {
slide_left: "Slide left"
}
};

GA.init(options);

});
`

$3

For more targeted tracking you can specify a category, action or value by populating the data-analytics attribute with pipe separated values.

E.g. Use custom category, custom action, custom label and a custom value
`html
Home
`

E.g. Use custom label only
`html
Home
`

E.g. Use custom action only
`html
Next
`

E.g. Use custom value only
`html
Home
`

E.g. Use custom category and custom label only
`html
Show
`

E.g. Use custom category and custom value only
`html
Show
`

E.g. Custom track a group of elements with custom category and action
`html



`

$3

You can track within a JavaScript file by calling the track method:

`javascript
GA.track(label, category, action); // Specify a label, category and action.
GA.track(label); // Specify only a label - will use default category and action.
GA.track(label, category, action, value); // Specify a label, category, action and value.
`

$3

You can set up additional/alternative trackable elements on the fly by calling setupTrackables
`javascript
/**
* Setup additional trackable elements on the fly after initialisation
* @param trackable_attribute data attribute
* @param trackable_event event type. e.g. mouseenter
* @param trackable_element - e.g. span
* @param label_attribute - where the default label is ready from. e.g. data-label
* @param label_is_text_content - whether the node's text content is used as label
*/
GA.setupTrackables("analytics", "mouseenter", "span", "data-label");
`

The markup for this example would be
`html



``