mixpanel + empress-blog
Tags: ember, analytics, mixpanel
Published: 2021-05-31 09:34:59

**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](https://github.com/empress/empress-blog#quick-start)
2. A [mixpanel account](https://mixpanel.com/register/)
3. [Project Token from Access Keys](https://help.mixpanel.com/hc/en-us/articles/115004502806-Where-can-I-find-my-project-token-) 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](https://emberjs.com/) world for various analytics solutions integration is [ember-metrics](https://github.com/adopted-ember-addons/ember-metrics).

```sh
ember install ember-metrics
```

```js
// 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:

```sh
ember g route application
```

```js
// 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](https://en.wikipedia.org/wiki/Content_Security_Policy) somehow. Standard way to do this is via [ember-cli-content-security-policy](https://github.com/rwjblue/ember-cli-content-security-policy) addon.

```sh
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.

```js
// 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:

![Screenshot 2021-05-31 at 10.15.37](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdd9m0u5f268tofs0k4o.png)

-----
 
Photo by <a href="https://unsplash.com/@crissyjarvis?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Crissy Jarvis</a> on <a href="https://unsplash.com/s/photos/abacus?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>