Tracking-Site-Aktivität (Google Analytics) mit Backbone

Question

Ich suche den besten Weg, um die Site Activity in Google Analytics für eine Web-Anwendung mit Backbone und Requires gemacht zu verfolgen.

Blick auf Google-Seite, fand ich diese drop-in plugin - Backbone.Analytics.

Meine Fragen sind:
1) mit Backbone.Analytics, soll ich backbone.analytics.js ändern, um _gaq.push(['_setAccount', 'UA-XXXXX-X']); zu hinzufügen?
2) Gibt es andere mögliche Lösungen/Plugins?

Answer 1

Sie sollten nichts ändern müssen. Fügen Sie einfach wie gewohnt Ihr Google Analytics-Code-Snippet hinzu und binden Sie Backbone.Analytics wie jede andere Javascript-Bibliothek ein.

Answer 2

Ich ziehe "do it yourself" Stil :) Es ist wirklich einfach:

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

Und Sie fügen zu Ihrer Seite wie gewohnt Google Analytics-Skript.

Answer 3

In Bezug auf andere mögliche Lösungen/Plugins habe ich https://github.com/aterris/backbone.analytics in ein paar Projekten verwendet und es funktioniert auch ganz gut. Es hat auch Optionen für ein paar mehr Dinge wie Event-Tracking, die an einem Punkt in Ihrer Analytics-Integration nützlich sein kann.

Answer 4

Nur gedacht, ich würde teilen, wie ich es mache. Dies funktioniert bei größeren Apps möglicherweise nicht, aber ich möchte GA gerne mitteilen, wann Seitenaufrufe oder andere Ereignisse verfolgt werden sollen. Ich habe versucht, mich an "alles" oder "Route" zu binden, aber ich konnte nicht wirklich alle Aktionen aufnehmen, die ich automatisch benötige.

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

So nenne ich nur App.Router.Main.track(); nachdem ich navigieren oder ich will alles tun, verfolgen.

Beachten Sie, dass ich das neue Tracking-Snippet Analytics.js verwende, das derzeit in der öffentlichen Beta-Version ist, aber über eine so intuitive API verfügt, dass kein komplexes Plug-in mehr benötigt wird. Zum Beispiel: Ich verfolgen, wie viele Menschen bewegen zu Ende einer unendlichen Scroll-Ansicht wie folgt aus:

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

Viel Glück.

Answer 5

schrieb ich einen kleinen Beitrag dazu, hoffen, dass es jemand hilft:

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

Wenn Sie den neuen Universal-analytics.js verwenden, können Sie das wie folgt tun:

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

Alle Antworten scheinen fast gut, aber veraltet (Sept. 2015). Im Anschluss an diese Anleitung Google Devs: https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications Hier ist meine Version der Lösung (ich habe den vorgeschlagenen Aufruf ga('set'...) hinzugefügt):

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

Posting nur ein Update auf diese Frage, da es ein ich viel bekommen zu sein scheint von Backbone.js Entwicklern, die ich kenne oder mit denen ich arbeite, die auf die letzte Hürde zu fallen scheinen.

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

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

Die Tracking-Snippet sollten Sie auf einer beliebigen Seite zur Verfügung stehen möchten Aktivitäten verfolgen. Dies könnte Ihre index.html sein, in die Ihr gesamter Inhalt injiziert wird, aber manche Seiten können mehrere statische Seiten oder eine Mischung haben. Sie können die Funktion ga ('send') hinzufügen, wenn Sie möchten, aber sie wird nur beim Laden einer Seite ausgelöst.

ich einen Blog-Post schrieb, die ausführlicher in geht, zu erklären, anstatt zeigt, der vollständige Prozess, finden Sie hier: http://v9solutions.co.uk/tech/2016/02/15/how-to-add-google-analytics-to-backbone.js.html