Single-Page-Anwendungen messen

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

Einseitige Webanwendungen (Single-Page Applications, SPAs) sind Websites, bei denen ein HTML-Dokument einmal geladen wird. Zusätzliche Inhalte werden dann über JavaScript APIs abgerufen.

Beispiel: Sie haben ein Formular, um Leads zu generieren. Das Formular besteht aus drei Ansichten: > * Erste Ansicht zum Erfassen der Kundendaten * Zweite Ansicht, in der Kunden ihr Interesse an bestimmten Diensten angeben * Dritte Ansicht , auf der sie sich für Webinare zu ihren Interessen anmelden können

Damit Sie Seitenaufrufe von SPAs korrekt erfassen können, müssen Sie die Seitenaufrufe für jede Ansicht zählen, mit der ein Nutzer interagiert, und den Seiten Referrer richtig ermitteln, damit Sie den Nutzerpfad korrekt nachvollziehen können.

Hinweis

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

• Ein Google Analytics-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

Messung von einseitigen Webanwendungen 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): Wenn Ihre SPA die History API verwendet, insbesondere die pushState() und replaceState() Methode, um Ansichten zu aktualisieren, verwenden Sie diese Option.

• Benutzerdefinierte Ereignisse: Wenn Ihre Website das DocumentFragment Objekt verwendet, um verschiedene Ansichten zu rendern, verwenden Sie diese Option.

Implementierung des Browserverlaufs Implementierung benutzerdefinierter Ereignisse

Implementierung benutzerdefinierter Ereignisse

Wenn Sie page_view-Ereignisse selbst implementieren, muss die Website bei einer Änderung der Ansicht so reagieren:

• Legen Sie für page_referrer und page_location die richtigen Werte fest, um eine korrekte Zuordnung zu ermöglichen.

• Senden Sie ein neues page_view-Ereignis.

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 Ansichten 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 Änderung der Ansicht 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, müssen Sie den Google Analytics-Datenstream konfigurieren, integrierte Verlaufsvariablen aktivieren und Tags erstellen, die bei Änderungen am Verlauf ausgelöst werden.

Informationen zum Implementieren der SPA-Messung mit Tag Manager finden Sie in der Anleitung Einseitige Webanwendungen mit Google Tag Manager erfassen.

Messeinrichtung überprüfen

So prüfen Sie, ob Ihre einseitige Webanwendung Seitenaufrufe korrekt erfasst:

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

2. Klicken Sie sich durch Ihre einseitige Webanwendung. Wenn Sie auf eine neue virtuelle Ansicht klicken, sollte in DebugView ein neues page_view-Ereignis angezeigt werden. Vergleichen Sie die Parameter des page_view-Ereignisses mit dem vorherigen page_view-Ereignis, um zu prüfen, ob der Seiten-Referrer und der Seitenstandort korrekt aktualisiert wurden.

Zusätzliche Überlegungen für SPAs

Neben dem Senden von page_view-Ereignissen sollten Sie auch die folgenden Aspekte berücksichtigen, um eine robuste SPA-Integration mit Google Analytics zu ermöglichen und die Nutzerfreundlichkeit zu verbessern:

Scrollposition verwalten

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

Empfehlung:Setzen Sie die Scrollposition nach jeder virtuellen Seitenübergang 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);

Mit dieser Änderung beginnen Nutzer oben auf dem neuen Inhalt. So kann das Scroll-Tracking von Google Analytics das Engagement auf der neuen virtuellen Seite genau erfassen.

Zugänglichkeit 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 hindeuten, wie Ihre SPA das DOM aktualisiert.

Empfehlung:Achten Sie darauf, dass Ihr SPA-Framework und Ihre Routinglogik die relevanten Teile des DOM vollständig und synchron mit dem Inhalt der neuen Seite aktualisieren. Verzögert gerenderte Inhalte 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 Messung virtueller Seitenaufrufe in Ihrer SPA korrekt implementieren, werden andere automatische Ereignisse in Google Analytics entsprechend verarbeitet. Wenn virtuelle Seitenaufrufe für Änderungen der Ansicht 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 Interaktionsdauer dem ersten Laden der Seite zugeschrieben. So lässt sich nicht analysieren, wie viel Zeit auf einzelnen Ansichten verbracht wird.

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 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 Scrolls werden mit dem page_location der virtuellen Seite verknüpft, die der Nutzer gerade aufruft.

So können Sie das Nutzer-Engagement und andere Messwerte für einzelne Ansichten oder Bereiche in Ihrer SPA analysieren und so ein genaueres Bild des Nutzerpfads erhalten.