使用铁路由器的Meteor中的Google Analytics

Question

Here is my attempt to get Google Analytics working with Iron Router

In lib/analytics.js I have the following code (pasted from the code page in analytics):

if (Meteor.isClient) {
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-45905917-2', 'ec2-54-246-15-224.eu-west-1.compute.amazonaws.com');
}

Then, in client/router.coffee is the following code:

Router.configure layoutTemplate: 'layout'

Router.map ->
    @route 'home', 
        path: '/'
        template: 'home'
        after: -> ga('send', 'pageview')

    for link in Pages.links
        route =  
            path: link.url
            template: link.toTemplate 
            after: -> ga('send', 'pageview')
        @route link.toTemplate, route

But this did not seem to have worked. How do I solve this?

EDIT TO ADD:

I have tried GAnalytics, but I had a lot of issues with my deployment setup and Meteor settings

Answer 1

渲染模板时执行这些代码，看看template_rendered

Answer 2

The way we solve for this is calling the page function onAfterAction

Router.onAfterAction(function() {
  analytics.page(this.route.getName());
});

A helpful hint, when using the Analytics.js project, is if you call analytics.debug() in your console you'll be able to see what your code is doing.

We've used Analytics.js on a few meteor projects already so we extracted it into a meteor package:

okgrow:analytics

We use Iron Router on most projects, so if it's installed, this package will automatically send page views based on route names (but doesn't complain if the project doesn't use Iron Router). It also automatically logs user login/logout if you have the Accounts package installed and, of course, you can setup track() calls on events.

Hope this helps!

Answer 3

The option, in my opinion, is to use Template.rendered. One issue that you might face is that you need to be aware of Template data changes. Example:

Template.yourTemplate.rendered = function(){
  var self = this; //In case you need it but self.data IS NOT REACTIVE

  this.autorun(function(){
    //This is reactive
    var data = Template.currentData();

    //place your analitycs code here

  });
}

I recommend using it on template containers.