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 zusätzliche Inhalte mithilfe von JavaScript APIs abrufen.

Beispiel: Angenommen, Sie haben ein Formular, mit dem Sie Leads gewinnen möchten. Das Formular hat drei Bildschirme:

• Erster Bildschirm zum Erfassen der Kundendaten.
• Zweiter Bildschirm, auf dem Kunden ihr Interesse an bestimmten Dienstleistungen bekunden.
• Auf der dritten Bildschirmseite können sich Nutzer für Webinare zu Themen anmelden, die sie interessieren.

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

Hinweis

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

• 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 beim ersten Laden der Seite ausgelöst wird. Weitere 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-Messung zu implementieren:

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

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

Implementierung des Browserverlaufs Implementierung benutzerdefinierter Ereignisse

Implementierung von benutzerdefinierten Ereignissen

Wenn Sie page_view-Ereignisse selbst implementieren, achten Sie darauf, dass die Website beim Wechseln des Bildschirms so reagiert:

• Legen Sie für eine korrekte Attribution die richtigen Werte für page_referrer und page_location 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 Ereignis page_view manuell senden.

2. Erstellen Sie eine Funktion, die die page_referrer und page_location auf den entsprechenden Bildschirmen 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 der neuen virtuellen Seitenaufruf-Ansicht 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 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 beim Laden der Website geladen und alle für die Analyse erforderlichen Parameter werden festgelegt. Das zweite Google-Tag wird ausgelöst, wenn sich die URL Ihrer Website ändert. Anschließend müssen Sie manuell ein Ereignis vom Typ „Seitenaufruf“ 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. Öffnen Sie Google Analytics.

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

3. Klicken Sie unter Optimierte Analysen auf das Einstellungssymbol .

4. Entfernen 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 von 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 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 alle benutzerdefinierten Dimensionen und Messwerte an, die mit der neuen virtuellen Seitenansicht aktualisiert werden sollen.

7. Legen Sie unter Trigger Folgendes fest:

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

8. Benennen Sie das Tag und speichern Sie es. Das Google-Tag sollte so aussehen:

3. Neues Ereignis vom Typ „Seitenaufruf“ 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 muss mit der Google-Tag-ID übereinstimmen, 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 Ereignisnamen hinzu.

5. Legen Sie unter Trigger den Trigger „Änderung im Verlauf“ fest. Dies sollte derselbe Trigger wie für das von Ihnen eingerichtete Google-Tag sein.

6. Benennen Sie das Tag und speichern Sie es.

Messeinrichtung überprüfen

So prüfen Sie, ob in Ihrer Single-Page-Anwendung Seitenaufrufe korrekt erfasst werden:

1. Aktivieren Sie den Debug-Modus für jedes Tag in Ihrer SPA-Messkonfiguration. Weitere Informationen zum Beobachten von Ereignissen in der Debugging-Ansicht (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 Ereignisparameter von page_view mit dem vorangehenden page_view-Ereignis, um zu prüfen, ob der Seitenverweiser und die Seiten-URL korrekt aktualisiert wurden.