GTM nach dem Zufallsprinzip überspringt ersten Seitenaufruf in Einzelseite App

Ich habe Pageview Tag im Google Tag Manager, die SPA Seitenaufrufe verfolgt, identisch mit dem in this guide beschriebenen. Grundsätzlich ist es Universal Analytics mit verknüpften Google Analytics ID, die auf ausgelöst wird Geschichte Änderung (irgendwann All Pages Trigger wurde auch ohne Erfolg hinzugefügt).GTM nach dem Zufallsprinzip überspringt ersten Seitenaufruf in Einzelseite App

In meiner aktuellen App überspringt GTM Pageview Tag auf ersten Seitenaufrufe auf allen Routen, die keine asynchronen Resolver haben. Normalerweise feuern die Routen das Tag manchmal (1 von 5 mal), dies kann je nach den Bedingungen etwas variieren (cached vs uncached, localhost vs production).

Auf den Routen, die Resolver mit langen Dauern (> 1s) haben, wird Pageview Tag immer auf erste Seitenaufrufe (5 von 5 Mal) gefeuert.

Pageview Das Tag wird normalerweise auf allen Routen nach der App-Initialisierung abgefeuert (pushState).

Dieses Verhalten wurde mit GTM Debug-Konsole und GA-Echtzeitüberwachung bestätigt.

Die Einstellung scheint die empfohlene zu sein, GTM snippet ist geladen in <head>, Angular 2 App wird am Ende <body> geladen.

<html> 
    <head> 
    <script>/* Google Tag Manager snippet */</script> 
    ... 
    </head> 

    <body my-app> 
    ... 
    <script src="my-app-bundle.js"></script> 
    </body> 
</html>

und eckig 2 wie üblich Bootstrap:

platformBrowserDynamic().bootstrapModule(MyAppModule);

Ich habe versucht, GTM zu bewegen Schnipsel überall, vor und nach my-app-bundle.js, auch mit Synchron ersetzen:

<script> 
    window.dataLayer = ... 
</script> 
<script src="https://www.googletagmanager.com/gtm.js?id=..."></script>

Es gab keinen Unterschied zum Standard-Snippet.

ich durch Versuch und Irrtum gefunden habe, dass Pageviews Start normalerweise beim ersten Seitenaufruf zu arbeiten, wenn die App mit erheblicher Verzögerung Bootstrap ist, 200-1000ms (es schien zunächst an, dass DOMContentLoaded funktioniert der Trick aber die Verzögerung war nicht genug):

setTimeout(() => { 
    platformBrowserDynamic().bootstrapModule(MyAppModule); 
}, 1000);

ich hoffe, dass dieses Problem auf die Experten vertraut ist, die GTM mit SPA/Schräg 2-Anwendungen getan haben. Leider kann ich MCVE für diesen Fall nicht bereitstellen, aber ich glaube, dass es mit jeder Angular 2 (2.3.1) App mit Routing und dem Google Tag Manager-Konto repliziert werden kann.

Normalerweise Angular 2 Apps können am Ende von <body> sicher Bootstrapped werden.

Was passiert dort und wie sollte das Seitenaufruf-Tracking mit GTM ohne Rennbedingungen richtig gehandhabt werden?

UPDATE: Wenn von GTM Umschalten auf GA mit direkt mit

router.events.subscribe(e => { 
    if (e instanceof NavigationEnd) 
    ga('send', 'pageview', location.pathname); 
})

alles funktioniert auf Erst- und Folgeseitenzugriffe ohne Rennbedingungen.

UPDATE 2:

Hier ist eine Zeitleiste, wie es aussieht im Erfolgsfall mit Langlaufstrecke Resolver, gtm.js und main.bundle.js sind am Anfang geladen (es spielt keine Rolle in die Reihenfolge), analytics.js (analytics_debug.js wenn GA Debugger ist) geladen wird, wenn Route Resolver abgeschlossen und Pageview Tag wird gefeuert, dh nach ~ 10s:

Quelle

2017-01-14 estus

Ich bin mir nicht sicher, ob dies in diesem Fall helfen würde; aber die google-sign-in button muss in NgAfterViewInit aufgrund eines sehr ähnlichen problems manuell gerendert werden. Gibt es eine manuelle Funktion, die Sie in dieser Bibliothek aufrufen können, um das gewünschte Verhalten auszulösen? – BradleyDotNET

@BradleyDotNET Leider nein. Es sieht so aus, als ob die A2-App an den GTM-Lebenszyklus angepasst sein sollte, nicht umgekehrt (derzeit sieht es so aus, als würde die App auf das Fenster 'load' geladen werden, um darauf zu passen). – estus

Wie @kemsky vorgeschlagen, GTM Lebenszyklus ist an interne gtm.load Ereignis gebunden, was am Fenster passiert onload. So DOMContentLoaded kann zu früh zum Bootstrap sein.

Bedenkt man, dass GTM Skript vor Skript SPA geladen wurde,

window.addEventListener('load',() => { 
    platformBrowserDynamic().bootstrapModule(MyAppModule); 
});

Rückruf ausgelöst wird, wenn GTM bereit ist Geschichte Änderungsereignisse zu empfangen, und es sollte keine Rennbedingungen sein.

Quelle

2017-01-29 06:55:33 estus

Aber dies wird App Bootstrap verzögern. Kann man dies ohne Leistungseinbußen beheben? – hex

@hex Ich denke, es ist so oder so. Der andere Weg wäre das Hacken von GTM-Quellcode, was keine Option ist. Aus meiner Erfahrung war Verspätung vernachlässigbar (musste zu GA wechseln, um GTM Overhead irgendwie zu vermeiden). Fühlen Sie sich frei, mit Ihren Messungen zu aktualisieren, wenn Sie Leistungsprobleme aufgrund von 'window.addEventListener ('load' ...)' haben. – estus

Es lo oks wie analytics scripts werden mit <script async=true> geladen:

j.async = true; oder a.async = 1;

Versuchen Sie, async zu entfernen und sehen, ob es hilft.

Quelle

2017-01-22 22:08:14 kemsky

Es wurde bereits in der Frage erwähnt, 'sogar ersetzen Sie es mit synchron:'. – estus

Sie haben es mit 'gtm.js' versucht, aber' gtm.js' lädt 'analytics.js' und es wird auch async geladen. Es sieht so aus, als ob Sie gtm entweder nicht verwenden sollten oder das 'gtm.load'-Ereignis verwenden, um die Anwendung zu starten. – kemsky

Ich glaube nicht, dass dies der Fall ist. Es ist kaum zu glauben, dass GTM so dumm ist. Ich habe die Frage mit einem Screenshot aktualisiert, der bestätigt, dass dies nicht der Fall ist. GTM lädt analytics.js bei Bedarf. Das Problem ist nicht, dass GA nicht geladen ist, aber das Tag nicht gefeuert wird (es ist in der GTM-Debug-Leiste zu sehen). – estus

Sie können den Auslöser Ihrer UA Seitenaufruf-Tag aus Glatt- ‚Seitenzugriff‘ ändern und dabei zu bleiben benutzerdefinierte Ereignis bei NavigationEnd gefeuert

router.events.subscribe(e => { 
    if (e instanceof NavigationEnd) { 
    dataLayer = window.dataL 
    dataLayer.push({'event':'custom pageview event'}); 
    } 
})

Quelle

2018-02-19 09:05:48

GTM nach dem Zufallsprinzip überspringt ersten Seitenaufruf in Einzelseite App

Antwort

Verwandte Themen