So tracken Sie Single-Page-Applications (SPAs)

Published: Februar 5, 2019 Updated: Februar 6, 2019 Autor , Kategorie Analytics, Tag Manager

Was haben Spotify, Twitter, Google Mail, Google Maps und Netflix gemeinsam? Sie sind nicht nur Internet-Giganten, sondern auch Single-Page Applications (SPAs). Sie gehören zu den bevorzugten Websites der User. Denn sie sehen optisch ansprechend aus, haben ein hervorragendes UX-Design und kurze Ladezeiten.
Auf der anderen Seite stellen sie für Marketer und Analysten eine große Herausforderung für das Tracking dar. Aber es gibt durchaus Möglichkeiten und Maßnahmen, mit denen diese Probleme gelöst werden können – ein Tag Managementsystem bietet hier die optimale Unterstützung.

In diesem Artikel zeigen wir Ihnen, wie Sie einen Tag Manager nutzen können, um SPAs zu tracken.

Was ist eine eine Single-Page-Application (SPA)?

Eine Single-Page-Application ist eine Website oder App, die in einem Browser eingebunden ist. Das Hauptmerkmal beschreibt die Tatsache, dass es sich um eine einzelne Site handelt, die mit dem User interagiert. Dies passiert, indem der Content dynamisch neu geschrieben wird, anstatt vollständig neue Seiten vom Server zu laden.

Ein SPA verwendet sich wiederholenden Content wie:

  • Logos
  • Header
  • Footer
  • Bars
  • Banner

die sich nicht ändern, wenn ein Nutzer durch die Website klickt. Um die Site zu updaten werden daher nur wenige Bytes benötigt, der Kern bleibt jedoch unverändert. Das führt dazu, dass zum Laden der Site keine zusätzliche Zeit erforderlich ist, da die Menge der an den Server gesendeten Informationen viel geringer ist als bei anderen Websites.

Die SPA rendert die Seite direkt im Browser. Und dies funktioniert ziemlich schnell, da die meisten Inhalte nur einmal während des Lebenszyklus der Website geladen werden. Dann werden Daten im Hintergrund abgerufen.

So weit, so gut, da der User mit einer praktischen Website zufrieden ist, auf der er den benötigten Content einfach und schnell erhält.

Sie suchen einen leistungsstarken Tag Manager?

40 Key Features der 6 führenden Tag Management Systeme haben wir für Sie verglichen: Google Tag Manager, Tealium, Adobe Dynamic, Segment, Ensighten und Piwik PRO

Zur kostenlosen Tag Manager Checkliste

Die Schwierigkeiten mit dem Tracking von SPAs

Andererseits erfordern SPAs mehr Arbeit und Mühe, wenn Sie Tracking und Analytics einsetzen möchten. Sie fordern die Implementierung von Lösungen, die bei traditionellen Websites standardmäßig funktionieren. Wenn Sie sich also für diesen Ansatz entscheiden, bringt er einigen Mehraufwand mit sich.

Bei regulären Websites werden, wenn ein User sich durch die Website klickt, HTML, JavaScript, CSS usw. bei jeder Seite neu gerendert. Bei SPAs funktionieren viele JavaScript-Snippets jedoch möglicherweise nicht wie erwartet. Sie wurden für Websites erstellt, bei denen Tracking-Snippets nach dem Laden einer neuen Seite erkannt werden.

Genau hier liegt das Problem: SPAs laden den Code nur einmal, was bedeutet, dass Ihr Tracking-Tool nicht automatisch erkennt, wenn eine neue Seite geladen wird. Sie müssen das Tool daher wissen lassen, wenn sich URL und Titelseite ändern.

Tag Manager für das SPA-Tracking einsetzen

So kompliziert das Tracking von Single-Page-Applications auch ist, gibt es zwei Lösungsansätze, die mit einem Tag Manager umgesetzt werden können. Am Beispiel der Piwik PRO Analytics Suite zeigen wir Ihnen beide Optionen.
Wenn Sie einen Tag-Manager zum Tracking einer SPA verwenden möchten, können Sie einerseits Virtual Pageviews für Websites einrichten, die sich ändern während der User mit der Site interagiert. “Virtual Pageviews” lassen sich verwenden, indem Sie verschiedenen Elementen einer Website ein Code-Snippet hinzufügen. Damit können Sie einer Aktion eine eindeutige URL zuweisen. Daran werden Sie die Interaktionen des Users in Ihrem Analytics-Report erkennen.

