Question

对于使用Site Activity和Google Analytics制作的网络应用，我正在寻找跟踪Backbone Requires的最佳方式。

查看Google的页面，我发现了drop-in plugin - Backbone.Analytics。

我的问题是：
1）使用Backbone.Analytics，我应该更改backbone.analytics.js以添加_gaq.push(['_setAccount', 'UA-XXXXX-X']);吗？ 2）是否有其他可能的解决方案/插件？

Answer 1

我更喜欢“自己动手”的风格:)这很简单：

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（分析）脚本添加到您的网页中。

Answer 2

你不应该改变任何东西。只需像平常一样添加您的Google Analytics代码段，并像其他任何Javascript库一样包含Backbone.Analytics。

Answer 3

我想知道我是怎么做的。这可能不适用于较大的应用程序，但我喜欢手动告知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();。

请注意，我使用新的Analytics.js跟踪代码段，该代码段目前处于公开测试阶段，但其API非常直观，因此无需使用插件即可抽象出任何复杂性。例如：我跟踪有多少人滚动到无限滚动视图的末尾，如下所示：

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

enter image description here 祝你好运。

Answer 4

我写了一篇关于此的小帖子，希望它对某人有所帮助：

http://sizeableidea.com/adding-google-analytics-to-your-backbone-js-app/

var appRouter = Backbone.Router.extend({
     initialize: function() {
        this.bind('route', this.pageView);  
    },  
    routes: {
        'dashboard': 'dashboardPageHandler'
    },
    dashboardPageHandler: function() {
      // add your page-level logic here...    
    },
    pageView : function(){  
     var url = Backbone.history.getFragment();

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

      if(! _.isUndefined(_gaq)){
         _gaq.push(['_trackPageview', url]);
      }  
   }   
});

var router = new appRouter();

Backbone.history.start();

Answer 5

关于其他可能的解决方案/插件，我在一些项目中使用了https://github.com/aterris/backbone.analytics，它也运行得很好。它还有一些选项可用于事件跟踪，在分析集成的某些时候可以很方便。

Answer 6

如果您使用新的通用分析.js，您可以这样做：

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

Answer 7

所有答案似乎几乎好，但已过时（2015年9月）。遵循此Google开发人员指南：https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications 这是我的解决方案版本（我已将建议的调用添加到ga('set'...)）：

MyRouter = Backbone.Router.extend
    ...
    initialize: () ->
        # Track every route and call trackPage
        @bind 'route', @trackPage

    trackPage: () ->
        url = Backbone.history.getFragment()
        # Add a slash if neccesary
        if not /^\//.test(url) then url = '/' + url
        # Analytics.js code to track pageview
        global.ga('set', {page: url})
        global.ga('send', 'pageview')
    ...

Answer 8

只是发布了这个问题的更新，因为它似乎是我从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>

您希望跟踪活动的任何页面都应提供跟踪代码段。这可能是您注入所有内容的index.html，但有些网站可能有多个静态页面或混合。如果您愿意，可以添加ga（＆＃39; send＆＃39;）功能，但只会在页面加载时触发。

我写了一篇博文，详细介绍了解决而非展示的完整流程，您可以在此处找到：http://v9solutions.co.uk/tech/2016/02/15/how-to-add-google-analytics-to-backbone.js.html

使用Backbone跟踪网站活动（Google Analytics）

8 个答案: