222 votos

Rastreando vistas de páginas de Google Analytics con Angular.JS

Estoy preparando una nueva aplicación usando Angular.JS como interfaz. Todo en el lado del cliente se hace con HTML5 pushstate y me gustaría ser capaz de rastrear las visitas a mi página en Google Analytics.

241voto

dj2 Puntos 3998

Si estás usando ng-view en tu aplicación Angular puedes escuchar el $viewContentLoaded y empuja un evento de rastreo a Google Analytics.

Asumiendo que has configurado tu código de rastreo en tu archivo principal index.html con un nombre de var _gaq y MyCtrl es lo que has definido en el ng-controller directiva.

function MyCtrl($scope, $location, $window) {
  $scope.$on('$viewContentLoaded', function(event) {
    $window._gaq.push(['_trackPageView', $location.path()]);
  });
}

UPD: para la nueva versión de google-analytics usa esta

$window.ga('send', 'pageview', { page: $location.path() });

57voto

Haralan Dobrev Puntos 2682

Cuando se carga una nueva vista en AngularJS Google Analytics no lo cuenta como una nueva carga de página. Afortunadamente hay una forma de decirle manualmente a GA que registre una url como una nueva página.

_gaq.push(['_trackPageview', '<url>']); haría el trabajo, ¿pero cómo unir eso con la AngularJS?

Aquí hay un servicio que podría utilizar:

(function(angular) { 

  angular.module('analytics', ['ng']).service('analytics', [
    '$rootScope', '$window', '$location', function($rootScope, $window, $location) {
      var track = function() {
        $window._gaq.push(['_trackPageview', $location.path()]);
      };
      $rootScope.$on('$viewContentLoaded', track);
    }
  ]);

}(window.angular));

Cuando defina su módulo angular, incluya el módulo de análisis así:

angular.module('myappname', ['analytics']);

48voto

dpineda Puntos 389
app.run(function ($rootScope, $location) {
    $rootScope.$on('$routeChangeSuccess', function(){
        ga('send', 'pageview', $location.path());
    });
});

40voto

wynnwu Puntos 281

Sólo una adición rápida. Si estás usando la nueva analítica.JS, entonces:

var track = function() {     
 ga('send', 'pageview', {'page': $location.path()});                
};

Además, un consejo es que Google Analytics no disparará al anfitrión local. Así que si estás probando en localhost, usa lo siguiente en lugar de la creación por defecto ( documentación completa )

ga('create', 'UA-XXXX-Y', {'cookieDomain': 'none'});

27voto

luisfarzati Puntos 1592

Puedes comprobar http://luisfarzati.github.io/angulartics que es un módulo de análisis agnóstico para Angular. Actualmente sólo es compatible con Google Analytics, ¡pero en un futuro próximo vendrán más proveedores!

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X