mixpanel + empress-blog

Mixpanel tracks user interactions with web and mobile applications and provides tools for targeted communication with them. empress-blog is designed to be a static site version of the Ghost blogging platform.

This quick article assumes that you have:

1. An empress-blog instance
2. A mixpanel account
3. Project Token from Access Keys for your mixpanel project

Setup

If you have all from the above, you can continue with connecting the dots. Minimal needed steps for each section should be below, but please consult respective READMEs.

ember-metrics

The de-facto standard in EmberJS world for various analytics solutions integration is ember-metrics.

ember install ember-metrics

// config/environment.js

module.exports = function (environment) {
  let ENV = {
    metricsAdapters: [
      {
        name: 'Mixpanel',
        environments: ['production'],
        config: {
          token: 'my-mixpanel-project-token',
        },
      },
    ],
  }
}

My empress-blog instances did not have application route, so I had to create one:

ember g route application

// app/routes/application.js

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class ApplicationRoute extends Route {
  @service metrics;
  @service router;

  constructor() {
    super(...arguments);

    let router = this.router;
    router.on('routeDidChange', () => {
      const page = router.currentURL;
      const title = router.currentRouteName || 'unknown';

      this.metrics.trackPage({ page, title });
    });
  }
}

ember-cli-content-security-policy

In order to allow loading of mixpanel trackers on your page you will need to set up CSP somehow. Standard way to do this is via ember-cli-content-security-policy addon.

ember install ember-cli-content-security-policy

Note: Following snippet is compatible only with ember-cli-content-security-policy >= 2.x, which is at the time of writing this not the default. Check the addon docs for settings option for your version.

// config/content-security-policy.js

module.exports = function () {
  return {
    delivery: ['meta'],
    policy: {
      'default-src': ["'none'"],
      'script-src': [
        "'self'",
        'http://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js',
        'https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js',
      ],
      'font-src': ["'self'"],
      'connect-src': ["'self'", 'https://api-js.mixpanel.com'],
      'img-src': ["'self'"],
      'style-src': ["'self'"],
      'media-src': null,
    },
    reportOnly: false,
  };
};

Verification

Deploy the empress-blog on your production environment, click on few places and verify in mixpanel that the events are flowing in:

---

Photo by Crissy Jarvis on Unsplash