Single-Page-Anwendungen messen

Dieses Dokument richtet sich an Entwickler, die Seitenaufrufe in ihrer einseitigen Web-App mit Google Analytics erfassen möchten.

Einseitige Web-Apps (Single-Page Applications, SPAs) sind Websites, bei denen ein HTML-Dokument einmal geladen wird. Alle zusätzlichen Inhalte werden über JavaScript APIs abgerufen.

Beispiel: Sie haben ein Formular, um Leads zu generieren. Das Formular besteht aus drei Bildschirmen:

• Erster Bildschirm zum Erfassen der Kundeninformationen
• Zweiter Bildschirm, auf dem Kunden ihr Interesse an bestimmten Diensten angeben
• Dritter Bildschirm, auf dem sich Kunden für Webinare zu ihren Interessen anmelden können

Um Seitenaufrufe von SPAs korrekt zu erfassen, müssen Sie die Seitenaufrufe für jeden Bildschirm zählen, mit dem ein Nutzer interagiert, und den Seiten Referrer richtig erfassen, damit Sie den Weg des Nutzers korrekt nachvollziehen können.

Hinweis

Auf dieser Seite wird davon ausgegangen, dass Sie bereits Folgendes haben:

• Ein Google Analytics 4-Konto und eine Property für Ihre Website 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 .

Erfassung für einseitige Web-Apps implementieren

Wenn Sie SPAs genau erfassen möchten, verwenden Sie eine der folgenden Methoden, um einen neuen virtuellen Seitenaufruf auszulösen:

• Änderungen am Browserverlauf (empfohlen): Verwenden Sie diese Option, wenn Ihre SPA die History API verwendet, insbesondere die pushState() und replaceState() Methode, um Bildschirme zu aktualisieren.

• Benutzerdefinierte Ereignisse: Verwenden Sie diese Option, wenn Ihre Website das DocumentFragment -Objekt verwendet, um verschiedene Bildschirme zu rendern.

Implementierung des Browserverlaufs Implementierung benutzerdefinierter Ereignisse

Implementierung benutzerdefinierter Ereignisse

Wenn Sie page_view-Ereignisse selbst implementieren, muss die Website bei einem Bildschirmwechsel Folgendes tun:

• page_referrer und page_location auf die richtigen Werte setzen, um eine korrekte Zuordnung zu ermöglichen

• Ein neues page_view-Ereignis senden

gtag.js

1. Speichern Sie die alte und die neue URL Ihrer einseitigen Web-App, 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 Befehl config ein. Weitere Informationen zu benutzerdefinierten Dimensionen und Messwerten

4. Senden Sie ein page_view-Ereignis, um die Bildschirmänderung 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. Lösen Sie die Funktion OnPageChange aus, wenn Sie einen neuen virtuellen Seitenaufruf auslösen möchten.

Tag Manager

Wenn Sie eine SPA 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 Erfassung 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 Seitenaufruf-Ereignis senden, um die neue virtuelle Seite zu erfassen.

1. Google Analytics-Datenstream für die Erfassung von SPAs vorbereiten

So erfassen Sie page_view-Ereignisse manuell:

1. Öffnen Sie Google Analytics.

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

3. Wählen Sie unter Optimierte Analysen das Symbol für die Einstellungen aus.

4. Deaktivieren Sie unter Seitenaufrufe > Erweiterte Einstellungen anzeigen die Option 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. Öffnen Sie Google Tag Manager.

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 die Option 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 : {{Referrer}}
   • page_location : {{Page URL}}

   • update : true

     Hinweis: Mit dem update Parameter 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 alle benutzerdefinierten Dimensionen und Messwerte an, die mit dem neuen virtuellen Seitenaufruf aktualisiert werden sollen.

7. Legen Sie unter Auslösen Folgendes fest:

   1. Erstellen Sie unter Trigger auswählen einen neuen Trigger (+).
   2. Wählen Sie unter Triggerkonfiguration den Trigger Änderung des Verlaufs aus. Weitere Informationen zum Trigger „Änderung des Verlaufs“. Achten Sie darauf, dass dieses Tag nur ausgelöst wird, wenn ein neuer Bildschirm angezeigt wird.
   3. Geben Sie dem Trigger einen Namen und wählen Sie Speichern aus.

