ember-caliper

0.0.1 • Public • Published

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: '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 clone this repository
  • npm install
  • bower install

Running

Running Tests

  • ember test
  • ember test --server

Building

  • ember build

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

/ember-caliper/

    Package Sidebar

    Install

    npm i ember-caliper

    Weekly Downloads

    0

    Version

    0.0.1

    License

    MIT

    Last publish

    Collaborators

    • achambers