using ember-metrics for Google Analytics (#512)

* using ember-metrics for Google Analytics

* fixing tests

Author: mansona

app/router.js

@@ -1,22 +1,35 @@
 import Router from '@ember/routing/router';
-import { on } from '@ember/object/evented';
+import { scheduleOnce } from '@ember/runloop';
 import config from './config/environment';
 import { inject as service } from '@ember/service';
 
 const AppRouter = Router.extend({
-
-  analytics: service(),
-
   location: config.locationType,
   rootURL: config.routerRootURL,
 
-  sendPageViewToGA: on('didTransition', function(page, title) {
-    if (typeof FastBoot === 'undefined') {
-      page = page ? page : this.get('url');
-      title = title ? title : this.get('url');
-      this.get('analytics').trackPage(page, title);
+  metrics: service(),
+  fastboot: service(),
+
+  didTransition() {
+    this._super(...arguments);
+    this._trackPage();
+  },
+
+  _trackPage() {
+    if (this.get('fastboot.isFastBoot')) {
+      return;
     }
-  })
+
+    scheduleOnce('afterRender', this, () => {
+      const page = this.get('url');
+      const title = this.getWithDefault('currentRouteName', 'unknown');
+
+      // this is constant for this app and is only used to identify page views in the GA dashboard
+      const hostname = 'api.emberjs.com';
+
+      this.get('metrics').trackPage({ page, title, hostname });
+    });
+  }
 });
 
 AppRouter.map(function() {

app/services/analytics.js

@@ -12,7 +12,6 @@ module.exports = function(environment) {
     routerRootURL: '/',
     locationType: 'auto',
     API_HOST: process.env.API_HOST || 'https://ember-api-docs.global.ssl.fastly.net',
-    gaTrackingId: 'UA-XXXXX-Y',
     EmberENV: {
       EXTEND_PROTOTYPES: false,
       FEATURES: {
@@ -35,7 +34,16 @@ module.exports = function(environment) {
     'ember-algolia': {
       algoliaId: ALGOLIA_APP_ID,
       algoliaKey: ALGOLIA_API_KEY
-    }
+    },
+    metricsAdapters: [
+      {
+        name: 'GoogleAnalytics',
+        environments: ['production'],
+        config: {
+          id: 'UA-27675533-1'
+        }
+      }
+    ]
   };
 
   if (environment === 'development') {
@@ -96,7 +104,6 @@ module.exports = function(environment) {
      * solved for that
      */
     ENV.routerRootURL = process.env.DOCS_SLUG ? process.env.DOCS_SLUG : '/api/';
-    ENV.gaTrackingId = 'UA-27675533-1';
 
   }
 

config/environment.js

@@ -77,12 +77,14 @@
     "ember-inflector": "^2.0.1",
     "ember-load-initializers": "^1.0.0",
     "ember-maybe-import-regenerator": "^0.1.6",
+    "ember-metrics": "^0.12.1",
     "ember-native-dom-helpers": "^0.5.2",
     "ember-normalize": "^1.0.0",
     "ember-percy": "^1.5.0",
     "ember-power-select": "^1.9.2",
     "ember-resolver": "^4.3.0",
     "ember-route-action-helper": "^2.0.5",
+    "ember-sinon": "^2.1.0",
     "ember-source": "~2.18.0",
     "ember-styleguide": "^2.3.1",
     "ember-svg-jar": "^1.2.2",

package.json

@@ -1,30 +1,34 @@
-import { run } from '@ember/runloop';
 import { test } from 'qunit';
 import { visit } from 'ember-native-dom-helpers';
 import moduleForAcceptance from 'ember-api-docs/tests/helpers/module-for-acceptance';
 import { requestIdlePromise } from 'ember-api-docs/utils/request-idle-callback';
+import sinon from 'sinon';
 
 moduleForAcceptance('Acceptance | analytics page tracking');
 
 test('checking that trackPage gets called on transitions', async function(assert) {
 
   const pages = ['/ember/2.11/namespaces/Ember', '/ember/2.11/modules/ember-metal', '/ember/2.11/classes/Ember.Application'];
-  const pagesClone = pages.slice(0);
-  const analyticsService = this.application.__container__.lookup('service:analytics');
-  assert.expect(pages.length);
-
-  // extend the method to add assertion in it
-  let oldTrackPage = analyticsService.trackPage;
-  analyticsService.trackPage = (page) => {
-    run(() => {
-      oldTrackPage.apply(analyticsService, ...arguments).then(() => assert.equal(page, pagesClone.shift()));
-    });
-  };
+
+  const applicationRouter = this.application.__container__.lookup('router:main');
+  const metricsService = this.application.__container__.lookup('service:metrics');
+
+  const routerTrackPageSpy = sinon.spy(applicationRouter, "_trackPage");
+  const serviceTrackPageSpy = sinon.spy(metricsService, "trackPage");
 
   await visit(pages[0]);
   await visit(pages[1]);
   await visit(pages[2]);
 
+  assert.expect(5);
+
+  assert.ok(routerTrackPageSpy.calledThrice, `_trackPage() was not called 3 times it was called ${routerTrackPageSpy.callCount} times`);
+  assert.ok(serviceTrackPageSpy.calledThrice, `metrics.trackPage() was not called 3 times it was called ${serviceTrackPageSpy.callCount} times`);
+
+  assert.ok(serviceTrackPageSpy.calledWith({ page: "/ember/2.11/namespaces/Ember", title: "project-version.namespaces.namespace.index", hostname: "api.emberjs.com" }))
+  assert.ok(serviceTrackPageSpy.calledWith({ page: "/ember/2.11/modules/ember-metal", title: "project-version.modules.module.index", hostname: "api.emberjs.com" }))
+  assert.ok(serviceTrackPageSpy.calledWith({ page: "/ember/2.11/classes/Ember.Application", title: "project-version.classes.class.index", hostname: "api.emberjs.com" }))
+
   // make sure the test runner waits for last idle callback
   return requestIdlePromise(2000);
 });

tests/acceptance/analytics-page-tracking-test.js

@@ -33,7 +33,8 @@ moduleFor('controller:project-version', 'Unit | Controller | project version', {
   needs: [
     'service:filterData',
     'service:metaStore',
-    'service:analytics',
+    'service:metrics',
+    'service:fastboot',
     'service:project'
   ]
 });