it-swarm.com.de

Google Tag Manager mit AngularJS?

Wie verwende ich GTM mit Angular?

Ich versuche, ein (virtuelles) Pageview-Ereignis auszulösen, wenn ich einen neuen Teil mit folgendem Code lade:

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

Das Ereignis wird jedoch nicht ausgelöst (Ich verwende die Debug-Erweiterung von Google Analytics, um ausgelöste Ereignisse anzuzeigen).

18
Christian THC

Ich finde die Chrome-Erweiterung unzuverlässig . Führen Sie einfach die globale Variable dataLayer in der Konsole aus, um das Array von Ereignissen zu drucken. Eines der Objekte sollte Ihr Seitenaufruf sein.

Hier ist ein Beispiel, wie wir es verwenden:

Hinweis: Wir verwenden nicht einfach $location.path(), sondern alles in der URL nach der Domäne. Dazu gehört die .search() & .hash().

$ Ort in den Angular -Dokumenten

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

In GTM

Sie benötigen {{virtualUrl}}- und {{event}}-Makros, die auf die gleichnamigen dataLayer-Variablen warten.

Sie benötigen ein Google Analytics-Event-Tracking-Tag mit einer Auslösungsregel, die ausgelöst wird, wenn {{event}} 'virtualPageView' entspricht. Stellen Sie sicher, dass Sie die Standardregel "Alle Seiten" entfernen, sodass sie bei jedem Laden der Seite ausgeführt wird. Stattdessen soll es ausgeführt werden, wenn Sie das Ereignis dataLayer.Push() ausführen. Dies kann mehrmals pro Seitenaktualisierung erfolgen.

Das Tag sollte folgendermaßen konfiguriert werden:

  1. Track-Typ == 'Seitenansicht'
  2. Weitere Einstellungen> Grundkonfiguration> Pfad für virtuelle Seiten == '{{virtualUrl}}'
23
Mike Causer

Ich würde Ihnen wärmstens empfehlen, die Bibliothek angulartics zu verwenden. Ich habe es auf mehreren Seiten verwendet. Es läuft ziemlich schnell.

Es beinhaltet die Unterstützung für virtuelle Seitensichten und Ereignisse, die sofort einsatzbereit sind. GA eCommerce wird nicht unterstützt, die Erweiterbarkeit wird jedoch unterstützt.

Außerdem habe ich sowohl mit GTM als auch mit Piwik gearbeitet.

1
Kunal

Ähnlich wie die akzeptierte Antwort haben wir eine einfachere, explizitere Lösung unter Verwendung einer Variablen pagename in einem Javascript in unserem Controller für unsere einseitige App entwickelt. 

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

und schieben Sie sie wie folgt in den dataLayer:

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

Dann haben wir in GTM Auslöser in GTM hinzugefügt:

Trigger: Custom Event
Event Name: home-page

... Info-Seite, FAQ-Seite usw.

Für komplexere eckige Apps stehen einige Erweiterungen zur Verwendung von Google Analytics und Google Tag Manager mit Angular zur Verfügung.

Siehe Angulartics (das über seine Plugin-Architektur auch andere Webanalyselösungen als Google Analytics unterstützt) und das zugehörige NPM-Paket für GTM .

0
phpguru

Keine Notwendigkeit, Code hinzuzufügen. 

Konfigurieren Sie einen Auslöser für die "Verlaufsänderung". Dieser wird durch die Änderung der Winkelrouten ausgelöst und fügt ihn Ihrem Tag "Seitenzugriffe" als Auslöser hinzu.

0
natanavra