Skip to content

Instantly share code, notes, and snippets.

@fivetanley
Last active May 3, 2019 21:08
Show Gist options
  • Save fivetanley/873db6ba692d18df1b42463105797699 to your computer and use it in GitHub Desktop.
Save fivetanley/873db6ba692d18df1b42463105797699 to your computer and use it in GitHub Desktop.
weird analytics in the routes
import Ember from 'ember';
import {inject} from '@ember/service';
export default Ember.Controller.extend({
routerService: inject('router'),
analytics: inject('analytics'),
appName: 'Ember Twiddle',
});
import EmberRouter from '@ember/routing/router';
import config from './config/environment';
const Router = EmberRouter.extend({
location: 'none',
rootURL: config.rootURL
});
Router.map(function() {
this.route('route1', {path: '/route1/:id'});
this.route('route2', {path: '/route2/:id'});
});
export default Router;
import Ember from 'ember';
import { inject } from '@ember/service';
import { getOwner } from '@ember/application';
export default Ember.Route.extend({
routerService: inject('router'),
analytics: inject('analytics'),
init() {
this._super(...arguments);
this.routerService.on('routeDidChange', (transition) => {
console.log('currentRoute', this.routerService.currentRoute);
if (!this.routerService.currentRoute) return;
const currentRoute = getOwner(this).lookup(`route:${this.routerService.currentRouteName}`);
console.log('currentRoute', currentRoute);
let eventName;
if (typeof currentRoute.analyticsEventName === 'function') {
eventName = currentRoute.analyticsEventName(currentRoute.currentModel, transition.to.params);
} else if (typeof currentRoute.analyticsEventName === 'string') {
eventName = currentRoute.analyticsEventName;
}
if (eventName) {
this.analytics.trackEvent(eventName);
}
});
}
});
import Ember from 'ember';
export default Ember.Route.extend({
analyticsEventName(model, params) {
return 'route1' + params.id
}
});
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return {
id: 'butthead'
}
},
analyticsEventName(model, params) {
return `route2 ${model.id}`
}
});
import Ember from 'ember';
export default Ember.Service.extend({
tracks: Ember.computed(function() {
return Ember.A([]);
}),
trackEvent(eventName) {
this.tracks.pushObject(eventName)
}
});
<h1>Tracks</h1>
<ul>
{{#each analytics.tracks as |track|}}
<li>{{track}}</li>
{{/each}}
</ul>
<h1>Welcome to {{appName}}</h1>
<p>Click on the links below to add an analytics event. It will render under "Tracks" above. Look at routes/route1.js and routes/route2.js to see how to define an analytics event name without having to define the analytics injection and an afterModel function. The `analyticsEventName` property can be either a function that is passed the route's model and params, or a static string</p>
{{#link-to 'route1' 1}}
route1
{{/link-to}}
{{#link-to 'route2' 'butt'}}
route2
{{/link-to}}
<br>
<br>
{{outlet}}
<br>
<br>
{
"version": "0.15.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.9.0",
"ember-template-compiler": "3.9.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment