Single-Page-Anwendungen messen

Dieses Dokument richtet sich an Entwickler, die Seitenaufrufe in ihrer Single-Page-Anwendung mit Google Analytics erfassen möchten.

Single-Page-Anwendungen (SPA) sind Websites, die ein HTML-Dokument einmal laden und alle zusätzlichen Inhalte über JavaScript-APIs abrufen.

Beispiel: Sie haben ein Formular, mit dem Sie Leads generieren möchten. Das Formular besteht aus drei Bildschirmen:

• Erster Bildschirm zum Erfassen der Kundeninformationen.
• Auf dem zweiten Bildschirm können Kunden Interesse an bestimmten Diensten bekunden.
• Auf der dritten Seite können sich Kunden für Webinare zu ihren Interessen anmelden.

Der Schlüssel zur korrekten Erfassung von Seitenaufrufen in SPAs besteht darin, Seitenaufrufe für jeden Bildschirm zu zählen, mit dem ein Nutzer interagiert, und den Referrer der Seite richtig zu erfassen, damit Sie den Nutzerpfad korrekt nachvollziehen können.

Hinweis

Folgende Voraussetzungen sollten erfüllt sein:

• Sie haben ein Google Analytics 4-Konto und eine Property für Ihre Website. Weitere Informationen zum Einrichten von Google Analytics

• Ein Google-Tag, das auf Ihrer Website implementiert ist und ausgelöst wird, wenn die Seite zum ersten Mal geladen wird. Informationen zum Einrichten des Google-Tags

Analyse von Single-Page-Anwendungen implementieren

Verwenden Sie eine der folgenden Methoden, um einen neuen virtuellen Seitenaufruf auszulösen und so eine genaue SPA-Analyse zu ermöglichen:

• Änderungen am Browserverlauf (empfohlen): Wenn Ihre SPA die History API, insbesondere die Methoden pushState() und replaceState(), zum Aktualisieren von Bildschirmen verwendet, sollten Sie diese Option auswählen.

• Benutzerdefinierte Ereignisse: Wenn auf Ihrer Website das DocumentFragment-Objekt zum Rendern verschiedener Bildschirme verwendet wird, sollten Sie diese Option nutzen.

Implementierung des Browserverlaufs Implementierung benutzerdefinierter Ereignisse

Implementierung benutzerdefinierter Ereignisse

Wenn Sie page_view-Ereignisse selbst implementieren, achten Sie darauf, dass sich die Website bei einer Änderung des Bildschirms so verhält:

• Legen Sie page_referrer und page_location auf die richtigen Werte für die korrekte Zuordnung fest.

• Neues page_view-Ereignis senden

gtag.js

1. Speichern Sie die alte und die neue URL Ihrer Single-Page-Anwendung, damit Sie auf die Werte zugreifen können, wenn Sie das page_view-Ereignis manuell senden.

2. Erstellen Sie eine Funktion, die page_referrer und page_location auf die entsprechenden Bildschirme Ihrer SPA aktualisiert.
   Optional: Wenn Sie die zuvor festgelegten Werte aktualisieren möchten, ohne das Google-Tag neu zu initialisieren, geben Sie das Schlüssel/Wert-Paar 'update': true an.

3. Optional: Benutzerdefinierte Dimensionen: Wenn Sie benutzerdefinierte Dimensionen und Messwerte mit dem neuen virtuellen Seitenaufruf aktualisieren möchten, fügen Sie sie in den config-Befehl ein. Weitere Informationen zu benutzerdefinierten Dimensionen und Messwerten

4. Senden Sie ein page_view-Ereignis, 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');
        }
   

5. Rufen Sie die Funktion OnPageChange auf, wenn Sie einen neuen virtuellen Seitenaufruf auslösen müssen.

Tag Manager

Wenn Sie eine Single-Page-Anwendung mit Tag Manager erfassen möchten, benötigen Sie zwei Google-Tags mit derselben Tag-ID in Ihrem Container. Das erste Google-Tag wird geladen, wenn die Website geladen wird, und legt alle Parameter fest, die Sie für die Analyse benötigen. Das zweite Google-Tag wird immer dann ausgelöst, wenn sich die URL Ihrer Website ändert. Schließlich müssen Sie manuell ein Seitenaufrufereignis senden, um die neue virtuelle Seite zu erfassen.