8. Geben Sie dem Tag einen Namen und wählen Sie Speichern aus. Ihr Google-Tag sollte so aussehen:

3. Neues Seitenaufruf-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 Seitenaufruf-Ereignis senden möchten, fügen Sie page_view als Ereignisname hinzu.

5. Legen Sie unter Auslösen den Trigger „Änderung des Verlaufs“ fest. Das sollte derselbe Trigger wie für das von Ihnen eingerichtete Google-Tag sein.

6. Geben Sie dem Tag einen Namen und wählen Sie Speichern aus.

Google Tag Manager-Trigger für Ereignisse im Browserverlauf verwenden

Wenn Sie in Google Tag Manager andere Arten von Tags basierend auf Änderungen am Browserverlauf auslösen müssen, z. B. um Daten an andere Marketingplattformen zu senden, können Sie den Triggertyp „Änderung des Verlaufs“ verwenden.

Achten Sie beim Konfigurieren von Tags oder Variablen für die Verwendung mit dem Trigger „Änderung des Verlaufs“ darauf, dass Sie die richtigen integrierten Variablen verwenden, die von Google Tag Manager bereitgestellt werden:

• History New URL Fragment: Das Fragment der URL nach dem Ereignis im Browserverlauf.
• History Old URL Fragment: Das Fragment der URL vor dem Ereignis im Browserverlauf.
• History New State: Das neue Verlaufsobjekt.
• History Old State: Das alte Verlaufsobjekt.
• History Source: Die Quelle des Ereignisses im Browserverlauf (z. B. popstate, pushState, replaceState).

Diese integrierten Variablen müssen möglicherweise zuerst in Google Tag Manager unter Variablen > Konfigurieren aktiviert werden.

Wichtig: Verwenden Sie keine nicht definierten Variablennamen. New History URL ist beispielsweise keine Standardvariable von GTM und führt beim Veröffentlichen zu Fehlern. Wählen Sie immer aus den verfügbaren integrierten Variablen oder Ihren eigenen definierten Variablen aus.

Weitere Informationen zu diesem Trigger finden Sie unter Trigger „Änderung des Verlaufs“.

Erfassungseinrichtung überprüfen

So prüfen Sie, ob Ihre einseitige Web-App Seitenaufrufe korrekt erfasst:

1. Aktivieren Sie den Debug-Modus für jedes Tag in Ihrer Erfassungseinrichtung für einseitige Web-Apps. Informationen zum Beobachten von Ereignissen in der Debugging-Ansicht (DebugView)

2. Klicken Sie sich durch Ihre einseitige Web-App. 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 korrekt aktualisiert wurden.

Auswirkungen auf automatische Ereignisse

Wenn Sie die Erfassung virtueller Seitenaufrufe in Ihrer SPA korrekt implementieren, werden andere automatische Ereignisse in Google Analytics entsprechend verarbeitet. Wenn virtuelle Seitenaufrufe für Bildschirmänderungen nicht erfasst werden, behandelt Google Analytics die SPA als eine einzelne Seite, was zu verzerrten Messwerten führt.

Mit dem Ereignis user_engagement wird beispielsweise die Zeit erfasst, die ein Nutzer aktiv auf einer Seite verbringt. Ohne virtuelle Seitenaufrufe wird die gesamte Zeit auf der Seite dem ersten Laden der Seite zugeschrieben. So lässt sich nicht analysieren, wie viel Zeit auf einzelnen Bildschirmen verbracht wird.

Wenn die Erfassung virtueller Seitenaufrufe korrekt implementiert ist, gilt Folgendes:

• Das Ereignis user_engagement wird gesendet, wenn der Nutzer von einer virtuellen Seite zu einer anderen wechselt.
• Die Zeit auf der vorherigen virtuellen Seite wird berechnet und zusammen mit dem Ereignis user_engagement gesendet, in der Regel kurz bevor das Ereignis page_view für die neue virtuelle Seite verarbeitet wird.
• Andere Ereignisse wie Klicks oder Scrollen werden mit der page_location der virtuellen Seite verknüpft, die der Nutzer gerade ansieht.

So können Sie die Nutzerinteraktion und andere Messwerte für einzelne Bildschirme oder Bereiche in Ihrer SPA analysieren und so ein genaueres Bild des Wegs des Nutzers erhalten.