web-dev-qa-db-fra.com

Gestionnaire de balises Google avec AngularJS?

Comment utiliser GTM avec Angular?

J'essaie de déclencher un événement de consultation de page (virtuel) lorsque je charge un nouveau partiel à l'aide de ce code:

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

Mais je ne vois pas l'événement se déclencher (j'utilise l'extension de débogage Google Analytics Chrome pour afficher les événements déclenchés).

javascriptangularjsgoogle-analyticsgoogle-analytics-apigoogle-tag-manager
18
Christian THC

Je trouve l’extension Chrome peu fiable . Il suffit d’exécuter la variable globale dataLayer dans la console pour imprimer le tableau des événements. L'un des objets doit être votre événement de page view.

Voici un exemple d'utilisation de ce logiciel:

Remarque: nous n'utilisons pas simplement $location.path(), mais tout ce qui se trouve dans l'URL après le domaine. Ce qui inclut les .search() & .hash().

$ emplacement dans les documents Angular

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);

services/analytic.js

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

En GTM

Vous aurez besoin de macros {{virtualUrl}} et {{event}} qui écoutent les variables dataLayer du même nom.

Vous aurez besoin d'une balise de suivi des événements Google Analytics avec une règle d'activation qui se déclenche lorsque {{event}} est égal à 'virtualPageView'. Assurez-vous de supprimer la règle par défaut 'Toutes les pages', qui permet de l'exécuter à chaque chargement de page. Au lieu de cela, vous souhaitez qu'il s'exécute lorsque vous dataLayer.Push() l'événement, ce qui peut se produire plusieurs fois par actualisation de la page.

La balise doit être configurée avec:

  1. Type de piste == 'Vue de page'
  2. Plus de paramètres> Configuration de base> Chemin de page virtuel == '{{virtualUrl}}'
23
Mike Causer

Je vous recommande fortement d'utiliser la bibliothèque angulartics . Je l'ai utilisé sur plusieurs sites. Cela vous permet de courir assez vite.

Il inclut un support pour les vues de page virtuelles et les événements prêts à l'emploi. Il ne prend pas en charge le commerce électronique GA mais prend en charge l’extensibilité.

Aussi - j'ai utilisé à la fois avec GTM et Piwik.

1
Kunal

Semblable à la réponse acceptée, nous avons créé une solution plus simple et plus explicite utilisant une variable pagename dans un code JavaScript de notre contrôleur pour notre application à page unique, 

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

et les pousser dans le dataLayer comme ceci:

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

Ensuite, dans GTM, nous avons ajouté des déclencheurs dans GTM comme suit:

Trigger: Custom Event
Event Name: home-page

... à propos de page, faq-page, etc.

Pour les applications angulaires plus complexes, il existe quelques extensions disponibles pour utiliser Google Analytics et Google Tag Manager avec Angular.

Voir Angulartics (qui prend également en charge des solutions d’analyse Web autres que Google Analytics via son architecture de plug-in) et le package NPM associé à GTM .

0
phpguru

Pas besoin d'ajouter du code. 

Configurez un déclencheur "changement d’historique", déclenché par des changements d’itinéraire angulaires, ajoutez-le comme déclencheur à votre balise "pages vues".

0
natanavra