angular - pageview - GTM omite aleatoriamente la vista de página inicial en una aplicación de página única
history change tag manager (3)
Como sugirió @kemsky, el ciclo de vida de GTM está vinculado al evento interno gtm.load , que ocurre en la ventana de onload . Por DOMContentLoaded tanto, DOMContentLoaded puede ser demasiado temprano para arrancar.
Teniendo en cuenta que el script GTM se cargó antes del script SPA,
window.addEventListener(''load'', () => {
platformBrowserDynamic().bootstrapModule(MyAppModule);
});
la devolución de llamada se activará cuando GTM esté listo para recibir eventos de cambio de historial, y no debería haber condiciones de carrera.
Tengo una etiqueta de vista de página en el Administrador de etiquetas de Google que rastrea las vistas de página de SPA, idéntica a la que se describe en esta guía . Básicamente, es Universal Analytics con el ID de Google Analytics vinculado que se activa en el Cambio de historial (en algún momento, también se agregó el activador de All Pages sin éxito).
En mi aplicación actual, GTM omite la etiqueta de vista de página en las vistas de página iniciales en todas las rutas que no tienen resolutores asíncronos. Por lo general, las rutas activan la etiqueta a veces (1 de 5 veces), esto puede variar un poco según las condiciones (caché frente a no cacheado, localhost vs producción).
En las rutas que tienen resoluciones con duraciones largas (> 1s), la etiqueta de Pageview siempre se activa en las visitas de página iniciales (5 de 5 veces).
Pageview etiqueta Pageview se pushState normalmente en todas las rutas después de la inicialización de la aplicación ( pushState ).
Este comportamiento se confirmó con la consola de depuración GTM y la supervisión en tiempo real de GA.
La configuración parece ser la recomendada, el fragmento de GTM se carga en <head> , la aplicación de Angular 2 se carga al final de <body> .
<html>
<head>
<script>/* Google Tag Manager snippet */</script>
...
</head>
<body my-app>
...
<script src="my-app-bundle.js"></script>
</body>
</html>
Y Angular 2 se arranca como de costumbre:
platformBrowserDynamic().bootstrapModule(MyAppModule);
He intentado mover el fragmento de GTM por todas partes, antes y después de my-app-bundle.js , incluso reemplazarlo con síncrono:
<script>
window.dataLayer = ...
</script>
<script src="https://www.googletagmanager.com/gtm.js?id=..."></script>
No hubo diferencia con el fragmento predeterminado.
He comprobado por prueba y error que las Pageviews comienzan a funcionar normalmente en las visitas de página iniciales si la aplicación se inicia con un retraso considerable, 200-1000 ms (al principio parecía que DOMContentLoaded hace el truco pero la demora no fue suficiente):
setTimeout(() => {
platformBrowserDynamic().bootstrapModule(MyAppModule);
}, 1000);
Espero que este problema sea familiar para los expertos que han hecho GTM con aplicaciones SPA / Angular 2. Desafortunadamente, no puedo proporcionar MCVE para este caso, pero creo que se puede replicar con cualquier aplicación Angular 2 (2.3.1) con enrutamiento y cuenta de Google Tag Manager .
Por lo general, las aplicaciones de Angular 2 se pueden reiniciar de forma segura al final de <body> .
¿Qué está sucediendo allí y cómo se debe manejar adecuadamente el seguimiento de visitas de página con GTM sin condiciones de carrera?
ACTUALIZACIÓN : cuando se cambia de GTM a usar GA directamente con
router.events.subscribe(e => {
if (e instanceof NavigationEnd)
ga(''send'', ''pageview'', location.pathname);
})
todo funciona bien en las visitas de página iniciales y posteriores sin condiciones de carrera.
ACTUALIZACIÓN 2 :
Aquí hay una línea de tiempo de cómo se ve en el caso de éxito con el programa de resolución de rutas de ejecución gtm.js , gtm.js y main.bundle.js se cargan al principio (no importa el orden), analytics.js ( analytics_debug.js cuando GA Debugger está activado) se carga cuando se completa la resolución de rutas y se dispara la etiqueta Pageview , es decir, después de ~ 10s:
Parece que los scripts de análisis se cargan con <script async=true> :
j.async = true; o a.async = 1 ;
Trate de eliminar async y ver si ayuda.
Puede cambiar el desencadenante de su etiqueta de visualización de página UA desde la simple ''visita de página'' y atenerse al evento personalizado activado en NavigationEnd
router.events.subscribe(e => {
if (e instanceof NavigationEnd) {
dataLayer = window.dataL
dataLayer.push({''event'':''custom pageview event''});
}
})