DEV Community

Cover image for mixpanel + empress-blog
Michal Bryxí
Michal Bryxí

Posted on

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


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.


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

ember install ember-metrics
Enter fullscreen mode Exit fullscreen mode
// config/environment.js

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

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

ember g route application
Enter fullscreen mode Exit fullscreen mode
// 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() {

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

      this.metrics.trackPage({ page, title });
Enter fullscreen mode Exit fullscreen mode


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
Enter fullscreen mode Exit fullscreen mode

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': [
      'font-src': ["'self'"],
      'connect-src': ["'self'", ''],
      'img-src': ["'self'"],
      'style-src': ["'self'"],
      'media-src': null,
    reportOnly: false,
Enter fullscreen mode Exit fullscreen mode


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

Screenshot 2021-05-31 at 10.15.37

Photo by Crissy Jarvis on Unsplash

Top comments (0)