Tracking von Single Page Applications mit GTM und GA4

Aktualisiert: Montag, 3. Juni 2024

Was ist eine Single Page Application (oder SPA)?

Eine Single Page Application ist eine Art von Website, die den gesamten für die Navigation notwendigen Code bereits auf der ersten Seite lädt. Wie der Name schon sagt, handelt es sich um eine Anwendung, die nur aus einer einzigen Seite besteht.

SPAs werden häufig mit den Javascript-Frameworks Angular, React und Vue.js erstellt.

Google Analytics 4 bietet eine Standardfunktion für das Tracking von SPAs, die jedoch in Ihrem Fall möglicherweise nicht funktioniert. Aus diesem Grund werden wir uns in diesem Artikel drei verschiedene Methoden ansehen.

Was ist die History API in Javascript?

Ohne auf technische Details einzugehen, geht es hier darum, die Funktionsweise von SPAs zu verstehen.

Das History-Objekt ist eine globale Javascript-Variable, die von den meisten SPAs zur Manipulation des Browserverlaufs verwendet wird.

Die globale Javascript-Variable history
Die globale Javascript-Variable history

Wenn Sie mit einer recht alten SPA arbeiten, kann es sein, dass sie die History API von Javascript nicht verwendet und in diesem Fall müssen Sie Google Analytics 4 über Methode 3 installieren.

Die 3 Methoden, um einen SPA mit GTM und GA4 zu tracken

Methode 1: GA4 mit den Standardeinstellungen belassen

Wir wollen nun sehen, was passiert, wenn ich den Tag zur Einrichtung einer neuen GA4-Eigenschaft auf allen Seiten installiere.

Ich erhalte nun History-Ereignisse (gtm.historyChange-v2) und History Change-Ereignisse (page_view).

Das Ereignis gtm.historyChange-v2 wird genauso oft ausgelöst wie das Ereignis gtm.historyChange, da sie auf dieselben Ereignisse hören (die der History API).

Im Gegensatz dazu wird gtm.historyChange-v2 von GA4 verwaltet, während gtm.historyChange von GTM verwaltet wird.

Deshalb löst gtm.historyChange-v2 anschließend ein page_view-Ereignis aus (in GTM History Change genannt).

Dieses page_view-Ereignis ermöglicht es dann, alle Seitenaufrufe mithilfe der history API nachzuverfolgen.

Diese Funktion ist in den verbesserten Maßnahmen von GA4 standardmäßig aktiviert und kann deaktiviert werden, wenn Sie dies für notwendig erachten. Wenn Sie mehr Informationen im Ereignis page_view übermitteln wollen, sind Sie gezwungen, Methode 3 zu verwenden.

Die Standardkonfiguration einer GA4-Eigenschaft auf Seitenansichten, die mit dem Browserverlauf verknüpft sind
Die Standardkonfiguration einer GA4-Eigenschaft auf Seitenansichten, die mit dem Browserverlauf verknüpft sind

Methode 2: Seitenaufrufe mit dem Auslöser Verlaufsänderung in GTM tracken

Um diese Methode zu verwenden, deaktiviere ich das Tracking von Seiten bei der Änderung des Browserverlaufs in den Einstellungen für verbesserte Messungen in GA4.

Deaktivierung der mit dem Browserverlauf verknüpften Seitenansichten
Deaktivierung der mit dem Browserverlauf verknüpften Seitenansichten

Ich habe nur noch das Ereignis gtm.historyChange, das Ereignis gtm.historyChange-v2 ist nicht mehr im Data Layer vorhanden.

Ich werde nun alle meine GA4-Ereignisse aktualisieren, um die Parameter page_location und page_referrer zu überschreiben, indem ich die Variablen verwende, die vom Auslöser für die Geschichtsänderung gesendet wurden.

Dazu erstelle ich eine Ereignisvariable für den Google-Tag (Google tag: Event settings) und fülle die beiden Parameter aus.

Verwenden Sie die Google tag: Event settings Variable, um die Parameter page_location und page_referrer auszufüllen.
Verwendung der Google tag: Event settings Variable, um die Parameter page_location und page_referrer zu setzen.

