ostr.io
Analytics forostr.io provides lightweight and full-featured visitor's analytics for websites. Our solution fully compatible and works out of the box with Meteor, Vue, React, Angular, Backbone, Ember and other front-end JavaScript frameworks.
ToC:
ostr.io analytics?:
Why- 👐 Open Source tracking code;
- 📦 Lightweight, less than 2.8KB;
- 🚀 Fast, all metrics are available in real-time;
- 😎 No DOM changes;
- 😎 No heavy CPU tasks;
- 😎 No extra scripts loading;
- 📡 Utilizes Beacon API when available;
- 🤝 Support for History API (HTML5 History Management);
- 🤝 Support most of JavaScript front-end based frameworks and routings;
- ⚡️ Track Accelerated Mobile Pages (AMP);
- 🛑 Detect and Track AdBlock usage;
- 🔍 Transparent data collection;
- 😎 Respect DNT policy;
- 👨⚖️ Follows latest GDPR recommendations;
- 🙆 Easy opt-out procedure for end-users;
- 🐞 Global Runtime Errors tracking - Whenever an error happens during runtime you will be reported to "Errors" 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;
- Sessions;
- Unique users;
- Pageviews:
- Page title;
- Page URL.
- Demographics:
- Country;
- City.
- System:
- Mobile devices;
- Browsers;
- Operating System.
- Behavior:
- Custom events (see below);
- Referrers.
- Global Scripts Errors and Exceptions:
- Catch all JS-runtime errors and exceptions;
- Browser name and release;
- Operating System name and release;
- Device name and version;
- Script name and line number where the error occurred.
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 "Tracking ID" click on "Show integration guide" and pick {{trackingId}}
(17 symbols).
Script tag:
Meteor via Atmosphere:
meteor add ostrio:analytics
Meteor via NPM:
meteor npm install ostrio-analytics --save
NPM:
npm install ostrio-analytics --save
Usage
new Analytics(trackingId [, auto])
Constructor trackingId
{String} - [Required] Website' identifier. To obtaintrackingId
go to Analytics section and select a domain name;auto
- {Boolean} - [Optional] Default -true
. If set tofalse
all visits and actions have to be tracked with.track()
method, see below.
Script Tag:
// After including script-tag// analytics automatically executes in 'auto' mode,// its instance is available in global scope as `OstrioTracker`// Example: OstrioTracker.pushEvent(foo, bar);
Meteor/ES6:
;const analyticsTracker = 'trackingId';
Meteor/NPM:
const analyticsTracker = new 'trackingId';
NPM (CommonJS/RequireJS/Module):
const analyticsTracker = new 'trackingId';
Using minifed version:
// After adding minified analytics code to your project// In global scope as `OstrioTrackerClass` and `OTC`// as a short (short name was used in initial release,// we keep it for compatibility reasons) // Example:const analyticsTracker = 'trackingId';// Example 2:const analyticsTracker = 'trackingId';// Example 3 (shorthand):const analyticsTracker = 'trackingId';// Example 4 (shorthand):const analyticsTracker = 'trackingId';// Example 5: Initiate class with disabled "auto" tracking// With disabled "auto" tracking you need to use// `.track()` method to track a "visit"const analyticsTracker = 'trackingId' false;;
From this point, you're good to go. All visitor's actions will be collected by ostr.io analytics. For custom events - see below.
.pushEvent(key, value)
method
Custom events are useful for tracking certain activity on your website, like clicks, form submits and others user's behaviors.
key
{String} - [Required] The length of the event key must be between 1 and 24 symbols;value
{String} - [Required] The 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.
Examples:
// Various examples on tracking custom user's actionsanalyticsTracker;analyticsTracker;analyticsTracker; analyticsTracker;analyticsTracker;analyticsTracker;
Buy Now Select product Blue Red Green <!-- Example on tracking form submit --> Checkout
In a similar way using .pushEvent
you can detect and track AdBlock usage and Accelerated Mobile Pages (AMP).
.track()
method
Use to manually send tracking info. This method has no arguments.
Examples:
const Analytics = ;const analyticsTracker = 'trackingId' false; // jQuery or any other similar case:;
.onPushEvent()
method
Use to hook on .pushEvent()
method. Read how to use this method for deep Google Analytics integration.
Examples:
const Analytics = ;const analyticsTracker = 'trackingId'; analyticsTracker; analyticsTracker;
.onTrack()
method
Use to hook on .track()
method and browser navigation. Read how to use this method for deep Google Analytics integration.
Examples:
const Analytics = ;const analyticsTracker = 'trackingId'; analyticsTracker; // Callback will be executed on every browser navigation// or upon calling `.track()` methodanalyticsTracker;
Other examples
Deep router integration:
const Analytics = ;const analyticsTracker = 'trackingId' false; /*!pseudo code!*/;
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.
const Analytics = ;const analyticsTracker = 'trackingId' false; HistoryAdapter;
Google Analytics integration
Using .onTrack()
method and .onPushEvent()
method we can send tracking-data to Google Analytics upon navigation or event.
In your <head>
add Google Analytics as instructed:
const Analytics = ;const analyticsTracker = 'trackingId'; analyticsTracker; analyticsTracker;
Google Tag Manager integration
Using .onTrack()
method and .onPushEvent()
method we can send tracking-data to Google Tag Manager upon navigation or event.
In your <head>
add Google Tag Manager as instructed:
const Analytics = ;const analyticsTracker = 'trackingId' false; analyticsTracker; _appOstrioTracker;
Opt-out for end-users
As our analytics solution fully respects DNT signals, to opt-out end-users need to activate DNT signals in a browser. To find out how to enable DNT and read more about "Do Not Track", visit - All About DNT homepage.