google-analytics - pageview - google analytics angular 7
Seguimiento de las páginas vistas de Google Analytics con AngularJS (20)
Cuando se carga una nueva vista en AngularJS , Google Analytics no la cuenta como una nueva carga de página. Afortunadamente, hay una manera de decirle a GA manualmente que registre una url como una nueva página vista.
_gaq.push([''_trackPageview'', ''<url>'']); haría el trabajo, pero ¿cómo vincular eso con AngularJS?
Aquí hay un servicio que podrías 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'']);
ACTUALIZACIÓN :
Debe usar el nuevo código de seguimiento de Universal Google Analytics con:
$window.ga(''send'', ''pageview'', {page: $location.url()});
Estoy configurando una nueva aplicación utilizando AngularJS como la interfaz. Todo lo que hay en el lado del cliente se realiza con el pushstate HTML5 y me gustaría poder realizar un seguimiento de las visitas de mi página en Google Analytics.
En su index.html , copie y pegue el fragmento de código de ga pero elimine la línea ga(''send'', ''pageview'');
<!-- Google Analytics: change UA-XXXXX-X to be your site''s ID -->
<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'');
</script>
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
}
]);
Encontré que la función gtag() funcionó, en lugar de la función ga() .
En el archivo index.html, dentro de la sección <head> :
<script async src="https://www.googletagmanager.com/gtag/js?id=TrackingId"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(''js'', new Date());
gtag(''config'', ''TrackingId'');
</script>
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.
Estoy usando AngluarJS en modo html5. Encontré la siguiente solución como la más confiable:
Utilice angular-google-analytics 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 la escucha 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 su usuario esté inicializado, puede inyectar Analytics allí y hacer llamadas:
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 encontrará útil.
Fusionando 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:
<base href="/store/">
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()
});
}
);
}
]);
Fusionar las respuestas de 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 utilizando el enfoque anterior.
He creado un filtro de servicio que podría ayudarles con esto, y quizás también con otros proveedores si decide agregarlos en el futuro.
Visite https://github.com/mgonto/angularytics y hágame saber cómo funciona esto para usted.
La mejor manera de hacerlo es usar el Administrador de etiquetas de Google para activar sus etiquetas de Google Analytics basadas en oyentes del historial. Estos están integrados en la interfaz GTM y permiten el seguimiento de las interacciones HTML5 del lado del cliente.
Habilite las variables de Historial incorporadas y cree un disparador para activar un evento en función de los cambios del historial.
Los desarrolladores que crean aplicaciones de página única pueden usar el autotrack , que incluye un complemento urlChangeTracker que maneja todas las consideraciones importantes que se enumeran en esta guía para usted. Consulte la autotrack para obtener instrucciones de uso e instalación.
Para aquellos de ustedes que usan AngularUI Router en lugar de ngRoute pueden usar el siguiente código para rastrear las vistas de la página.
app.run(function ($rootScope) {
$rootScope.$on(''$stateChangeSuccess'', function (event, toState, toParams, fromState, fromParams) {
ga(''set'', ''page'', toState.url);
ga(''send'', ''pageview'');
});
});
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 estas rutas, habría tantas páginas que se están viendo dentro de los análisis, sería muy difícil verificar qué página visitan los usuarios más.
$rootScope.$on(''$viewContentLoaded'', function(event) {
$window.ga(''send'', ''pageview'', {
page: $route.current.templateUrl.replace("views", "")
});
});
Ahora obtengo vistas de página limpias en mis análisis como user-profile.html y message.html lugar de que muchas páginas sean 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 a por qué esto es una mala práctica dentro de la analítica, me encantaría saberlo. Es bastante nuevo en el uso de Google Analytics, por lo que no estoy muy seguro de si este es el mejor enfoque o no.
Sólo una adición rápida. Si está utilizando el nuevo analytics.js, entonces:
var track = function() {
ga(''send'', ''pageview'', {''page'': $location.path()});
};
Además, una sugerencia 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''});
Si alguien quiere implementar el uso de directivas, identifique (o cree) un div en index.html (justo debajo de la etiqueta del cuerpo, o en el mismo nivel de DOM)
<div class="google-analytics"/>
Y luego agregar 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()]);
});
}
};
});
Si busca un control total del nuevo código de seguimiento de Google Analytics, puede usar mi propio Angular-GA .
Hace que el ga esté disponible mediante inyección, por lo que es fácil de probar. No hace ninguna magia, aparte de establecer la ruta en cada cambio de ruta. Todavía tienes que enviar la vista de página como aquí.
app.run(function ($rootScope, $location, ga) {
$rootScope.$on(''$routeChangeSuccess'', function(){
ga(''send'', ''pageview'');
});
});
Adicionalmente, existe una directiva ga que permite vincular múltiples funciones de análisis a eventos, como esto:
<a href="#" ga="[[''set'', ''metric1'', 10], [''send'', ''event'', ''player'', ''play'', video.id]]"></a>
Si está utilizando ui-router, puede suscribirse al evento $ stateChangeSuccess de la siguiente manera:
$rootScope.$on(''$stateChangeSuccess'', function (event) {
$window.ga(''send'', ''pageview'', $location.path());
});
Para un ejemplo completo de trabajo, vea esta entrada de blog
Use GA ''set'' para asegurar 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 en general, en lugar de pasar un tercer parámetro en "enviar". https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications
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() });
});
}
app.run(function ($rootScope, $location) {
$rootScope.$on(''$routeChangeSuccess'', function(){
ga(''send'', ''pageview'', $location.path());
});
});