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. Wenn Sie neu in diesem Thema sind, lesen Sie zunächst unseren ausführlichen Artikel darüber, was ist serverseitiges tracking і wie es funktioniert.

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:

• Verbesserte Benutzererfahrung. SPAs machen das Neuladen ganzer Seiten überflüssig und bieten ein schnelleres, reibungsloseres, App-ähnliches Gefühl ohne Verzögerungen bei der Navigation.
• Schnellere Performance. Es werden nur die aktualisierten Inhalte abgerufen, wodurch Interaktionen schneller und effizienter werden.
• Handyfreundlich. SPAs sind reaktionsschneller und verhalten sich wie native Apps, sodass sie perfekt für Handynutzer geeignet sind, die Geschwindigkeit und Flexibilität erwarten.
• Einfachere Entwicklung. Entwickler können Code wiederverwenden und besser wartbare, modulare Apps erstellen, wodurch der Entwicklungsprozess beschleunigt wird.
• Bessere Front-End-Steuerung. SPAs ermöglichen eine bessere Kontrolle darüber, wie Daten angezeigt werden, und eignen sich daher gut für dynamische, interaktive Webanwendungen wie Social-Media-Plattformen und Dashboards.

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 GA4 Benutzerdefinierte Ereignisse oder Seitenänderungen an den Data Layer innerhalb Ihrer SPA. Sobald Sie Installieren Sie Google Tag Manager abgeschlossen haben, kann GTM diese Übertragungen 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. 

Lesen Sie mehr darüber, wie Sie Ihre Google Ads Kampagnen optimieren, in unserem Artikel.

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:

• Gehen Sie zu Trigger
• Klicken Sie auf neu
• Wählen Sie benutzerdefiniertes Ereignis als Trigger-Typ
• Legen Sie den Namen des Events auf virtualPageview fest

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:

• Gehen Sie zu Tags
• Klicken Sie auf neu
• Wählen Sie GA4 Event als Tag-Typ aus

Konfigurieren Sie das Tag wie folgt:

- Event Name: page_view

- Event Parameter and Werte:

• page_location: Setzen Sie den Wert auf die DLV – pageUrl Variable

• page_title: Setzen Sie den Wert auf DLV – pageTitle Variable

- 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 einen Entwickler zur Verfügung haben, bitten Sie ihn um Hilfe bei der Einrichtung der Data Layer-Methode. Dadurch wird das Tracking genauer, da wichtige Daten wie Seiten-URLs und -Titel direkt zum Data Layer hinzugefügt werden können. So haben Sie eine bessere Kontrolle darüber, was auf Ihrer Website getrackt wird.
• Testen Sie Ihre Einrichtung immer im Vorschaumodus von Google Tag Manager und in der DebugView von GA4. So können Sie Probleme wie doppelte events oder falsche triggers finden und beheben, bevor Ihre Einrichtung live geht, und eine genaue Datenerfassung sicherstellen.
• Wenn die URLs Ihrer Website Fragmente wie # oder ? enthalten, erfassen Sie die vollständige URL in einer JavaScript-Variablen mit window.location.href. Verwenden Sie diesen Wert, um den Parameter page_location in allen GA4-event-tags zu ersetzen und sicherzustellen, dass die vollständige URL korrekt getrackt wird.
• Fügen Sie die Parameter page_location und page_title nicht direkt zum GA4-Konfigurations-Tag hinzu. Erstellen Sie stattdessen ein separates GA4-event-Tag speziell für page_view, um diese Parameter manuell zu überschreiben. Durch diesen Ansatz wird sichergestellt, dass Änderungen an der URL und am Seitentitel in Single-Page-Anwendungen (SPAs) genau getrackt werden.
• Überprüfen Sie die Option „Ein page load event senden, wenn diese Konfiguration geladen wird“ im GA4-Konfigurations-Tag, um zu sehen, ob sie benötigt wird. Wenn Sie diese Option aktivieren, kann dies zu doppelten oder falschen Seitenaufrufdaten führen, wenn Ihr SPA neue Inhalte lädt, ohne die gesamte Seite zu aktualisieren.

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.