ember-caliper

v0.0.1

Published

3 years ago

The default blueprint for ember-cli addons.

Downloads

0High
0Medium
0Low

achambers

ember-addon

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-ember

Specify 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: '[email protected]',
  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 clone this repository
npm install
bower install

Running

ember server
Visit your app at http://localhost:4200.

Running Tests

ember test
ember test --server

Building

ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme