Server-seitiges GTM für Single-Page-Webanwendungen (SPAs)

Das Tracking von Single-Page-Applications (SPAs) kann schwierig sein, da sie keine vollständigen Seiten neu laden, was das Standard-Tracking erschwert. Der serverseitige Google Tag Manager (GTM) hilft hier, indem er Daten auf der Serverseite verarbeitet und die Tracking-Genauigkeit und -Performance verbessert.

In dieser Anleitung führen wir Sie durch die Einrichtung von serverseitigem GTM für SPAs und zeigen Ihnen die besten Möglichkeiten zur Verwaltung von Seitenaufrufen, events und Interaktionen.

Eine Single-Page-Application (SPA) ist eine Webanwendung, die zunächst eine HTML-Seite lädt und deren Inhalt dynamisch aktualisiert, wenn Benutzer interagieren, anstatt bei jeder Aktion oder Navigation neue Seiten neu zu laden.

SPAs wurden beliebt, weil sie entscheidende Vorteile gegenüber herkömmlichen mehrseitigen Websites bieten:

Beispiele für SPAs sind Gmail, wo Inhalte aktualisiert werden, ohne die Seite neu zu laden; Facebook, wo Sie scrollen, posten und kommentieren können, ohne die Seite neu laden zu müssen; und Trello, wo Aufgaben auf derselben Seite verwaltet werden. SPAs bieten eine schnelle, nahtlose Erfahrung für Apps mit starker Benutzerinteraktion.

Das Tracking von Single-Page-Webanwendungen (SPAs) mit GA4 und GTM ist aufgrund der Funktionsweise von SPAs komplexer als das Tracking regulärer Websites. Wir sind uns dieser Komplexität bewusst und stehen Ihnen mit einer Anleitung zur Seite. 

Hier erfahren Sie warum:

- Im Gegensatz zu herkömmlichen Websites werden keine ganzen Seiten neu geladen, bei denen bei jedem Klick eine neue Seite geladen wird (und GA4-„Seitenaufrufe“ getriggert werden). SPAs laden Inhalte dynamisch. Das bedeutet, dass der Standard-Trigger „Seitenaufruf“ nicht auf die gleiche Weise funktioniert.

- Es werden benutzerdefinierte Event-Trigger benötigt. Da keine Seiten neu geladen werden, müssen Sie benutzerdefinierte Trigger erstellen, die bestimmte Benutzerinteraktionen erkennen, wie z. B. das Klicken auf Schaltflächen oder Änderungen in der URL, um aussagekräftige Aktionen zu verfolgen.

- Komplexität bei der Verfolgung von Benutzerströmen. Mit SPAs können Benutzer auf derselben Seite bleiben, während sie mit verschiedenen Abschnitten interagieren. Um diese Interaktionen zu verfolgen, muss eine detailliertere Ereignisverfolgung eingerichtet werden, um diese Seitenübergänge zu erfassen.

- Mögliche Datenlücken. Ohne ein ordnungsgemäßes Tracking laufen Sie Gefahr, wichtige Daten zum Engagement zu verpassen, da GA4 Inhaltsänderungen auf SPAs nicht automatisch trackt. Um sicherzustellen, dass nichts verloren geht, sind benutzerdefinierte Konfigurationen in GTM erforderlich.

Die Komplexität ergibt sich größtenteils aus dem dynamischen Verhalten von SPAs, das eine genauere manuelle Einrichtung erfordert, um eine präzise Datenerfassung zu gewährleisten. Google Analytics 4 enthält zwar eine integrierte Funktion zur Nachverfolgung dieser Seitenaufrufe, diese funktioniert jedoch nicht immer sofort einwandfrei. Darüber hinaus kann es schwierig sein, bestimmte Websites effektiv zu tracken.

Um dieses Problem zu lösen, ist eine zusätzliche Konfiguration erforderlich, um diese Websites oder Webanwendungen effektiv zu tracken. Aber keine Sorge – wir zeigen Ihnen, wie Sie single-page Anwendungen mit Google Analytics 4 und Google Tag Manager tracken können.

Hier erfahren Sie, wie Sie SPAs mithilfe von drei gängigen Methoden effektiv tracken können:

1. GA4s erweiterte Messung für Seitenaufrufe

GA4 verfügt über eine integrierte Funktion, die Seitenaufrufe in SPAs automatisch trackt. Sie funktioniert durch die Erkennung von URL-Änderungen, aber es kann je nach Einrichtung Ihrer Website einige Anpassungen erfordern, um alles korrekt zu tracken. Es ist ein guter Ausgangspunkt, kann aber für einige Websites noch verbessert werden.

