Recommendations of how to do a tracking handler

Design
1

Hi,

I’m currently trying to incorporate mixpanel and google analytics to my app. I was wondering what would be the recommended way of incorporating actions that can be done on the Route and on the Controller.

For example, I want to track which routes the customer lands on, and also track which actions the customer performs.

Would it be better for me to create a separate controller to wrap mixpanel and google analytics and use controllerFor(), or create a mixin that could be mixed in with the Routes and Controllers?

2

For now I’m going with the controller approach. using ‘needs’ and this.get(“controller.tracker”).trackEvent(“something”) from within my controller. And the controllerFor() method in the Routes.

I’m still open to hearing ideas on how to better structure it.

3

You could create the controller as usual and then inject it into your controllers and routes, that way you wouldn’t need to use needs or controllerFor. The initializer to do that might look like this:

Ember.Application.initializer({
  name: 'inject-tracker',
  initialize: function(container) {
    container.injection("controller", "tracker", "controller:tracker");
    container.injection("route", "tracker", "controller:tracker");
  }
});

Then inside your routes and controllers you will be able to do this.get('tracker').trackEvent(...).

Edit: Updated to change typeInjection to injection – thanks @mtk!

6 Likes
4

That’s pretty cool. Thanks for the suggestion.

5

container.typeInjection is private. The offical api is container.injection

you can see the docs here

1 Like
6

I used this Ember guide but browser Content-Security-Policy means the app is not loading the script when running locally (got “‘ga’ is not defined.”, added Content-Security-Policy metadata, now getting "Content Security Policy violation: {“csp-report”:{“document-uri”:“http://localhost:4200/function…”), not sure if this would be the case on the production server.