9

我正在寻找跟踪Site Activity使用和Google Analytics制作的网络应用程序的最佳方式。BackboneRequires

查看 Google 的页面，我发现了这个插件 - Backbone.Analytics。

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

4

8 回答 8

17

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

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

然后你像往常一样将谷歌分析脚本添加到你的页面。

于 2013-01-22T09:26:04.783 回答
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');
}

在此处输入图像描述 祝你好运。

于 2013-10-03T07:01:11.750 回答
3

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

于 2012-07-17T20:43:55.850 回答
1

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

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();
于 2013-12-04T13:55:45.597 回答
0

如果您使用新的通用 analytics.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();
    }
}
于 2014-03-30T05:42:29.833 回答
0

关于其他可能的解决方案/插件，我在一些项目中使用了https://github.com/aterris/backbone.analytics并且效果也很好。它还具有更多选项，例如事件跟踪，这在您的分析集成中的某个时候可以派上用场。

于 2013-09-17T13:29:21.583 回答
0

只是发布这个问题的更新，因为它似乎是我从我认识的或与之合作的骨干.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('send') 函数，但它只会在页面加载时触发。

我写了一篇更详细的博客文章，解释而不是展示你可以在这里找到的完整过程：http: //v9solutions.co.uk/tech/2016/02/15/how-to-add- google-analytics-to-backbone.js.html

于 2016-03-17T09:54:12.617 回答
0

所有答案似乎都很好，但已经过时（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')
    ...
于 2015-09-28T21:24:43.773 回答