2. Trigger für die Verlaufsveränderung von GTM

Google Tag Manager kann mithilfe des Verlaufsveränderungs Tirgger verfolgen, wann Benutzer durch eine SPA navigieren. Dieser Trigger überwacht Änderungen im Browserverlauf (z. B. wenn Benutzer zwischen Abschnitten wechseln), sodass Sie Interaktionen verfolgen können, auch wenn die Seite nicht vollständig neu geladen wird.

3. Data Layer Push mit GTM

Bei dieser Methode übertragen Sie benutzerdefinierte Ereignisse oder Seitenänderungen an den Data Layer innerhalb Ihrer SPA. GTM kann diese Übertragungen dann erkennen und die richtigen Daten an GA4 senden. Dieser Ansatz gibt Ihnen mehr Kontrolle und ermöglicht Ihnen ein genaueres Tracking bestimmter Interaktionen.

Wenn Sie alle drei tracking-Optionen implementieren können, wählen Sie am besten die letzte, die Entwicklerunterstützung und dataLayer.push verwendet. Diese Methode bietet Ihnen die größte Kontrolle und Flexibilität und ist somit die zuverlässigste Lösung. Durch das direkte Übertragen bestimmter events an den Data Layer wird sichergestellt, dass key interactions auch in komplexeren SPAs genau erfasst werden. Auch wenn hierfür möglicherweise einige Entwicklerarbeiten erforderlich sind, lohnt sich der Aufwand aufgrund der Präzision und Robustheit dieses Ansatzes. In unserem Blog finden Sie eine End-to-end-Anleitung zum Data Layer im Google Tag Manager.

Sehen wir uns die einzelnen Optionen genauer an. 

Um „single-page“-Anwendungen mithilfe der erweiterten Messung von Seitenaufrufen in Google Analytics 4 zu tracken, befolgen Sie diese einfachen Schritte:

1. Gehen Sie zu den Stream-Einstellungen

Melden Sie sich bei Ihrem GA4-Konto an und suchen Sie nach Ihren Datenstrom-Einstellungen.

2. Datenströme in der Verwaltung öffnen

Klicken Sie auf das Admin-Symbol (unten links) und wählen Sie dann im Abschnitt „Eigenschaften“ die Option „Datenströme“ und den Datenstrom aus, den Sie verfolgen möchten.

Dies wird Ihnen helfen, das Tracking von Seitenaufrufen für Ihr SPA einzurichten.

3. Sie sehen die Webstream-Details. Klicken Sie auf das Einstellungszahnrad unter „Erweiterte Messung“.

4. Klicken Sie auf „Erweiterte Einstellungen anzeigen“. 

5. Überprüfen Sie die Seitenänderungen basierend auf Browser-Verlaufsereignissen.

Enhanced Measurement-Ereignisse wie Scrolls, Outbound Clicks und Site Searches müssen genau getrackt werden, was zu unter- oder überbewerteten Daten führt. Um ein genaues Tracking zu gewährleisten, ist es am besten, diese zu deaktivieren oder sie mit GTM zu konfigurieren.

6. Klicken Sie anschließend auf die Schaltfläche „Speichern“ in der oberen rechten Ecke.

Um zu überprüfen, ob alles richtig funktioniert, verwenden Sie den Vorschaumodus von GTM. Melden Sie sich bei GTM an und klicken Sie dann auf „Vorschau“ in der oberen rechten Ecke.

Daraufhin wird ein neues Fenster geöffnet, in das Sie die URL Ihrer Website eingeben können. Nachdem Sie auf „Verbinden“ geklickt haben, wird die Seite aktualisiert und die Tracking-Details Ihrer Website angezeigt.

Wenn Sie oben den GTM-Container auswählen, sollte das Ereignis „history change“, auch bekannt als gtm.historyChange-v2, angezeigt werden.

Klicken Sie anschließend oben auf Ihre „GA4 measurement ID“, um zu überprüfen, ob das Seitenaufruf-Ereignis korrekt getrackt und gesendet wird.

Wenn die Ereignisse nicht an GA4 gesendet werden, machen Sie sich keine Sorgen – es könnte ein Zeichen dafür sein, dass die aktuelle Konfiguration nicht alles richtig erfasst. 

Es ist eine gute Idee, zur zweiten Methode des Trackings überzugehen. Diese Methode kann eine zuverlässigere Möglichkeit bieten, Ihre Seitenaufrufereignisse und andere Interaktionen genau zu erfassen. Manchmal funktionieren unterschiedliche Konfigurationen für bestimmte SPAs besser, sodass das Experimentieren mit anderen Methoden hilfreich sein kann.

Diese Methode überwacht auch Änderungen im Verlauf der Website, ähnlich wie die erweiterte Messfunktion von GA4.

Durch das Erkennen dieser Änderungen im Verlauf können Sie sie zum Triggern von Seitenaufruf-Ereignissen verwenden und an GA4 senden.

So tracken Sie „single-page“-Anwendungen mit dem „Verlaufsänderungstrigger“ von Google Tag Manager:

1. Melden Sie sich bei Google Tag Manager an.

2. Gehen Sie zu „Trigger“ und klicken Sie auf „Neu“, um einen neuen Trigger zu erstellen.

3. Scrollen Sie nach unten und wählen Sie Verlaufveränderung als Auslöser aus.

4. Stellen Sie den Trigger so ein, dass er bei allen Änderungen im Verlauf ausgelöst wird, und klicken Sie dann auf „Speichern“.

Es sollte jetzt eingerichtet sein, aber wir sollten es zur Sicherheit noch einmal testen. Rufen Sie den Vorschaumodus von GTM auf, wie wir es bei der ersten Methode getan haben.

Wie Sie sehen können, wird das GA4-Konfigurations-Tag ausgelöst, aber Sie können auch mehrere Verlauf-Ereignisse feststellen, die bei einigen SPAs auftreten können.

Hinweis: Das neue Google-Tag hat das GA4-Konfigurations-Tag ersetzt.

Wenn Sie auf dieses Problem stoßen, ist es wichtig, Ihre Trigger zu überprüfen und so anzupassen, dass sie nur bei bestimmten Änderungen ausgelöst werden und nicht bei allen Änderungen, um sicherzustellen, dass die Daten sauber und korrekt bleiben.

Die dritte Methode kommt zum Einsatz, wenn die ersten beiden Methoden nicht funktionieren. Bei diesem Ansatz muss ein Entwickler einen Data Layer in den Code der Website einfügen. Der Data Layer speichert Werte und triggert Seitenaufrufe innerhalb von Google Tag Manager.

Hier ist ein Beispiel dafür, wie der Code aussehen könnte:

<script>

 window.dataLayer = window.dataLayer || [];

 window.dataLayer.push({

   'event': 'virtualPageview',

   'pageUrl': 'https://www.example.com/path/?example#example',

   'pageTitle': 'Example title'

 });

</script>

So können Sie Seitenaufrufe und andere wichtige events direkt erfassen, indem Sie sie in den Code der Website integrieren.

Die Werte für pageUrl und pageTitle sollten dynamisch sein, da sie sich für jede Seite oder jeden Inhaltstyp ändern. Idealerweise kümmert sich der Entwickler um diese und alle Hashtags, Fragezeichen oder andere Abfrageparameter in den URLs.

Sobald der Data Layer eingerichtet ist, können Sie die Einrichtung in GTM in drei Schritten abschließen:

1. Einrichten von zwei Variablen für den Data Layer

2. Erstellen eines benutzerdefinierten Trigger-Ereignisses

3. Konfigurieren eines GA4-page_view-Ereignis-Tags zum Senden der Daten an GA4

Beginnen wir mit der Erstellung der Data Layer-Variablen für pageUrl und pageTitle:

1. Gehen Sie zu den Variablen.

2. Klicken Sie auf neu.

3. Wählen Sie als Typ Data Layer Variable aus und konfigurieren Sie die Variablen entsprechend für pageUrl und pageTitle.

4. Nachdem wir die Werte für die Seiten-URL und den Seitentitel in Variablen des Data Layer gespeichert haben, besteht der nächste Schritt darin, einen Trigger basierend auf dem benutzerdefinierten Ereignis (virtualPageview) zu erstellen, das wir zuvor im Data Layer definiert haben.

So richten Sie den benutzerdefinierten Event-Trigger ein:

Dieser Trigger wird immer dann aktiviert, wenn das virtualPageview-Ereignis an den Data Layer gesendet wird.

5. Als Nächstes erstellen wir das GA4-Ereignis-Tag, um die Daten an GA4 zu senden. So richten Sie es ein:

Konfigurieren Sie das Tag wie folgt:

- Event Name: page_view

- Event Parameter and Werte:

- Trigger: Stellen Sie den trigger so ein, dass er immer dann ausgelöst wird, wenn das benutzerdefinierte event virtualPageview erkannt wird.

Dadurch werden die Seitenaufrufdaten, einschließlich der dynamischen URL und des Titels, an GA4 gesendet.

