Backbone.js 使用主干网跟踪站点活动（谷歌分析）

我正在寻找在

谷歌分析
中跟踪
网站活动的最佳方法，该方法适用于使用
主干
和
要求
制作的web应用程序

看看谷歌的网页，我发现了这个

我的问题是：

1） 使用
Backbone.Analytics
，我是否应该更改Backbone.Analytics.js以添加
\u gaq.push（[''''u setAccount'，'UA-XXXXX-X']）？

2） 还有其他可能的解决方案/插件吗？
您不必更改任何内容。只需添加您的Google Analytics代码片段（与普通代码一样），并像添加任何其他Javascript库一样包含主干.Analytics。
我更喜欢“自己动手”样式：）它非常简单：

var Router = Backbone.Router.extend({

    initialize: function()
    {
        //track every route change as a page view in google analytics
        this.bind('route', this.trackPageview);
    },

    trackPageview: function ()
    {
        var url = Backbone.history.getFragment();

        //prepend slash
        if (!/^\//.test(url) && url != "")
        {
            url = "/" + url;
        }

        _gaq.push(['_trackPageview', url]);
    }
}

您可以像往常一样将google analytics脚本添加到页面中。
关于其他可能的解决方案/插件，我已经在一些项目中使用过，而且效果也很好。它还提供了一些选项，如事件跟踪，在分析集成的某个时候非常方便。
我想与大家分享一下我的做法。这可能不适用于较大的应用程序，但我喜欢手动告诉GA何时跟踪页面浏览或其他事件。我尝试绑定到“全部”或“路由”，但无法让它自动记录我需要的所有操作

App.Router = BB.Router.extend({
    //...
    track: function(){
        var url = Backbone.history.getFragment();

        // Add a slash if neccesary
        if (!/^\//.test(url)) url = '/' + url;

        // Record page view
        ga('send', {
            'hitType': 'pageview',
            'page': url
        });
    }
});

所以我只需调用
App.Router.Main.track（）在我导航或执行任何我想跟踪的操作后

请注意，我使用了新的跟踪代码段，该代码段目前正在公测中，但其API非常直观，因此无需插件来抽象任何复杂的东西。例如：我记录有多少人滚动到无限滚动视图的末尾，如下所示：

onEnd: function(){
    ga('send', 'event', 'scrollEvents', 'Scrolled to end');
}

var Router = Backbone.Router.extend({
    routes: {
        "*path":                        "page",
    },

    initialize: function(){
        // Track every route and call trackPage
        this.bind('route', this.trackPage);
    },

    trackPage: function(){
        var url = Backbone.history.getFragment();
        // Add a slash if neccesary
        if (!/^\//.test(url)) url = '/' + url;
        // Analytics.js code to track pageview
        ga('send', {
            'hitType': 'pageview',
            'page': url
        });
    },

    // If you have a method that render pages in your application and
    // call navigate to change the url, you can call trackPage after
    // this.navigate()
    pageview: function(path){
        this.navigate(path);
        pageView = new PageView;
        pageView.render();
        // It's better call trackPage after render because by default
        // analytics.js passes the meta tag title to Google Analytics
        this.trackPage();
    }
}


祝你好运。
我写了一篇关于这个的小帖子，希望它能帮助别人：


如果您使用新的universal analytics.js，您可以这样做：

onEnd: function(){
    ga('send', 'event', 'scrollEvents', 'Scrolled to end');
}

var Router = Backbone.Router.extend({
    routes: {
        "*path":                        "page",
    },

    initialize: function(){
        // Track every route and call trackPage
        this.bind('route', this.trackPage);
    },

    trackPage: function(){
        var url = Backbone.history.getFragment();
        // Add a slash if neccesary
        if (!/^\//.test(url)) url = '/' + url;
        // Analytics.js code to track pageview
        ga('send', {
            'hitType': 'pageview',
            'page': url
        });
    },

    // If you have a method that render pages in your application and
    // call navigate to change the url, you can call trackPage after
    // this.navigate()
    pageview: function(path){
        this.navigate(path);
        pageView = new PageView;
        pageView.render();
        // It's better call trackPage after render because by default
        // analytics.js passes the meta tag title to Google Analytics
        this.trackPage();
    }
}

所有答案似乎都很好，但已经过时（2015年9月）。遵循此Google开发人员指南：
这是我的解决方案版本（我已经添加了建议调用
ga（'set'））
：

我只是发布了一个关于这个问题的更新，因为它似乎是我从backbone.js开发人员那里得到的很多信息，我认识这些开发人员或与他们一起工作的开发人员，他们似乎在最后一个关卡上摔倒了

Javascript：

App.trackPage = function() {
 var url;
 if (typeof ga !== "undefined" && ga !== null) {
  url = Backbone.history.getFragment();
  return ga('send', 'pageview', '/' + url);
 }
};

Backbone.history.on("route", function() {
 return App.trackPage();
});

跟踪代码段：

<head>
 <script>
  (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-XXXXXXXX-X', 'auto');
 </script>
</head>


（函数（i，s，o，g，r，a，m）{i['GoogleAnalyticsObject']=r；i[r]=i[r]||
函数（）{（i[r].q=i[r].q | |[]）.push（参数）}，i[r].l=1*新日期（）；
a=s.createElement（o），m=s.getElementsByTagName（o）[0]；a.async=1；
a、 src=g；m.parentNode.insertBefore（a，m）}）（窗口，文档，“脚本”，
'//www.google-analytics.com/analytics.js'，'ga'）；
ga（“创建”、“UA-XXXXXXXX-X”、“自动”）；

跟踪代码段应位于您希望跟踪活动的任何页面上。这可能是您的index.html，您的所有内容都被注入其中，但有些站点可能有多个静态页面或混合页面。如果愿意，可以包括ga（'send'）函数，但它只在页面加载时启动

我写了一篇博文，更详细地解释而不是展示了您可以在这里找到的完整过程：
我很确定这只会捕获登录URL，不是吗？Backbone.Analytics？它的目的是跟踪所有你使用主干路由器触发的URL更改…啊，对不起，我读你的答案太快了，没有消化“包括主干。分析”。昨天忙了一天：| global.ga是等同于window.ga的coffeescript吗？因为在javascript中编写类似的代码，我发现我需要将window.ga放在trackPage中，否则它找不到变量。@DiMono，但你是对的：window.ga是javascript中需要的