flare.js
flare.js, a <1KB unobtrusive event emitter API for Google Universal Analytics. With flare you can easily bind event JSON to a data-*
attribute, or use flare.emit()
to fire flares directly. Flare automatically calls ga('send')
and constructs other properties (and arguments order) so you don't communicate with ga()
directly. IE8+.
Remember to drop in Google Analytics beforehand! See docs for more.
As data-* attribute
Pass in a JSON Object to data-flare
to bind your event descriptors. Flare binds a click
event unless a custom event is specified using data-flare-event=""
:
<!-- defaults to `click` -->
<a href="/promotions" data-flare='{
"category": "KPI sections",
"action": "click",
"label": "Visit the promotions",
"value": 4
}'>Click me</a>
<!-- uses `mouseover` -->
<a href="/promotions" data-flare-event="mouseover" data-flare='{
"category": "KPI sections",
"action": "mouseover",
"label": "Visit the promotions",
"value": 4
}'>Click me</a>
The data-flare-event
gets passed into addEventListener
and attachEvent
, so ensure the event is valid.
As flare parses JSON from the data-*
attribute, you can of course use some of the custom Google Universal Analytics properties such as { 'page': '/my-new-page' }
and { 'nonInteraction': 1 }
:
<a href="/promotions" data-flare='{
"category": "KPI sections",
"action": "click",
"label": "Visit the promotions",
"value": {
"page": "/my-new-page"
}
}'>Click me</a>
flare.emit()
Emit a custom flare to send to Google Universal Analytics:
flare.emit({
category: "KPI sections",
action: "click",
label: "Visit the promotions",
value: 4
});
Then use within your own logic:
<a href="/promotions" class="promotions">Click me</a>
<script>
document
.querySelector('.promotions')
.addEventListener('click', function () {
// emit a flare
flare.emit({
category: "KPI sections",
action: "click",
label: "Visit the promotions",
value: 4
});
}, false);
</script>
Installing with npm
npm install flare.js
Installing with Bower
bower install flare
Manual installation
Ensure you're using the files from the dist
directory (contains compiled production-ready code). Ensure you place the script before the closing </body>
tag.
<body>
<!-- html above -->
<script src="dist/flare.js"></script>
<script>
// flare module available
</script>
</body>
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Gulp.
Release history
- 1.0.0
- Initial release