Seguimiento de la actividad del sitio (Google Analytics) utilizando Backbone

Question

Estoy buscando la mejor manera de rastrear el Site Activity en Google Analytics para una aplicación web hecha con Backbone y Requires.

Al mirar la página de Google, encontré esto drop-in plugin - Backbone.Analytics.

Mis preguntas son:
1) usando Backbone.Analytics, debería cambiar backbone.analytics.js el fin de añadir _gaq.push(['_setAccount', 'UA-XXXXX-X']);?
2) ¿Hay otras soluciones/complementos posibles?

Answer 1

No debería tener que cambiar nada. Simplemente agregue su fragmento de código de Google Analytics, como es normal, e incluya Backbone.Analytics como lo haría con cualquier otra biblioteca de Javascript.

Answer 2

prefiero "hágalo usted mismo" estilo :) Es muy simple:

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

y se agrega Google Analytics script a su página, como de costumbre.

Answer 3

En cuanto a otras soluciones/complementos posibles, he usado https://github.com/aterris/backbone.analytics en algunos proyectos y funciona bastante bien también. También tiene opciones para algunas cosas más, como el seguimiento de eventos, que puede ser útil en algún momento de su integración analítica.

Answer 4

Acabo de pensar que compartiría cómo lo estoy haciendo. Es posible que esto no funcione para aplicaciones más grandes, pero me gusta informarle manualmente a GA cuándo realizar un seguimiento de visitas a la página u otros eventos. Intenté vincularme a "todos" o "enrutar" pero no logré que registrara todas las acciones que necesito de manera automática.

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

Así que sólo llamo App.Router.Main.track(); después de navegar o hacer lo que quiera hacer un seguimiento.

Tenga en cuenta que utilizo el nuevo fragmento de seguimiento Analytics.js que actualmente está en versión beta pública pero tiene una API tan intuitiva que elimina la necesidad de un complemento para abstraer cualquier complejidad. Por ejemplo: puedo realizar un seguimiento de cómo muchas personas se desplazan a fin de una vista infinita de desplazamiento de esta manera:

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

Buena suerte.

Answer 5

escribí un pequeño puesto en esto, espero que ayude a alguien:

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

Si utiliza las nuevas analytics.js universales, que puede hacer que de esta manera:

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

Todas las respuestas parecen ser casi bueno, pero desactualizado (Sept. 2015). Después de esto Google guía de desarrolladores: https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications aquí está mi versión de la solución (He añadido la llamada sugerido a 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

la simple publicación de una actualización a esta pregunta, ya que parece ser uno Tengo un montón de los desarrolladores de backbone.js que conozco o trabajo con quienes parecen caer en el último obstáculo.

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

El fragmento de seguimiento:

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

El fragmento de seguimiento debería estar disponible en cualquier página que desea realizar un seguimiento de la actividad. Este podría ser su index.html donde se inyecta todo su contenido, pero algunos sitios pueden tener varias páginas estáticas o una mezcla. Puede incluir la función ga ('enviar') si lo desea, pero solo se activará al cargar la página.

me ha escrito una entrada de blog que va en más detalle, explicando en lugar de mostrar el proceso completo, que se puede encontrar aquí: http://v9solutions.co.uk/tech/2016/02/15/how-to-add-google-analytics-to-backbone.js.html