javascript - Google Tag Manager con AngularJS?

google analytics angularjs

Question

¿Cómo uso GTM con Angular?

Estoy intentando disparar un evento de vista de página (virtual) cuando cargo un nuevo parcial usando este código:

dataLayer.push({
    ''event'' : ''pageview'',
    ''pageview'' : $location.path(),
    ''virtualUrl'' : $location.path()
 });

Pero no veo que el evento se active (estoy usando la extensión de depuración Google Analytics Chrome para ver los eventos activados).

Answer 1

Encuentro que la extensión de Chrome no es confiable. Simplemente ejecute la variable global dataLayer en la consola para imprimir la matriz de eventos. Uno de los objetos debería ser su evento de vista de página.

Aquí hay un ejemplo de cómo lo estamos usando:

Nota: no estamos simplemente usando $location.path() , sino todo en la url después del dominio. Que incluye el .search() y .hash() .

$ ubicación en los documentos angulares

modules / analytic.js

(function(window, angular) {
    ''use strict'';
    angular.module(''Analytic.module'', [''Analytic.services'']).
        run(function($rootScope, $window, $location, GoogleTagManager) {
            $rootScope.$on(''$viewContentLoaded'', function() {
                var path= $location.path(),
                    absUrl = $location.absUrl(),
                    virtualUrl = absUrl.substring(absUrl.indexOf(path));
                GoogleTagManager.push({ event: ''virtualPageView'', virtualUrl: virtualUrl });
            });
        });
})(window, window.angular);

servicios / analytic.js

(function() {
    angular.module(''Analytic.services'', []).
        service(''GoogleTagManager'', function($window) {
            this.push = function(data) {
                try {
                    $window.dataLayer.push(data);
                } catch (e) {}
            };
        });
})();

En GTM

Necesitarás {{virtualUrl}} y {{event}} Macros que escuchen las variables dataLayer del mismo nombre.

Necesitará una etiqueta de seguimiento de eventos de Google Analytics con una regla de activación que se activa cuando {{event}} es igual a ''virtualPageView''. Asegúrese de eliminar la regla predeterminada ''Todas las páginas'' que lo ejecuta en cada carga de página. En su lugar, desea que se ejecute cuando dataLayer.push() el evento, que puede suceder varias veces por actualización de página.

La etiqueta debe configurarse con:

1. Tipo de seguimiento == ''Vista de página''
2. Más Configuración> Configuración básica> Ruta de página virtual == ''{{virtualUrl}}''

Answer 2

Similar a la respuesta aceptada, creamos una solución más simple y más explícita utilizando una variable de nombre de página en un Javascript en nuestro controlador para nuestra aplicación de una sola página,

// Note, this may not be how your app works, YMMV
var pagename = $location.path().substr(1,$location.path().length);

y empújelos a dataLayer de esta manera:

window.dataLayer.push({''event'':pagename+''-page''})

Luego en GTM agregamos desencadenantes en GTM de la siguiente manera:

Trigger: Custom Event
Event Name: home-page

... about-page, faq-page, etc.

Para aplicaciones angulares más complejas, hay algunas extensiones disponibles para usar Google Analytics y Google Tag Manager con Angular.

Consulte Angulartics (que también es compatible con soluciones de análisis web distintas de Google Analytics a través de su arquitectura de complemento) y el paquete de NPM relacionado para GTM .

Answer 3

Recomiendo encarecidamente que use la biblioteca angulartics . Lo he usado en múltiples sitios. Te hace correr bastante rápido.

Incluye soporte para vistas de páginas virtuales y eventos listos para usar. No es compatible con GA eCommerce, pero tiene soporte para extensibilidad.

Además, he usado tanto con GTM como con Piwik.

Answer 4

La forma posible de hacerlo es usar el servicio $window .
Mire esta respuesta para probar, si funciona: Seguimiento de vistas de páginas de Google Analytics con Angular.js
Espero que funcione.