Ember-caliper
An Ember CLI add to add caliper.io to your app
Synopsis
This addon will import the caliper.io js file into your application and will provide a content-for tag to inject the caliper config into your page.
It also provides access to the Caliper object for use in your app.
Usage
Install caliper-ember
Install the caliper-ember package from bower:
$ bower i --save caliper-emberSpecify caliper config
In your config/environment.js file, specify the caliper config you need:
// config/environment.js
ENV.caliper = {
apiKey: 'SOME_API_KEY',
debug: true,
enabled: true,
visitor: 'some@email.com',
minDuration: 50
};Update Content Security Policy
Caliper requires it's config to be put in a gobal variable called Caliper and suggests setting that in the head. Therefore, in your config/environment.js file, open up the Content Security Policy to allow for this.
NB I don't think this is a good idea so I'm working on another way around this
// config/environment.js
ENV.contentSecurityPolicy = {
'script-src': "'self' 'unsafe-inline'",
'img-src': "'self' *.caliper.io"
};Add content-for tag to index.html
Finally, add the content-for tag to your index.html so that the addon will inject the caliper config:
<html>
<head>
<!-- ...snip... -->
<meta name="viewport" content="width=device-width, initial-scale=1">
{{content-for 'caliper'}}
{{content-for 'head'}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/dummy.css">
{{content-for 'head-footer'}}
</head>
<body>
<!-- ...snip... -->
</body>
</html>Setting the visitor
To set the visitor you can access the Caliper config via the Caliper Service.
First inject the caliper service into your required objects:
// app/initializers/caliper-service.js
export function initialize(container, application) {
application.inject('controller', 'caliper', 'service:caliper');
}
export default {
name: 'caliper-service'
initialize: initialize
}Then use the service to set the visitor:
// app/pods/something/controller.js
import Em from 'ember';
export default Em.Controller.extend({
actions: {
authenticate: function() {
var username = this.get('username');
var password = this.get('password');
this.authService.authenticate(username, password)
.then(function() {
this.caliper.setVisitor(username);
this.transitionTo('success');
}.bind(this));
}
}
});Installation
-
git clonethis repository npm installbower install
Running
ember server- Visit your app at http://localhost:4200.
Running Tests
ember testember test --server
Building
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.