1. Google Analytics-Datenstream für die SPA-Analyse vorbereiten

So erfassen Sie page_view-Ereignisse manuell:

1. Google Analytics öffnen

2. Klicken Sie auf der Seite Verwaltung> Datenerhebung und ‑änderung auf Datenstreams.

3. Wählen Sie unter Optimierte Analysen das Einstellungsrad  aus.

4. Entfernen Sie unter Seitenaufrufe > Erweiterte Einstellungen anzeigen das Häkchen bei Seitenänderungen basierend auf Ereignissen im Browserverlauf. Sie erfassen die Änderungen am Browserverlauf manuell in Tag Manager.

5. Klicken Sie auf Speichern.

2. Google-Tag für virtuelle Seitenaufrufe in SPAs erstellen

1. Google Tag Manager öffnen

2. Öffnen Sie in Ihrem Arbeitsbereich das Menü „Tags“.

3. Wählen Sie Neu aus, um ein Tag zu erstellen.

4. Wählen Sie unter Tag-Konfiguration das Google-Tag aus.

5. Geben Sie dieselbe Google-Tag-ID wie für Ihr erstes Google-Tag ein.

6. Geben Sie unter Konfigurationseinstellungen die folgenden Parameter an:

   • page_referrer : {{Old History URL}}
   • page_location : {{New History URL}}

   • update: true

     Hinweis :Mit dem Parameter update werden neue oder aktualisierte Parameter in die vorhandene Google-Tag-Konfiguration eingefügt. Außerdem wird das Senden eines neuen page_view-Ereignisses unterdrückt.

   • Optional: Geben Sie benutzerdefinierte Dimensionen und Messwerte an, die mit dem neuen virtuellen Seitenaufruf aktualisiert werden sollen.

7. Legen Sie unter Triggering (Auslösung) Folgendes fest:

   1. Erstellen Sie unter Trigger auswählen einen neuen Trigger (+).
   2. Wählen Sie unter Triggerkonfiguration den Trigger Verlauf ändern aus. Weitere Informationen zum Trigger „Verlauf ändern“ Achten Sie darauf, dieses Tag nur auszulösen, wenn ein neuer Bildschirm angezeigt wird.
   3. Benennen Sie den Trigger und wählen Sie Speichern aus.

8. Benennen Sie das Tag und wählen Sie Speichern aus. Ihr Google-Tag sollte so aussehen:

3. Neues „page_view“-Ereignis auslösen

1. Erstellen Sie in Ihrem Tag Manager-Arbeitsbereich ein neues Tag.

2. Wählen Sie unter Tag-Konfiguration das Tag Google Analytics: GA4-Ereignis aus.

3. Geben Sie die Mess-ID für das Tag ein. Diese ID entspricht der Google-Tag-ID, die Sie im vorherigen Tag verwendet haben.

4. Wenn Sie ein neues Ereignis vom Typ „Seitenaufruf“ senden möchten, fügen Sie page_view als Ereignisname hinzu.

5. Legen Sie unter Triggering den Trigger für die Verlaufsänderung fest. Das sollte derselbe Trigger wie für das von Ihnen eingerichtete Google-Tag sein.

6. Benennen Sie das Tag und wählen Sie Speichern aus.

Einrichtung der Analyse überprüfen

So prüfen Sie, ob Ihre Single-Page-Anwendung Seitenaufrufe richtig erfasst:

1. Aktivieren Sie den Debug-Modus für jedes Tag in Ihrer SPA-Einrichtung. Informationen zum Beobachten von Ereignissen in DebugView

2. Klicken Sie sich durch Ihre Single-Page-Anwendung. Wenn Sie auf einen neuen virtuellen Bildschirm klicken, sollte in DebugView ein neues page_view-Ereignis angezeigt werden. Vergleichen Sie die page_view-Ereignisparameter mit dem vorherigen page_view-Ereignis, um zu prüfen, ob der Seiten-Referrer und der Seitenstandort richtig aktualisiert wurden.