Von nun an habe ich zwei Möglichkeiten:

  1. die Einstellungen für gemeinsame Ereignisse (Shared event settings) des Google-Tags verwenden. Dadurch werden die gefüllten Einstellungen auf alle GA4-Ereignisse angewendet vorausgesetzt, dass für alle GA4-Ereignisse das Google-Tag vorher ausgelöst wird.
Die Parameter page_location und page_referrer wurden zu den Parametern für geteilte Ereignisse im Google-Tag hinzugefügt.
Hinzufügen der Parameter page_location und page_referrer zu den Parametern für geteilte Ereignisse im Google-Tag.
  1. Fügen Sie die Parameter zu allen GA4-Ereignissen hinzu (dadurch wird sichergestellt, dass alle Ereignisse die Parameter haben).

In dem Ereignis page_view


Hinzufügen der Parameter page_location und page_referrer zu den Einstellungen des Ereignisses page_view
Hinzufügen der Parameter page_location und page_referrer zu den Einstellungen des Ereignisses page_view

In allen anderen Ereignissen

Hinzufügen der Parameter page_location und page_referrer zu den Parametern der GA4-Ereignisse
Hinzufügen der Parameter page_location und page_referrer zu den Parametern der GA4-Ereignisse

Methode 3: Seitenaufrufe über den Data Layer tracken


Um diese Methode zu nutzen, deaktiviere ich in den Einstellungen für die verbesserten Messungen von GA4 die Seitenverfolgung bei Änderungen des Browserverlaufs.

Deaktivierung der mit dem Browserverlauf verknüpften Seitenansichten
Deaktivierung der mit dem Browserverlauf verknüpften Seitenansichten

In Methode 3 wird ein Entwickler angewiesen, ein page_view-Ereignis im Data Layer zu senden, wenn der Benutzer die Ansicht in der SPA wechselt.

dataLayer.push(
    {
        event: "page_view",
        virtual_page_title: "Tour of Heroes - Dashboard",
        virtual_page_location: "/dashboard",
        virtual_page_referrer: "/heroes".
    }
);

Nachdem der Entwickler die Datenschicht eingerichtet hat, werde ich alle meine GA4-Ereignisse aktualisieren, um die Parameter page_title, page_location und page_referrer mithilfe der Variablen zu überschreiben, die vom Auslöser für die Verlaufsänderung gesendet wurden.


Dazu erstelle ich eine Ereignisvariable für den Google-Tag (Google tag: Event settings) und fülle diese drei Parameter aus.

Verwenden Sie die Google tag: Event settings Variable, um die Parameter page_title, page_location und page_referrer auszufüllen.
Die Variable Google tag: Event settings wird verwendet, um die Parameter page_title, page_location und page_referrer zu setzen.

Von nun an habe ich zwei Möglichkeiten:

  1. die Einstellungen für gemeinsame Ereignisse (Shared event settings) des Google-Tags verwenden. Dadurch werden die gefüllten Einstellungen auf alle GA4-Ereignisse angewendet vorausgesetzt, dass für alle GA4-Ereignisse das Google-Tag vorher ausgelöst wird.
Die Parameter page_title, page_location und page_referrer wurden zu den Parametern für gemeinsame Ereignisse des Google-Tags hinzugefügt.
Hinzufügen der Parameter page_title, page_location und page_referrer zu den Parametern der geteilten Ereignisse des Google-Tags.
  1. Fügen Sie die Parameter zu allen GA4-Ereignissen hinzu (so wird sichergestellt, dass alle Ereignisse die Parameter haben).

In dem Ereignis page_view


Hinzufügen der Parameter page_title, page_location und page_referrer zu den Einstellungen des Ereignisses page_view
Hinzufügen der Parameter page_title, page_location und page_referrer zu den Einstellungen des Ereignisses page_view

In allen anderen Ereignissen

Hinzufügen der Parameter page_title, page_location und page_referrer zu den Parametern der GA4-Ereignisse
Hinzufügen der Parameter page_title, page_location und page_referrer zu den Parametern der GA4-Ereignisse