Ember CLI and Google Analytics

Question

According to the docs, you just need to embed the analytics code and reopen the Router. The latter seems unclear to me.

I've placed the embedded code on index.html, then created the following

app/reopens/router.js

import Router from '../router';

Router.reopen({
  notifyGoogleAnalytics: function() {
    return ga('send', 'pageview', {
      'page': this.get('url'),
      'title': this.get('url')
    });
  }.on('didTransition')
});

app/app.js: Added the import...

import './reopens/router';

This results in a fatal error when viewing the site: Uncaught ReferenceError: ga is not defined

How do you make the ga function visible to this observer?

Answer 1

The problem is that on the first run through of the didTransition, the method is missing as that part of the script has not been executed.

Is this a problem? Actually no. The purpose of didTransition in this instance is to capture when a transition occurs as the supplied javascript from Google with capture to initial local of the page. All is needed is a check to see if 'ga' exists.

1. Add the recommended javascript to the index.html of your ember app from Google (https://developers.google.com/analytics/devguides/collection/analyticsjs/).

2. Modify your code to include a check to see if ga is undefined:

   import Router from '../router';
   
   Router.reopen({
       notifyGoogleAnalytics: function() {
           if (typeof ga != 'function') { return; }
           return ga('send', 'pageview', {
             'page': this.get('url'),
             'title': this.get('url')
           });
       }.on('didTransition')
   });
   

This is variation of what I have for an ember-cli based app. Let me know if it works.

Answer 2

After looking, exhaustively, for a way to plug Google Analytics into Ember, I built my own. For all those still struggling with this issue and not finding the Ember.js v1.0.0 answer helpful, here is how I got it to work on v4.2:

import Route from '@ember/routing/route';
import { action } from '@ember/object';

export default class ApplicationRoute extends Route {
  @action
  didTransition() {
    gtag('set', 'page_path', window.location.pathname);
    gtag('event', 'page_view');

    return true;
  }
}

Forgive my ignorance, as I am new to Ember, but the existing documentation makes it look like didTransition is no longer supported at the router level. That makes +99% of the solutions I found on the internet outdated.

Instead, I invoked didTransition at the route level. By extending Route as ApplicationRoute, I extended the main behavior of every Route. In this example, I execute the gtag event for triggering a page view after setting the page URL. The gtag code from Google simply goes in the index.html file in the head section.

Hopefully, this saves someone from hours of searching.