Dieses Dokument richtet sich an Entwickler, die Seitenaufrufe auf ihren Single-Page-Anwendung mit Google Analytics.
Einseitige Anwendungen (SPA) sind Websites, die ein HTML-Dokument einmal laden und zusätzliche mithilfe von JavaScript-APIs.
Beispiel: Angenommen, Sie haben ein Formular, um Leads zu gewinnen. Das Formular enthält drei Bildschirme:
- Erster Bildschirm zum Erfassen der Kundendaten.
- Zweiter Bildschirm, auf dem Kunden Interesse an bestimmten Dienstleistungen bekunden.
- Seite mit drittem Bildschirm zur Anmeldung für Webinare mit Bezug zu den Interessen des Kunden.
Für die korrekte Messung der Seitenaufrufe von SPAs ist es wichtig, jeden Bildschirm, mit dem ein Nutzer interagiert, und die Referrer-URL der Seite richtig zu ermitteln, damit Sie die die User Journey zu verfolgen.
Hinweis
Folgende Voraussetzungen sollten erfüllt sein:
Ein Google Analytics 4-Konto und eine Property für Ihre Website. Hier erfahren Sie, wie Sie Google Analytics:
Ein auf Ihrer Website implementiertes Google-Tag, das ausgelöst wird, wenn die Seite anfangs geladen wird. Weitere Informationen zum Einrichten des Google -Tag.
Analyse von Single-Page-Anwendungen implementieren
Um eine genaue Messung der SPA zu implementieren, können Sie mit einer dieser Methoden eine neue virtueller Seitenaufruf:
Änderungen am Browserverlauf (empfohlen): Wenn Ihre SPA die Option Verlauf API, insbesondere
pushState()
undreplaceState()
verwenden, um Bildschirme zu aktualisieren, Option.Benutzerdefinierte Ereignisse: Wenn auf Ihrer Website die
DocumentFragment
verwendet wird zum Rendern verschiedener Bildschirme verwendet werden, verwenden Sie diese Option.
Implementierung von benutzerdefinierten Ereignissen
Wenn du page_view
-Ereignisse selbst implementierst, achte darauf, dass die folgende Website
wenn sich der Bildschirm ändert:
- Setzen Sie
page_referrer
undpage_location
auf die richtigen Werte für Attribution Neues
page_view
-Ereignis senden
gtag.js
Speichern Sie die alte und die neue URL Ihrer Single-Page-Anwendung, auf die Werte zugreifen, wenn Sie das Ereignis
page_view
manuell senden.Erstellen Sie eine Funktion, die
page_referrer
undpage_location
aktualisiert zu den entsprechenden Bildschirmen Ihrer SPA.
Optional: So aktualisieren Sie die Werte zuvor festgelegt haben, ohne das Google-Tag neu zu initialisieren, geben Sie Schlüssel/Wert-Paar'update': true
.Optional: Benutzerdefinierte Dimensionen, um benutzerdefinierte Dimensionen und Messwerte zu aktualisieren Fügen Sie sie beim neuen virtuellen Seitenaufruf in den
config
-Befehl ein. Weitere Informationen zu benutzerdefinierten Dimensionen und Messwerte.Ein
page_view
-Ereignis senden, um den Bildschirmwechsel als Seitenaufruf zu zählen. Beispiel:// Store current URL path and query in a variable. const oldUrl = window.location.href.split('#')[0]; // Change to new URL. history.pushState({}, undefined, newUrl); // Measure page change. function OnPageChange(oldUrl, newUrl) { gtag('config', 'G-XXXXXX', { 'send_page_view': false, 'page_referrer': oldUrl, 'page_location': newUrl, 'update': true, }); gtag('event', 'page_view'); }
Die Funktion
OnPageChange
auslösen, wenn ein neues virtuelles Seitenaufruf.
Tag Manager
Wenn Sie mit Tag Manager eine SPA messen möchten, benötigen Sie zwei Google-Tags mit demselben Tag ID im Container. Das erste Google-Tag wird geladen, wenn die Website geladen wird und die für die Messung erforderlichen Parameter festgelegt werden. Das zweite Google-Tag wird ausgelöst, wenn sich die URL Ihrer Website ändert. Schließlich müssen Sie manuell ein Seitenaufrufereignis senden, um die neue virtuelle Seite aufzuzeichnen.
1. Google Analytics-Datenstream für die SPA-Messung vorbereiten
So erfassen Sie page_view
-Ereignisse manuell:
Öffnen Sie Google Analytics.
Gehen Sie unter Verwaltung so vor: Klicken Sie unter Datenerhebung und -änderung auf Datenstreams.
Klicken Sie unter Optimierte Analysen auf das Symbol „Einstellungen“.
Gehen Sie unter Seitenaufrufe > Erweiterte Einstellungen anzeigen, löschen Sie Seitenänderungen basierend auf Ereignissen im Browserverlauf. Sie zeichnen den Browser manuell auf den Verlauf der Änderungen in Tag Manager.
Klicken Sie auf Speichern.
2. Google-Tag für virtuelle SPA-Seitenaufrufe erstellen
Öffnen Sie in Ihrem Arbeitsbereich das Menü „Tags“.
Wählen Sie Neu aus, um ein Tag zu erstellen.
Wählen Sie unter Tag-Konfiguration das Google-Tag aus.
Geben Sie dieselbe Google-Tag-ID wie im ersten Google-Tag ein.
Geben Sie unter Konfigurationseinstellungen die folgenden Parameter an:
page_referrer
: {{Old History URL
}}page_location
: {{New History URL
}}update
:true
Optional: Geben Sie beliebige benutzerdefinierte Dimensionen und mit dem neuen virtuellen Seitenaufruf aktualisiert.
Legen Sie unter Trigger Folgendes fest:
- Erstellen Sie unter Trigger auswählen einen neuen Trigger (+).
- Wählen Sie unter Triggerkonfiguration den Trigger Verlaufsänderung aus. Weitere Informationen zur Änderung des Verlaufs auslösen. Marke wird dieses Tag nur ausgelöst, wenn ein neuer Bildschirm erscheint.
- Geben Sie einen Namen für den Trigger ein und klicken Sie auf Speichern.
Geben Sie einen Namen für das Tag ein und klicken Sie auf Speichern. Das Google-Tag sollte so aussehen:
3. Neues Seitenaufrufereignis auslösen
Erstellen Sie im Tag Manager-Arbeitsbereich ein Tag vom Typ Neu.
Wählen Sie unter Tag-Konfiguration die Option Google Analytics: GA4-Ereignis aus. Tag.
Geben Sie den Messwert ein ID für das Tag. Diese ID stimmt mit der Google-Tag-ID überein, die Sie im vorherigen Tag verwendet haben.
Wenn Sie ein neues Seitenaufrufereignis senden möchten, fügen Sie
page_view
als Ereignisname hinzu.Legen Sie unter Trigger den Trigger für die Verlaufsänderung fest. Dies sollte der denselben Trigger wie für das Google-Tag, das Sie eingerichtet haben.
Geben Sie einen Namen für das Tag ein und klicken Sie auf Speichern.
Einrichtung der Analyse überprüfen
So überprüfen Sie, ob Ihre Single-Page-Anwendung Seitenaufrufe korrekt erfasst:
Aktivieren Sie den Debug-Modus für jedes Tag in der SPA-Messung. Hier erfahren Sie, wie Sie Überwachen Sie Ereignisse in DebugView verwenden.
Klicken Sie sich durch Ihre Single-Page-Anwendung. Wenn Sie auf eine neue virtuelle sollten Sie in DebugView ein neues
page_view
-Ereignis sehen. Vergleichen Sie diepage_view
-Ereignisparameter mit dem vorherigenpage_view
-Ereignis, das geprüft werden soll wenn die Referrer-URL und die Adresse der Seite korrekt aktualisiert wurden.