Seguimiento de visitas a páginas de Google Analytics con AngularJS
Estoy configurando una nueva aplicación usando AngularJS como interfaz. Todo en el lado del cliente se hace con HTML5 pushstate y me gustaría poder realizar un seguimiento de las vistas de mi página en Google Analytics.
Si lo está utilizando ng-viewen su aplicación Angular, puede escuchar el $viewContentLoadedevento y enviar un evento de seguimiento a Google Analytics.
Suponiendo que haya configurado su código de seguimiento en su archivo index.html principal con el nombre de var _gaqMyCtrl es lo que ha definido en la ng-controllerdirectiva.
function MyCtrl($scope, $location, $window) {
$scope.$on('$viewContentLoaded', function(event) {
$window._gaq.push(['_trackPageView', $location.url()]);
});
}
ACTUALIZACIÓN: para la nueva versión de Google Analytics utilice esta
function MyCtrl($scope, $location, $window) {
$scope.$on('$viewContentLoaded', function(event) {
$window.ga('send', 'pageview', { page: $location.url() });
});
}
Cuando se carga una nueva vista en AngularJS, Google Analytics no la cuenta como una nueva carga de página. Afortunadamente, existe una manera de indicarle manualmente a GA que registre una URL como una nueva página vista.
_gaq.push(['_trackPageview', '<url>']);Haría el trabajo, pero ¿cómo vincularlo con 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 de esta manera:
angular.module('myappname', ['analytics']);
ACTUALIZAR :
Debe utilizar el nuevo código de seguimiento universal de Google Analytics con:
$window.ga('send', 'pageview', {page: $location.url()});
app.run(function ($rootScope, $location) {
$rootScope.$on('$routeChangeSuccess', function(){
ga('send', 'pageview', $location.path());
});
});
Sólo una rápida adición. Si está utilizando el nuevo Analytics.js, entonces:
var track = function() {
ga('send', 'pageview', {'page': $location.path()});
};
Además, un consejo es que Google Analytics no se activará en localhost. Entonces, si está probando en localhost, use lo siguiente en lugar de la creación predeterminada ( documentación completa )
ga('create', 'UA-XXXX-Y', {'cookieDomain': 'none'});
