ember-analytic-sauce
[Short description of the addon.]
Compatibility
- Ember.js v3.28 or above
- Ember CLI v3.28 or above
- Node.js v14 or above
Installation
ember install ember-analytic-sauce
Config
This application has a few config options you can set in your config/environment.js
file
/// ...
ENV['analytics-sauce'] = {
apiUrl: 'https://analytics.sauce.construction',
environments: ['development', 'staging', 'production'],
debug: true,
};
name | type | description |
---|---|---|
apiUrl | string | The analytics api to send requests to |
environments | array | Array of environments to send analytics |
debug | true | If set to true analytics data will be logged to the console |
Usage
Track app views
Update your app/routes/application.js
to track each time your user hits any route in the app
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
export default class ApplicationRoute extends Route {
// Services
@service() analytics;
@service() router;
// Methods
constructor() {
super(...arguments);
// Setup event to track views on route change
// This event fires our view request on every route change
this.router.on('routeDidChange', (/*transition*/) => {
// get URL for path property
const path = this.router.currentURL,
// get name of the route
name = this.router.currentRouteName || 'unknown';
this.analytics.setUser(42);
// track visit
this.analytics.trackVisit(path, name);
});
}
}
Track app events
To track events you will can inject the analytics service into your controller/service/component/route when appropriate
import Controller from '@ember/controller';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';
export default class ThingController extends Controller {
// Service
@service analytics;
// Actions
@action hitIt(thing) {
this.analytics.trackEvent('hit.thing', { id: thing });
}
}
Set user
To set some user indentifiable data you can call setUser on the analytics service.
Ensure this method is called everytime the user refreshes the app.
import Controller from '@ember/controller';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';
export default class LoginController extends Controller {
// Service
@service analytics;
// Actions
@action login(user) {
// ...
this.analytics.setUser(user.uuid);
}
}
Set app name
By default this package will use the name in package.json as the appName. If you want to override this you can call the setAppName
method.
export default class ApplicationRoute extends Route {
// ... in routeDidChange
this.analytics.setAppName('myAppThing);
}
Customise other data
There is also a more generic setData
method to override any of the generic analytics data that is sent to the api.
export default class ApplicationRoute extends Route {
// ... in routeDidChange
this.analytics.setData({
environment:'foo',
appName: 'myAppThing'
appVersion: '1.0.2b',
appHash:'bash',
userAgent:'iOS 16.3.2',
sessionId:'a4sf43v0s',
userId:42
});
}
Contributing
See the Contributing guide for details.
License
This project is licensed under the MIT License.