Dieser Lösungsansatz ist besonders hilfreich, wenn Sie einen Funnel erstellen möchten, der beispielsweise für das Onboarding von Kunden verwendet werden kann. Auf diese Weise können Sie die gesamte Customer Journey abbilden und die Phase identifizieren, zu der Ihre User konvertieren oder abspringen.

Weitere Informationen zu den Möglichkeiten die Customer Journey vollständig zu tracken , liefern folgende Blogbeiträge:
Funnel-Reports: Mit Verhaltens-Segmentierung die gesamte Customer Journey abbilden
Customer Data Platform: Die neue Chance im Marketing – 360° Customer Journey Analyse

Bevor wir uns also mit dem Tracking beschäftigen, ist zusätzliche Arbeit erforderlich, die im Umkehrschluss auch den gesamten Prozess komplexer macht. Um hier nicht den Überblick zu verlieren, empfehlen wir die Implementierung eines Trackingplans.

Sie können dazu z. B. eine Tabelle, aber auch jedes andere beliebige Dokument nutzen. Notieren Sie jede Stufe des Funnels und verwenden Sie den Plan während des gesamten Prozesses. Dadurch haben Sie eine bessere Kontrolle über Ihre Aktionen und stellen sicher, dass alle Beteiligten den gleichen Kenntnisstand haben und dieselbe Sprache sprechen.

Hier ist ein gutes Beispiel aus dem E-Commerce. Der Step Name entspricht der Phase, unter Event Name definieren Sie, welche User-Interaktion Sie tracken möchten, und in der letzten Spalte legen Sie dann die Bedingung für das Feuern des Tags fest.

Step Name Event Name Bedingung
V “General settings”ansehen ASG – general settings ansehen User klickt aus “General settings” in “System” Bereich
Wert auf “Days prior to conversion” setzen ASG – days prior to conversion User setzt Wert für “Days prior to conversion”
Ecommerce – Multi-Attribution für Bestellungen ASG – Multi-Attribution Bestellungen User wählt “Enable Multi Attribution report for Orders” aus
Ecommerce – Multi-Attribution für verlassene Warenkörbe ASG – Multi-Attribution verlassene Warenkörbe User wählt “Enable Multi Attribution report for Abandoned Carts” aus
Multi-Attribution gespeichert ASG – Multi-Attribution gespeichert User speichert die Einstellungen.

Mehr zum Thema Funnel-Analytics und wie man diesen optimieren kann, lesen Sie in:
3 Schritte zur Optimierung des Conversion-Funnels mit Piwik PRO-Segmenten
Steigern Sie Ihre Funnel-Performance mit Hilfe von Segmenten

Virtual Pageviews nutzen

Nehmen wir an, Sie möchten User tracken, die sich für eine Musik-App anmelden, und die Einrichtung ihres Accounts durchlaufen. Wenn wir den Prozess herunterbrechen, können wir folgende Schritte definieren:

  1. Benutzerprofil erstellen
  2. Einen Benutzernamen einrichten
  3. Einen Preisplan auswählen
  4. Freunde finden, die bereits Mitglieder sind
  5. Erlaubnis zur Personalisierung
  6. Änderungen speichern

Zuerst müssen Sie den Tag Manager öffnen. Wählen Sie dann unter Tags die Option “Create new tag PP Virtual Page View”. Füllen Sie anschließend die Felder für die URL und den Dokumenttitel aus, damit Sie diese Daten später in Analytics abrufen können.

Hier ist ein mögliches Setup:

Konfigurieren Sie dann Ihren Trigger für diesen bestimmten Tag:

Wählen Sie die Art des Events. In diesem Fall ist es „Click“. Als nächstes legen Sie bestimmte Bedingungen fest. In diesem Fall möchten wir den angeklickten Button anhand ihrer ID identifizieren. Es ist von Vorteil, Ihren HTML-Code ein wenig anzupassen, um dies zu erleichtern.
Hier ist ein finale Setup:

Denken Sie daran, dass Sie für jeden einzelnen Schritt, den Sie in Ihrem Funnel tracken möchten, einen solchen Tag erstellen müssen. Dies kann auf dem Anklicken von Buttons oder auf einer anderen von Ihnen gewählten Bedingung basieren.

Um später einmal Seitenaufrufe auszuwählen, die diesen Funnel definieren, empfiehlt es sich, sie zusätzlich mit benutzerdefinierten Dimensions-Werten zu kategorisieren.

Erstellen Sie zuerst eine benutzerdefinierte Dimension auf Aktionsebene und benennen Sie sie, zum Beispiel “Name des Funnels”:

Geben Sie beim Einrichten von Virtual Pageviews, die für einen Funnel erstellt werden, einen Namen des Funnels an, den Sie für diese Dimensions-ID erstellen möchten:

Sobald die Einrichtung abgeschlossen ist, können Sie in Ihr Analytics-Tool eintauchen und überprüfen, wie User den Funnel durchlaufen. Schauen Sie sich unser Beispiel aus Custom Reports an:

Es stellt sich heraus, dass der dritte Schritt mit einer signifikanten Abnahme an Besucherzahlen gekennzeichnet ist. Rund 90 % von ihnen erreichen die Preisübersicht, aber nur 32 % erreichen den letzten Schritt.

Das ist eine wertvolle Information für Sie. Es signalisiert, wo Optimierungsbedarf besteht. Möglicherweise können die User keine geeignete Preisübersicht finden, vielleicht benötigen sie aber auch mehr Optionen und Sie sollten künftig über einige Änderungen nachdenken.

Alles in allem können Sie durch die Auswahl von Virtual Pageviews User Schritt für Schritt in Ihrem SPA tracken.

Custom Events anwenden

Wie bereits erwähnt, können Sie auch einige einfache Aktionen tracken, für die kein Funnel erforderlich ist. Möglicherweise müssen Sie nur wissen, wie oft ein User eine bestimmte Aktion ausgeführt hat, z. B. Klicks auf:

  • eine E-Mail Adresse,
  • Anruf-Link,
  • Video-Link,
  • Download-Link,
  • spezifische CTAs.

Zu diesen Aktionen zählt das Speichern eines Lieblingsliedes in Spotify oder das Teilen von Inhalten auf Facebook. Für diesen Zweck empfiehlt es sich, Events im Tag Manager zu konfigurieren.

Angenommen, Sie möchten Klicks auf den “Kontakt”-Button Ihrer Blogseite tracken. Öffnen Sie den Tag Manager, fügen Sie einen neuen Tag hinzu und wählen Sie die Tag-Vorlage „Piwik PRO Custom Event“ aus. Definieren Sie unter “Category”, was Sie tracken möchten, beispielsweise einen CTA in Ihrem Blog.

Füllen Sie anschließend das Feld “Action” aus, damit Sie genau wissen, auf welchen Button geklickt wurde. Dann können Sie das Feld “Name” ausfüllen, damit Sie wissen, welcher Beitrag mit dem angeklickten Button verknüpft wurde.

Verwenden Sie danach eine Variable {{Page path}}, um zur nächsten Ansicht zu gelangen.

Sobald dies geschehen ist, sollte es so aussehen:

Kostenlose Tag Manager Demo

Lernen Sie alle Vorzüge unseres leistungsstarken Tag Managers in einer persönlichen Demo kennen.

Kostenlosen Demo-Termin vereinbaren

Fazit

Zweifelsohne gewinnen Single-Page Applications mehr und mehr an Bedeutung. Ein Grund ist, dass sie für mobile Geräte perfekt geeignet sind. SPAs helfen Usern auch beim Navigieren auf Websites, ohne von einer Seite zur anderen wechseln zu müssen. Darüber hinaus ist der Entwicklungsprozess ziemlich kosteneffektiv, da es nicht so lange dauert, diese Sites zu entwerfen und zu veröffentlichen.

SPAs bieten einige Möglichkeiten zum Tracking. Aufgrund der hohen Nutzung solcher Seiten, sollten diese Ansätze genutzt, jedoch durch den Mehraufwand auch gut durchdacht werden.

Wir hoffen, dass wir Ihnen mit unseren Beispielen einige Optionen aufgezeigt haben, welche Sie als zukünftigen Leitfaden nutzen können.

Autor:

Tatjana Hein, Content & PR Manager DACH

Tatjana ist sowohl im Content-Marketing, als auch in der Public Relations zu Hause. Sie hat in beiden Welten immer die neuesten Trends und Entwicklungen im Blick und schafft für Piwik PRO den Spagat zwischen beiden Bereichen.

Mehr Artikel von diesem Autor

Autor:

Karolina Matuszewska, Content Marketer

Karolina ist Content Marketer bei Piwik PRO. Sie hat sich auf On-site und Off-site Personalisierung spezialisiert. Sie beherrscht die Kunst technische Zusammenhänge einfach zu erklären und den Leser unterhaltsam zu informieren. Digital Marketer und Web Analysten sind hier genau richtig.

Mehr Artikel von diesem Autor
 Ein Vergleich der 5 führenden Tag Management-Systeme

Share