Seguimiento de vistas de páginas de Google Analytics con AngularJS

Estoy configurando una nueva aplicación usando AngularJS como frontend. Todo en el lado del cliente está hecho con HTML5 pushstate y me gustaría poder seguir mis visitas a la página en Google Analytics.

Si está utilizando ng-view en su aplicación Angular, puede escuchar el evento $viewContentLoaded 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 un nombre de var _gaq y MyCtrl es lo que ha definido en la directiva ng-controller .

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

 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 carga de página nueva. Afortunadamente, hay una forma de decirle manualmente a GA que registre una url como una nueva página vista.

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

Aquí hay un servicio que puede usar:

 (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 la siguiente manera:

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

ACTUALIZAR :

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

Solo una adición rápida. 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'}); 

Creé un filtro de servicio + que podría ayudarlos con esto, y tal vez también con otros proveedores si decide agregarlos en el futuro.

Consulte https://github.com/mgonto/angularytics y hágame saber cómo funciona esto para usted.

Fusionar las respuestas por wynnwu y dpineda fue lo que funcionó para mí.

 angular.module('app', []) .run(['$rootScope', '$location', '$window', function($rootScope, $location, $window) { $rootScope.$on('$routeChangeSuccess', function(event) { if (!$window.ga) { return; } $window.ga('send', 'pageview', { page: $location.path() }); }); } ]); 

Establecer el tercer parámetro como un objeto (en lugar de solo $ location.path ()) y usar $ routeChangeSuccess en lugar de $ stateChangeSuccess hizo el truco.

Espero que esto ayude.

He creado un ejemplo simple en github usando el enfoque anterior.

https://github.com/isamuelson/angularjs-googleanalytics

Si alguien quiere implementar el uso de directivas, identifique (o cree) un div en el index.html (justo debajo de la etiqueta del cuerpo, o en el mismo nivel de DOM)

 

y luego agregue el siguiente código en la directiva

 myApp.directive('googleAnalytics', function ( $location, $window ) { return { scope: true, link: function (scope) { scope.$on( '$routeChangeSuccess', function () { $window._gaq.push(['_trackPageview', $location.path()]); }); } }; }); 

La mejor forma de hacerlo es usar el Administrador de tags de Google para activar sus tags de Google Analytics en función de los escuchas del historial. Estos están integrados en la interfaz GTM y permiten fácilmente el seguimiento de las interacciones HTML5 del lado del cliente.

Habilite las variables de historial integradas y cree un disparador para activar un evento según los cambios en el historial.

En su index.html , copie y pegue el fragmento ga pero elimine la línea ga('send', 'pageview');

   

Me gusta darle su propio archivo de fábrica my-google-analytics.js con autoinyección:

 angular.module('myApp') .factory('myGoogleAnalytics', [ '$rootScope', '$window', '$location', function ($rootScope, $window, $location) { var myGoogleAnalytics = {}; /** * Set the page to the current location path * and then send a pageview to log path change. */ myGoogleAnalytics.sendPageview = function() { if ($window.ga) { $window.ga('set', 'page', $location.path()); $window.ga('send', 'pageview'); } } // subscribe to events $rootScope.$on('$viewContentLoaded', myGoogleAnalytics.sendPageview); return myGoogleAnalytics; } ]) .run([ 'myGoogleAnalytics', function(myGoogleAnalytics) { // inject self } ]); 

Si usa el enrutador ui, puede suscribirse al evento $ stateChangeSuccess de la siguiente manera:

 $rootScope.$on('$stateChangeSuccess', function (event) { $window.ga('send', 'pageview', $location.path()); }); 

Para ver un ejemplo completo de trabajo, vea esta publicación en el blog

Use el ‘conjunto’ de GA para asegurarse de que las rutas se seleccionen para el análisis en tiempo real de Google. De lo contrario, las llamadas posteriores a GA no se mostrarán en el panel en tiempo real.

 $scope.$on('$routeChangeSuccess', function() { $window.ga('set', 'page', $location.url()); $window.ga('send', 'pageview'); }); 

Google recomienda este enfoque generalmente en lugar de pasar un 3er parámetro en ‘enviar’. https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

Estoy usando AngluarJS en modo html5. Encontré la siguiente solución como la más confiable:

Utilice la biblioteca angular-google-analytics . Inicialízalo con algo como:

 //Do this in module that is always initialized on your webapp angular.module('core').config(["AnalyticsProvider", function (AnalyticsProvider) { AnalyticsProvider.setAccount(YOUR_GOOGLE_ANALYTICS_TRACKING_CODE); //Ignoring first page load because of HTML5 route mode to ensure that page view is called only when you explicitly call for pageview event AnalyticsProvider.ignoreFirstPageLoad(true); } ]); 

Después de eso, agregue listener en $ stateChangeSuccess ‘y envíe el evento trackPage.

 angular.module('core').run(['$rootScope', '$location', 'Analytics', function($rootScope, $location, Analytics) { $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams, options) { try { Analytics.trackPage($location.url()); } catch(err) { //user browser is disabling tracking } }); } ]); 

En cualquier momento, cuando tengas a tu usuario inicializado, puedes inyectar Analytics allí y realizar una llamada:

 Analytics.set('&uid', user.id); 

Estoy usando ui-router y mi código se ve así:

 $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams){ /* Google analytics */ var path = toState.url; for(var i in toParams){ path = path.replace(':' + i, toParams[i]); } /* global ga */ ga('send', 'pageview', path); }); 

De esta manera puedo rastrear diferentes estados. Tal vez alguien lo encuentre útil.

Para aquellos de ustedes que usan AngularUI Router en lugar de ngRoute, pueden usar el siguiente código para rastrear páginas vistas.

 app.run(function ($rootScope) { $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { ga('set', 'page', toState.url); ga('send', 'pageview'); }); }); 

Los desarrolladores que crean aplicaciones de una sola página pueden usar el autotrack , que incluye un plugin urlChangeTracker que maneja todas las consideraciones importantes enumeradas en esta guía. Consulte la documentación de la bandeja de autos para ver las instrucciones de uso e instalación.

Encontré la función gtag() trabajada, en lugar de la función ga() .

En el archivo index.html, dentro de la sección :

   

En el código AngularJS:

 app.run(function ($rootScope, $location) { $rootScope.$on('$routeChangeSuccess', function() { gtag('config', 'TrackingId', {'page_path': $location.path()}); }); }); 

Reemplace TrackingId con su propio ID de seguimiento.

Fusionándose aún más con la respuesta de Pedro López,

Agregué esto a mi módulo ngGoogleAnalytis (que reutilizo en muchas aplicaciones):

 var base = $('base').attr('href').replace(/\/$/, ""); 

en este caso, tengo una etiqueta en mi enlace de índice:

   

es útil cuando se usa el modo html5 en angular.js v1.3

(elimine la llamada a la función replace () si su etiqueta base no termina con una barra inclinada /)

 angular.module("ngGoogleAnalytics", []).run(['$rootScope', '$location', '$window', function($rootScope, $location, $window) { $rootScope.$on('$routeChangeSuccess', function(event) { if (!$window.ga) { return; } var base = $('base').attr('href').replace(/\/$/, ""); $window.ga('send', 'pageview', { page: base + $location.path() }); } ); } ]); 

Personalmente, me gusta configurar mi análisis con la URL de la plantilla en lugar de la ruta actual. Esto se debe principalmente a que mi aplicación tiene muchas rutas personalizadas, como message/:id o profile/:id . Si tuviera que enviar estos caminos, vería tantas páginas dentro de los análisis, sería muy difícil verificar qué página visitan más los usuarios.

 $rootScope.$on('$viewContentLoaded', function(event) { $window.ga('send', 'pageview', { page: $route.current.templateUrl.replace("views", "") }); }); 

Ahora obtengo vistas de página limpias dentro de mi análisis como user-profile.html y message.html lugar de muchas páginas siendo profile/1 , profile/2 y profile/3 . Ahora puedo procesar informes para ver cuántas personas están viendo los perfiles de usuario.

Si alguien tiene alguna objeción sobre por qué esta es una mala práctica dentro de la analítica, estaría más que feliz de saberlo. Muy nuevo en el uso de Google Analytics, por lo que no estoy muy seguro de si este es el mejor enfoque o no.

Si busca el control total del nuevo código de seguimiento de Google Analytics, puede usar mi propio Angular-GA .

Hace ga disponible a través de inyección, por lo que es fácil de probar. No hace ninguna magia, además de establecer el camino en cada cambio de ruta. Aún debe enviar la vista de página como aquí.

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

Además, hay una directiva ga que permite unir múltiples funciones analíticas a eventos, como este: