Single-Page-Anwendungen messen

Dieses Dokument richtet sich an Entwickler, die Seitenaufrufe auf ihren Single-Page-Anwendung mit Google Analytics.

Einseitige Anwendungen (SPA) sind Websites, die ein HTML-Dokument einmal laden und zusätzliche mithilfe von JavaScript-APIs.

Beispiel: Angenommen, Sie haben ein Formular, um Leads zu gewinnen. Das Formular enthält drei Bildschirme:

  • Erster Bildschirm zum Erfassen der Kundendaten.
  • Zweiter Bildschirm, auf dem Kunden Interesse an bestimmten Dienstleistungen bekunden.
  • Seite mit drittem Bildschirm zur Anmeldung für Webinare mit Bezug zu den Interessen des Kunden.

Für die korrekte Messung der Seitenaufrufe von SPAs ist es wichtig, jeden Bildschirm, mit dem ein Nutzer interagiert, und die Referrer-URL der Seite richtig zu ermitteln, damit Sie die die User Journey zu verfolgen.

Hinweis

Folgende Voraussetzungen sollten erfüllt sein:

  • Ein Google Analytics 4-Konto und eine Property für Ihre Website. Hier erfahren Sie, wie Sie Google Analytics:

  • Ein auf Ihrer Website implementiertes Google-Tag, das ausgelöst wird, wenn die Seite anfangs geladen wird. Weitere Informationen zum Einrichten des Google -Tag.

Analyse von Single-Page-Anwendungen implementieren

Um eine genaue Messung der SPA zu implementieren, können Sie mit einer dieser Methoden eine neue virtueller Seitenaufruf:

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

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

<ph type="x-smartling-placeholder"></ph>

Implementierung von benutzerdefinierten Ereignissen

Wenn du page_view-Ereignisse selbst implementierst, achte darauf, dass die folgende Website wenn sich der Bildschirm ändert:

  • Setzen Sie page_referrer und page_location auf die richtigen Werte für Attribution
  • Neues page_view-Ereignis senden

gtag.js

  1. Speichern Sie die alte und die neue URL Ihrer Single-Page-Anwendung, auf die Werte zugreifen, wenn Sie das Ereignis page_view manuell senden.

  2. Erstellen Sie eine Funktion, die page_referrer und page_location aktualisiert zu den entsprechenden Bildschirmen Ihrer SPA.
    Optional: So aktualisieren Sie die Werte zuvor festgelegt haben, ohne das Google-Tag neu zu initialisieren, geben Sie Schlüssel/Wert-Paar 'update': true.

  3. Optional: Benutzerdefinierte Dimensionen, um benutzerdefinierte Dimensionen und Messwerte zu aktualisieren Fügen Sie sie beim neuen virtuellen Seitenaufruf in den config-Befehl ein. Weitere Informationen zu benutzerdefinierten Dimensionen und Messwerte.

  4. Ein page_view-Ereignis senden, um den Bildschirmwechsel 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. Die Funktion OnPageChange auslösen, wenn ein neues virtuelles Seitenaufruf.

Tag Manager

Wenn Sie mit Tag Manager eine SPA messen möchten, benötigen Sie zwei Google-Tags mit demselben Tag ID im Container. Das erste Google-Tag wird geladen, wenn die Website geladen wird und die für die Messung erforderlichen Parameter festgelegt werden. Das zweite Google-Tag wird ausgelöst, wenn sich die URL Ihrer Website ändert. Schließlich müssen Sie manuell ein Seitenaufrufereignis senden, um die neue virtuelle Seite aufzuzeichnen.

1. Google Analytics-Datenstream für die SPA-Messung vorbereiten

So erfassen Sie page_view-Ereignisse manuell:

  1. Öffnen Sie Google Analytics.

  2. Gehen Sie unter Verwaltung so vor: Klicken Sie unter Datenerhebung und -änderung auf Datenstreams.

  3. Klicken Sie unter Optimierte Analysen auf das Symbol „Einstellungen“.

  4. Gehen Sie unter Seitenaufrufe > Erweiterte Einstellungen anzeigen, löschen Sie Seitenänderungen basierend auf Ereignissen im Browserverlauf. Sie zeichnen den Browser manuell auf den Verlauf der Änderungen in Tag Manager.

  5. Klicken Sie auf Speichern.

2. Google-Tag für virtuelle SPA-Seitenaufrufe 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 im ersten Google-Tag ein.

  6. Geben Sie unter Konfigurationseinstellungen die folgenden Parameter an:

    • page_referrer : &lcub;&lcub;Old History URL&rcub;&rcub;
    • page_location : &lcub;&lcub;New History URL&rcub;&rcub;
    • update: true

    • Optional: Geben Sie beliebige benutzerdefinierte Dimensionen und mit dem neuen virtuellen Seitenaufruf aktualisiert.

  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 zur Änderung des Verlaufs auslösen. Marke wird dieses Tag nur ausgelöst, wenn ein neuer Bildschirm erscheint.
    3. Geben Sie einen Namen für den Trigger ein und klicken Sie auf Speichern.
  8. Geben Sie einen Namen für das Tag ein und klicken Sie auf Speichern. Das Google-Tag sollte so aussehen:

Screenshot mit der endgültigen Tag-Konfiguration

3. Neues Seitenaufrufereignis auslösen

  1. Erstellen Sie im Tag Manager-Arbeitsbereich ein Tag vom Typ Neu.

  2. Wählen Sie unter Tag-Konfiguration die Option Google Analytics: GA4-Ereignis aus. Tag.

  3. Geben Sie den Messwert ein ID für das Tag. Diese ID stimmt mit der Google-Tag-ID überein, die Sie im vorherigen Tag verwendet haben.

  4. Wenn Sie ein neues Seitenaufrufereignis senden möchten, fügen Sie page_view als Ereignisname hinzu.

  5. Legen Sie unter Trigger den Trigger für die Verlaufsänderung fest. Dies sollte der denselben Trigger wie für das Google-Tag, das Sie eingerichtet haben.

  6. Geben Sie einen Namen für das Tag ein und klicken Sie auf Speichern.

Einrichtung der Analyse überprüfen

So überprüfen Sie, ob Ihre Single-Page-Anwendung Seitenaufrufe korrekt erfasst:

  1. Aktivieren Sie den Debug-Modus für jedes Tag in der SPA-Messung. Hier erfahren Sie, wie Sie Überwachen Sie Ereignisse in DebugView verwenden.

  2. Klicken Sie sich durch Ihre Single-Page-Anwendung. Wenn Sie auf eine neue virtuelle sollten Sie in DebugView ein neues page_view-Ereignis sehen. Vergleichen Sie die page_view-Ereignisparameter mit dem vorherigen page_view-Ereignis, das geprüft werden soll wenn die Referrer-URL und die Adresse der Seite korrekt aktualisiert wurden.