Adding Google Analytics to Ember. There's a lot of resources that covers the subject. Introducing Google Analytics into Single Page Applications (SPAs) hasn't been quite a straight-forward process. Without going into much detail as to why, the reasons are typically because of how navigation & data is loaded.
I'll outline the procedure to take care of the more straight-forward solution of addingEmber project. But then go on to describe in detail the more interesting challenge of introducing it to several projects concurrently. This is pretty neat and prevents you from updating all this code individually for each project.
The Google Guides have a more exhaustive explanation of how analytics differs in SPAs.
INDIVIDUAL PROJECT
What that means is adding Google Analytics (analytics.js) into a single application.
In the ROUTER:
Router.reopen({ notifyGoogleAnalytics: function() { return ga('send', 'pageview', { 'page': this.get('url'), 'title': this.get('url') }); }.on('didTransition') });
IN THE INDEX:
<script type="text/javascript">
let _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-Y']);
(function() {
let ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/analytics.js';
let s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
If this post wasn't clear, read the Ember Guides Cookbook.
MULTIPLE PROJECTS
What we're going to do is create a layout theme which can then be used in several projects concurrently, rather than updating it individually for each project.
Alternatively you can create a new add-on, or update a common layout addon which is used by several projects and easier for the team to get up to speed with.
The approach we utilized above did so without the help of add-ons since the scope was limited to a single project. For multiple projects and projects of a larger scale, I would suggest a really awesome add-on called Ember-Metrics.
Ember-Metrics
Not only is the project rated 10/10 in Ember Observer, for an addon there's proper documentation. Documentation. Well done, madam. Well done.
Other Addons as Runners Up:
Ember Google Analytics
(Last checked, it was updated 2 years ago)
Ember CLI Google Analytics
(This one's download stats don't look too bad)
Modifying the Router
For an individual application, it's pretty clear all we have to do is edit the Router file. Add ons don't have such a file, so the question is how do I modify the Router's behavior through the use of an add on.
These were the resources I found to answer said question:
http://stackoverflow.com/questions/37331763/ember-extend-router-for-addon
http://discuss.emberjs.com/t/how-to-extend-router-by-mixin-defined-in-an-addon/7553/4
Now would be a good time to refresh your understanding Utilities & Mixins since therein lies your choice.
Created a new Mixin called routerAnalytics, in addon/utils/router-analytics.js:
As you can see by injecting another our client site app service into the router, we can make the analytics all the more powerful for tracking not just page transitions but recording different organization names and IDs.
In app/utils/router-analytics.js:
export { default } from 'ember-cli-trax-layout/utils/router-analytics';
Linking your Addon
If you haven't linked your layout addon to your project before you can do so via:
npm link
npm link ADDON:Path/Name
Now, literally 2 lines of code now for all the multiple apps you have.
In your app/router.js:
import routerAnalytics from 'addon-project-name/utils/router-analytics';
const Router = Ember.Router.extend(routerAnalytics, { location: config.locationType, rootURL: config.rootURL,
... etc. however it is you plan on configuring your router.
And that's it. Open up your Google Analytics dashboard, and you should be good to go.
Gotchas:
Addons don't have access to configuration. The Ember CLI API is pretty useful documentation if you haven't checked it out before. Until a co-worker mentioned it I never thought of using this as a resource. And the solution for aan annoying error was found through here. In particular how to give access configuration variables to the add on.In the root index.js file of your addon:
config: function(environment) { return { metricsAdapters: [ { name: 'GoogleAnalytics', environments: ['staging'], config: { id: 'UA-XXXX-Y' } }, { name: 'GoogleAnalytics', environments: ['production'], config: { id: 'UA-XXXX-Z' } }, ] }; },
Additional/Alternate Resources:
https://github.com/googleanalytics/autotrack
https://github.com/segmentio/analytics.js
https://emberway.io/applying-the-adapter-pattern-for-analytics-in-ember-js-apps-29448cbcedf3#.upr0v9rbz