https://github.com/springload/springload-analytics.js
Google Analytics event tracking helper
https://github.com/springload/springload-analytics.js
analytics google-analytics javascript
Last synced: 2 months ago
JSON representation
Google Analytics event tracking helper
- Host: GitHub
- URL: https://github.com/springload/springload-analytics.js
- Owner: springload
- Created: 2013-11-18T08:12:24.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2017-08-29T12:52:51.000Z (over 8 years ago)
- Last Synced: 2025-08-12T08:24:13.641Z (6 months ago)
- Topics: analytics, google-analytics, javascript
- Language: JavaScript
- Homepage:
- Size: 25.4 KB
- Stars: 10
- Watchers: 30
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# springload-analytics.js [](https://www.npmjs.com/package/springload-analytics.js)
> Google Analytics event tracking module with support for both classic and universal analytics code.
## Requirements
This requires the async version of the Google Analytics snippet to be loaded in the page. See the tracking code quickstart for more infomation: https://developers.google.com/analytics/devguides/collection/analyticsjs/
## Install
```sh
npm install --save springload-analytics.js
```
### Basic setup
Just add a `data-analytics` attribute to a container with 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:
```javascript
import GA from 'springload-analytics.js';
GA.init();
```
### Override default options
You can override default options by passing an object to the init method:
```javascript
GA.init({
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'
}
});
```
### Custom tracking
For more targeted tracking you can specify a category, action or value by populating the `data-analytics` attribute with pipe (`|`) separated values.
```html
```
### Tracking dynamically
You can track within a JavaScript file by calling the track method:
```javascript
// Specify a label, category and action.
GA.track(label, category, action);
// Specify only a label - will use default category and action.
GA.track(label);
// Specify a label, category, action and value.
GA.track(label, category, action, value);
```
### Setup additional trackable elements on the fly
You can set up additional/alternative trackable elements on the fly by calling `GA.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
Read more
```