带有 Iron Router 的 Meteor 中的 Google Analytics答案

【问题标题】：Google Analytics in Meteor with Iron Router带有 Iron Router 的 Meteor 中的 Google Analytics
【发布时间】：2015-02-03 03:53:42
【问题描述】：

这是我尝试让 Google Analytics 与 Iron Router 一起使用

在lib/analytics.js 我有以下代码（从分析中的代码页粘贴）：

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');
}

那么，client/router.coffee 中的代码如下：

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

但这似乎没有奏效。我该如何解决？

编辑添加：

我尝试过 GAnalytics，但我的部署设置和 Meteor 设置存在很多问题

【问题讨论】：

您好，这是一种解决方法，所以我不会将此作为答案发布，但我最近通过在我的html 模板中的<script></script> 标记中粘贴 Google Analyics 代码使其工作。像这样：view-source:mixtape.meteor.com
看看这篇文章：bicobic.com/posts/BkFDo4CqcSnGcGtri 这通过脚本加载器加载 GA-Script，这不是必需的，但它显示了将脚本包含在模板中的方法。在你的布局中调用它。检查 Chrome 的 Google Analytics Debugger。

标签： javascript google-analytics coffeescript meteor iron-router

【解决方案1】：

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

【讨论】：

【解决方案2】：

我们解决这个问题的方法是调用页面函数onAfterAction

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

在使用 Analytics.js 项目时，一个有用的提示是，如果您在控制台中调用 analytics.debug()，您将能够看到您的代码在做什么。

我们已经在几个流星项目中使用了 Analytics.js，因此我们将其提取到流星包中：

okgrow:analytics

我们在大多数项目中都使用 Iron Router，所以如果安装了它，这个包会根据路由名称自动发送页面浏览量（但如果项目不使用 Iron Router 也不会抱怨）。如果您安装了 Accounts 软件包，它还会自动记录用户登录/注销，当然，您可以设置 track() 事件调用。

希望这会有所帮助！

【讨论】：

【解决方案3】：

在我看来，这个选项是使用 Template.rendered。您可能面临的一个问题是您需要了解模板数据更改。示例：

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

  });
}

我建议在模板容器上使用它。

【讨论】：

但是我必须将它添加到我使用的每个模板中。在任何地方使用一次会更好。等等..模板容器？听起来像个黑客。
另外，为什么分析代码需要自动运行？
这不是 hack，它实际上是必要的。想象一个左侧面板，从中选择杂志文章和容器。当您选择左侧的杂志文章时，您可以使用路由器或简单地使用会话或任何反应式字典。使用 Session/Reactive Dict 更快，但您需要跟踪机会。由于 Meteor 用于 SPA，我会选择 Reactive Dict 而不是 Routing，但这实际上取决于您的项目规范。
差点忘了：即使使用路由（Iron Router），当你更改路由时，页面不会再次加载！所以 Route 发生了变化，事情得到了重新计算，但模板没有再次呈现。 Blaze 跟踪依赖关系并仅更新必要的 DOM 部分。你可以查看 EventMind 的视频，他们有详细的解释：eventedmind.com