Analytics for ostr.io
Ostr.io provides lightweight and full-featured visitor's analytics for websites. Our solution fully compatible and works out of the box with Meteor, React, Angular, Backbone, Ember and other front-end JavaScript frameworks.
Why ostr.io analytics?:
- Open Source tracking code;
- Transparent data collection;
- Support for History API (HTML5 History Management);
- Support all JavaScript front-end based frameworks and routings;
- Respect DNT policy;
- Lightweight, less than 2.5KB;
- No DOM changes;
- No heavy CPU tasks;
- No extra scripts loading;
- Fast, all metrics are available in real time;
- Global Runtime Errors tracking - Whenever an error happens during runtime you will be reported to "Events" section. This is super-useful as you never can test your client's code in all imaginable environments, but your website visitors do.
Analytics includes:
- Real-time users;
- Pageviews;
- Sessions;
- Unique users;
- Demographics:
- Country;
- City.
- System:
- Mobile devices;
- Browsers;
- Operating System.
- Behavior:
- Custom events (see below);
- Global Scripts Errors and Exceptions;
- Referrers.
Installation
Installation options:
- Include suggested
script
tag intohead
of your HTML page - The simplest way; - Include code from this repository into main website' script file;
- Install via NPM;
- Install via Atmosphere (Meteor).
To find installation instruction - go to Analytics section and select domain name for which you would like to install visitors metrics. To find "trackingId" click on "Show integration guide" and pick trackingId
(17 symbols).
Script tag:
1<script async defer type="text/javascript" src="https://analytics.ostr.io/trackingId.js"></script>
Meteor:
meteor add ostrio:analytics
Meteor via NPM:
meteor npm install ostrio-analytics --save
NPM:
npm install ostrio-analytics --save
Usage
Constructor new Analytics(trackingId [, auto])
trackingId
{String} - [Required] Website' identifier. To obtaintrackingId
see "Installation" section above;auto
- {Boolean} - [Optional] Default -true
. If set tofalse
all visits and actions have to be tracked with.track()
method, see below.
Script Tag:
1// After including script-tag 2// analytics automatically executes in 'auto' mode, 3// its instance is available in global scope as `OstrioTracker` 4// Example: OstrioTracker.pushEvent(foo, bar);
Meteor:
1import Analytics from 'meteor/ostrio:analytics'; 2const analyticsTracker = new Analytics('trackingId');
Meteor via NPM:
1const analyticsTracker = new (require('ostrio-analytics'))('trackingId');
NPM (CommonJS/RequireJS/Module):
1const analyticsTracker = new (require('ostrio-analytics'))('trackingId');
From this point, you're good to go. All visitor's actions will be collected by ostr.io analytics. For custom events - see below.
analyticsTracker.pushEvent(key, value)
Custom events are useful for tracking certain activity on your website, like clicks, form submits and others user's behaviors.
key
{String} - [Required] Length of the event key must be between 1 and 24 symbols;value
{String} - [Required] Length of the event value must be between 1 and 64 symbols.
If the length of key
or value
is longer than limits, it will be truncated without throwing an exception.
analyticsTracker.track()
Use to manually send tracking info. This method has no arguments.
Other examples
Deep router integration:
1const Analytics = require('ostrio-analytics'); 2const analyticsTracker = new Analytics('trackingId', false); 3 4/*!pesudo code!*/ 5router({ 6 '/'() { 7 analyticsTracker.track(); 8 }, 9 '/two'() { 10 analyticsTracker.track(); 11 }, 12 '/three'() { 13 analyticsTracker.track(); 14 } 15});
Deep History.js Integration
Although "History.js" and "History API" supported out-of-box, you may want to optimize tracking behavior to meet your needs.
1const Analytics = require('ostrio-analytics'); 2const analyticsTracker = new Analytics('trackingId', false); 3 4History.Adapter.bind(window, 'statechange', () => { 5 analyticsTracker.track(); 6});