Single-Page-Anwendungen messen

Dieses Dokument richtet sich an Entwickler, die Seitenaufrufe in ihrer Einzelseitenanwendung mit Google Analytics messen 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, um Leads zu gewinnen. Das Formular hat drei Bildschirme: > * Erster Bildschirm zum Erfassen der Kundendaten. * Zweiter Bildschirm, auf dem Kunden ihr Interesse an bestimmten Diensten angeben. * Dritte Seite, um sich für Webinare zu registrieren, die für die Kundschaft interessant sind.

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

Hinweis

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

• Sie haben ein Konto und eine Property bei Google Analytics 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

Messung für Single-Page-Anwendungen implementieren

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

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

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

Implementierung des Browserverlaufs Implementierung benutzerdefinierter Ereignisse

Implementierung von Änderungen am Browserverlauf

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

Wichtiger Hinweis: Wenn Sie Ihre Tags mit Google Tag Manager konfigurieren, sollten Sie das automatische Verlaufs-Tracking in Google Analytics nicht aktivieren, da dies zu einer Mehrfachzählung von Seitenaufrufen führen kann. Sehen Sie sich stattdessen die Anleitung Single-Page-Anwendungen mit Google Tag Manager messen an.

Optimierte Analysen in Google Analytics aktivieren

So messen Sie page_views automatisch anhand des Browserverlaufs:

1. Öffnen Sie Google Analytics.

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

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

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

   

5. Speichern Sie die Änderungen.

Messkonfiguration überprüfen

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

1. Aktivieren Sie den Debug-Modus für jedes Tag in Ihrer SPA-Messkonfiguration. Ereignisse in DebugView beobachten

2. Klicken Sie sich durch Ihre Single-Page-Anwendung. Wenn Sie zu einem neuen virtuellen Bildschirm wechseln, sollte in DebugView ein neues page_view-Ereignis angezeigt werden. Vergleichen Sie die Ereignisparameter page_view mit dem vorherigen Ereignis page_view, um zu prüfen, ob die Seitenverweis-URL und der Seitenstandort korrekt 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 normalerweise 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 virtuellen Seitenübergang programmatisch auf den Anfang der Seite oder den Hauptinhaltscontainer 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 der neuen Seite, sodass das Scroll-Tracking von Google Analytics die Interaktionen auf der neuen virtuellen Seite genau messen kann.

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 das ein Hinweis darauf sein, wie deine SPA das DOM aktualisiert.

Empfehlung: Achte darauf, dass dein SPA-Framework und deine Routing-Logik die relevanten Teile des DOM vollständig und synchron mit dem Inhalt der neuen Seite aktualisieren. Verzögertes Rendering 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 der Inhalte zu bestätigen.

Auswirkungen auf automatische Ereignisse

Wenn Sie die Messung virtueller Seitenaufrufe in Ihrer SPA richtig 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 einzelne Seite, 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 Ereignis user_engagement gesendet, normalerweise kurz bevor das Ereignis page_view für die neue virtuelle Seite verarbeitet wird.
• Andere Ereignisse wie Klicks oder Scrollen werden mit dem page_location der virtuellen Seite verknüpft, die der Nutzer gerade ansieht.

So können Sie das Nutzer-Engagement und andere Messwerte für einzelne Bildschirme oder Bereiche in Ihrer SPA analysieren und die User Journey besser nachvollziehen.