Testen Sie die dritte Methode unbedingt im Vorschaumodus von GTM und in der DebugView von GA4, um sicherzustellen, dass die richtigen Daten erfasst werden, insbesondere für die Parameter page_location (URL) und page_title.

Wir haben diese Parameter nicht zum GA4-Konfigurations-Tag hinzugefügt, da GA4 sie nur einmal beim ersten Laden der Seite liest. Das bedeutet, dass spätere Änderungen an einer SPA übersehen werden, da die Seite nicht vollständig neu geladen wird.

Obwohl einige dieser Methoden eine Herausforderung darstellen können, sind sie in der Regel mit einer sorgfältigen Einrichtung umsetzbar.

Es ist nicht unbedingt notwendig, die Herausforderungen von SPAs zu verstehen, aber es kann die Handhabung von tracking-Problemen erleichtern, wenn sie auftreten. Hier sind einige häufige Herausforderungen:

1. JavaScript-Abhängigkeit: SPAs sind für ihre Funktion stark von JavaScript abhängig. Wenn JavaScript deaktiviert ist, wird keine der Interaktionen getrackt, da die Anwendung nicht funktioniert. Server-seitiges Rendering kann zwar eine Lösung bieten, kann aber die Dinge verkomplizieren, da sich andere dynamische Funktionen möglicherweise nicht wie erwartet verhalten.

2. Tracking von URLs mit Parametern oder Fragmenten: URLs, die Parameter wie Hashtags oder Fragezeichen enthalten, werden nicht automatisch verfolgt. Um dies zu beheben, müssen Sie die vollständige URL mithilfe von window.location.href in einer JavaScript-Variablen erfassen und den Parameter page_location mit diesem Wert für jedes GA4-Ereignis-Tag überschreiben, um sicherzustellen, dass die gesamte URL korrekt erfasst wird.

3. Wenn im Vorschaumodus von GTM mehrere Verlaufsänderungen angezeigt werden, ist es wichtig, diese zu untersuchen und doppelte Daten zu beseitigen. Sie können dies tun, indem Sie den Trigger so einstellen, dass er nur bei bestimmten Verlaufsänderungen ausgelöst wird und nicht bei allen.

4. Wenn Sie die Data Layer-Methode verwenden und feststellen, dass das virtuelle Event pageview bei jedem Laden der Website ausgelöst wird, sollten Sie die Option Ein page load event senden, wenn diese Konfiguration geladen wird“ deaktivieren, um unnötige Seitenaufrufe zu vermeiden.

5. Es ist wichtig, das Problem der fehlerhaften Weiterleitung zu lösen, bei dem Google bezahlten Traffic fälschlicherweise als organisch einstuft. Weitere Informationen finden Sie im Artikel von Simo Ahava zu diesem Thema. Leider ist diese spezielle Lösung derzeit nicht mit GA4 kompatibel.

Denken Sie daran, dass dies nur eine unvollständige Liste von Herausforderungen ist, da je nach Aufbau Ihrer Website weitere hinzukommen können. Diese Punkte sollten Ihnen jedoch eine gute Vorstellung davon vermitteln, was Sie erwarten können.

Um Schutzgebiete effektiv zu tracken, ist es wichtig, diese bewährten Verfahren zu befolgen:

Wenn Sie diese bewährten Verfahren befolgen, können Sie häufige Probleme vermeiden und genaue, zuverlässige Daten sammeln, wenn Sie SPAs mit GA4 und GTM tracken.

Das Tracking von Single-Page-Anwendungen (SPAs) kann knifflig sein, aber der serverseitige Google Tag Manager (GTM) erleichtert die Erfassung genauer Daten erheblich. Ob Sie nun die Tools von GA4, den Verlaufs-Trigger von GTM oder die Data Layer-Methode verwenden – diese Optionen helfen Ihnen, Ihre dynamischen Inhalte korrekt zu verfolgen.

Bei Stape.io sind wir Experten für serverseitiges tracking und bieten Tools wie die Integration von Data Layern und den Vorschaumodus, um sicherzustellen, dass Ihre Einrichtung reibungslos funktioniert.

Möchten Sie Ihr Tracking verbessern? Melden Sie sich noch heute kostenlos bei Stape an und lassen Sie uns Ihnen helfen, die genauesten Ergebnisse für Ihre SPAs zu erzielen! Nach der Anmeldung können Sie unsere detaillierten Anleitungen in Text- und Videoform zur Einrichtung des serverseitigen Trackings mit Stape nutzen.