Hoạt động trang web theo dõi (Google Analytics) bằng cách sử dụng Backbone

Question

Tôi đang tìm cách tốt nhất để theo dõi Site Activity trong Google Analytics cho một ứng dụng web được thực hiện với Backbone và Requires.

Nhìn vào trang của Google, tôi tìm thấy trang này drop-in plugin - Backbone.Analytics.

Câu hỏi của tôi là:
1) sử dụng Backbone.Analytics, tôi có nên đổi backbone.analytics.js để thêm _gaq.push(['_setAccount', 'UA-XXXXX-X']); không?
2) Có các giải pháp/plugin khác có thể không?

Answer 1

Bạn không cần phải thay đổi bất cứ điều gì. Chỉ cần thêm đoạn mã Google Analytics của bạn, như bình thường và bao gồm Backbone.Analytics như bạn làm với bất kỳ thư viện Javascript nào khác.

Answer 2

tôi thích "tự mình làm" phong cách :) Thật sự rất đơn giản:

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

Và bạn thêm google phân tích kịch bản vào trang của bạn như bình thường.

Answer 3

Về các giải pháp/plugin có thể khác, tôi đã sử dụng https://github.com/aterris/backbone.analytics trong một vài dự án và nó hoạt động khá tốt. Nó cũng có các tùy chọn cho một vài thứ khác như theo dõi sự kiện có thể thuận tiện tại một số điểm trong tích hợp phân tích của bạn.

Answer 4

Chỉ cần tìm tôi chia sẻ cách tôi đang thực hiện. Điều này có thể không hoạt động đối với các ứng dụng lớn hơn nhưng tôi muốn nói GA theo cách thủ công khi theo dõi lượt xem trang hoặc các sự kiện khác. Tôi đã cố gắng ràng buộc để "tất cả" hoặc "tuyến đường" nhưng không thể khá có được nó để ghi lại tất cả các hành động mà tôi cần automajically.

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

Vì vậy, tôi chỉ cần gọi App.Router.Main.track(); sau khi điều hướng hoặc làm bất cứ điều gì tôi muốn theo dõi.

Lưu ý rằng tôi sử dụng đoạn mã theo dõi Analytics.js mới hiện đang ở phiên bản beta công khai nhưng có API trực quan đến mức giúp loại bỏ nhu cầu plugin trừu tượng bất kỳ sự phức tạp nào. Ví dụ: Tôi theo dõi có bao nhiêu người di chuyển đến cuối của một cái nhìn cuộn vô hạn như thế này:

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

Chúc may mắn.

Answer 5

Tôi đã viết một bài nhỏ về vấn đề này, hy vọng nó sẽ giúp ai đó:

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 6

Nếu bạn sử dụng analytics.js phổ quát mới, bạn có thể làm điều đó như thế này:

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

Tất cả các câu trả lời dường như là gần như tốt, nhưng đã lỗi thời (tháng 9 năm 2015). Theo hướng dẫn nhà phát triển này của Google: https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications Dưới đây là phiên bản của tôi về các giải pháp (Tôi đã thêm các cuộc gọi đề nghị 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

Chỉ cần đăng một bản cập nhật cho câu hỏi này vì nó có vẻ là một tôi nhận được rất nhiều từ các nhà phát triển backbone.js tôi biết hoặc làm việc với những người dường như rơi vào rào cản cuối cùng.

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

Các theo dõi Snippet:

<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> 

Các theo dõi số câu liên quan nên có sẵn trên bất kỳ trang web mà bạn muốn theo dõi hoạt động. Đây có thể là index.html của bạn nơi tất cả nội dung của bạn được tiêm, nhưng một số trang web có thể có nhiều trang tĩnh hoặc kết hợp. Bạn có thể bao gồm hàm ga ('send') nếu muốn, nhưng nó sẽ chỉ kích hoạt khi tải trang.

tôi đã viết một bài đăng blog mà đi vào chi tiết hơn, giải thích chứ không phải cho thấy, toàn bộ quá trình mà bạn có thể tìm thấy ở đây: http://v9solutions.co.uk/tech/2016/02/15/how-to-add-google-analytics-to-backbone.js.html