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: Angenommen, Sie haben ein Formular, mit dem Sie Leads generieren möchten. Das Formular besteht aus drei Bildschirmen:

• Erster Bildschirm zur Erfassung der Kundeninformationen.
• Auf dem zweiten Bildschirm können Kunden Interesse an bestimmten Diensten bekunden.
• Auf dem dritten Bildschirm 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 Verweis 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-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 für 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:

• Browserverlauf wird geändert (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 von Änderungen am Browserverlauf

Wenn Ihre Single-Page-Anwendung die History API verwendet, können Sie optimierte Analysen in Google Analytics aktivieren, um Seitenaufrufe automatisch anhand von Browserverlaufsereignissen zu erfassen.

Optimierte Analysen in GA4 aktivieren

So messen Sie page_views automatisch anhand des Browserverlaufs:

1. Google Analytics öffnen

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

3. Stellen Sie den Schieberegler unter Optimierte Analysen auf Ein, um alle Optionen zu aktivieren.

4. Klicken Sie hier, um einzelne Optionen zu bearbeiten. Klicken Sie unter Seitenaufrufe auf Erweiterte Einstellungen anzeigen. Achten Sie darauf, dass sowohl Seitenaufrufe als auch Seitenänderungen basierend auf Ereignissen im Browserverlauf aktiviert sind.

   

5. Speichern Sie die Änderungen.

Hinweis:Wenn die optimierte Analyse für „Seitenänderungen basierend auf Browserverlaufsereignissen“ aktiviert ist, wartet Google Analytics automatisch auf Verlaufsereignisse (z. B. solche, die in SPAs verwendet werden) und sendet page_view-Ereignisse. Sie müssen in Google Tag Manager keine bestimmten Verlaufs-Variablen oder Trigger konfigurieren, um Seitenaufrufe an GA4 zu senden.

Google Tag Manager-Trigger für Verlaufsereignisse verwenden

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

Wenn Sie Tags oder Variablen für die Verwendung mit dem Trigger „Verlauf ändern“ konfigurieren, müssen Sie die richtigen integrierten Variablen von Google Tag Manager verwenden:

• History New URL Fragment: Das Fragment der URL nach dem Verlaufsereignis.
• History Old URL Fragment: Das Fragment der URL vor dem Verlaufsereignis.
• History New State: Das neue Verlaufsobjekt.
• History Old State: Das alte Verlaufsobjekt.
• History Source: Die Quelle des Verlaufsereignisses, z. B. popstate, pushState oder replaceState.

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

Weitere Informationen zu diesem Trigger finden Sie unter Trigger für Verlaufsänderungen.

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 Ereignisparameter von page_view mit dem vorherigen page_view-Ereignis, um zu prüfen, ob der Seiten-Referrer und der Seitenpfad richtig aktualisiert wurden.

Zusätzliche Überlegungen für SPAs

Neben dem Senden von page_view-Ereignissen sollten Sie die folgenden zusätzlichen Aspekte für eine robuste SPA-Integration mit Google Analytics und eine bessere Nutzererfahrung berücksichtigen:

Scrollposition verwalten

Wenn Nutzer in einer SPA zwischen Ansichten wechseln, behält der Browser in der Regel die aktuelle Scrollposition bei. Das kann dazu führen, dass Nutzer den oberen Bereich der neuen virtuellen Seite nicht sehen, und sich auf das Tracking der Scrolltiefe auswirken.

Empfehlung:Setzen Sie die Scrollposition nach jedem Übergang zu einer virtuellen Seite programmatisch auf den Anfang der Seite oder des Hauptinhaltscontainers zurück.

// Example: Reset window scroll position on a route change in your SPA
window.scrollTo(0, 0);

// Or, if your content is within a specific element:
// document.getElementById('main-content').scrollTo(0, 0);

Durch diese Änderung beginnen Nutzer oben auf den neuen Inhalten. So kann das Google Analytics-Scroll-Tracking das Engagement auf der neuen virtuellen Seite genau erfassen.

Barrierefreiheit von Inhalten für Browserfunktionen sicherstellen

Wenn Nutzer Probleme mit Browserfunktionen wie der Suche auf der Seite (Strg+F) melden, die nach dem Seitenaufbau einer virtuellen Seite nicht funktionieren, kann dies darauf hinweisen, wie Ihre SPA das DOM aktualisiert.

Empfehlung:Achten Sie darauf, dass Ihr SPA-Framework und Ihre Routing-Logik die relevanten Teile des DOM vollständig und synchron mit dem Inhalt der neuen Seite aktualisieren. Verzögertes Rendern oder Inhalte, die im Haupt-DOM-Baum ausgeblendet sind, können möglicherweise nicht sofort von der Suchfunktion des Browsers indexiert werden. Testen Sie die Suche auf der Seite nach virtuellen Navigationen, um die Zugänglichkeit von Inhalten zu bestätigen.

Auswirkungen auf automatische Ereignisse

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

Mit dem Ereignis user_engagement wird beispielsweise die Zeit gemessen, die ein Nutzer aktiv auf einer Seite verbringt. Ohne virtuelle Seitenaufrufe wird die gesamte Interaktionszeit dem ersten Seitenaufbau zugeordnet. Es ist dann nicht möglich, die auf einzelnen Bildschirmen verbrachte Zeit zu analysieren.

Wenn die Messung 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 Interaktionsdauer für die vorherige virtuelle Seite wird berechnet und zusammen mit dem user_engagement-Ereignis gesendet, in der Regel kurz bevor das page_view-Ereignis für die neue virtuelle Seite verarbeitet wird.
• Andere Ereignisse wie Klicks oder Scrollvorgänge sind der page_location der virtuellen Seite zugeordnet, die der Nutzer gerade aufruft.

So können Sie Nutzer-Engagement und andere Messwerte für einzelne Bildschirme oder Bereiche Ihrer SPA analysieren und so ein genaueres Bild der User Journey erhalten.