Single Page Applications (SPA’s) mit dem Matomo Tag Manager tracken
Single Page Applications mit Matomo zu tracken, erfordert andere Herangehensweisen als das Tracking von normalen Webseiten, für die die meisten im Netz zu findenden Tracking-Dokumentationen geschrieben wurden.
Ich möchte nachfolgend Ansätze zum Tracken von Single Page Applications auf Basis des Matomo Tag Managers beschreiben. Die Verwendung des Matomo Tag Managers empfehle ich in dem Zusammenhang besonders, da durch den Tag Manager eine Trennbarkeit von Webanalyse und Code der Single Page Application viel besser gegeben ist als wenn man das „klassische“ Matomo-Tracking nutzen würde. Beim Tag Manager-Einsatz muss im Normalfall kein anderer Matomo-Code in die Single Page Application integriert werden, als bei einer „normalen“ Webseite. Ferner unterstützt der Tag Manager zumindestens grundlegend bereits das Tracking von Single Page Applications.
Was sind Single Page Applications?
Single Page Applications (SPA’s oder deutsch „Einzelseiten-Anwendungen“) bestehen aus Sicht des Browsers nur aus einer einzigen HTML-Seite, deren Inhalte sich nach Interaktionen von Benutzern jedoch dynamisch verändern. In der Regel werden die geänderten Inhalte in einem Teilbereich der Webseite nachgeladen oder tauschen sich aus, der Rahmen der Webseite bleibt jedoch unverändert. Solche Seiten haben mehr den Charakter einer App. Facebook oder Twitter sind sehr bekannte Beispiele, jedoch werden auch häufig Produkt-Landingpages als „SPA“ umgesetzt, da sie eine animativere, „actionlastigere“ User-Experience ermöglichen.
Tracking-Webanalyse-Tools arbeiten normalerweise auf Basis eines Seitenaufrufes im Browser. Sie erkennen den Seitenaufruf und senden eine Tracking-Meldung über den Seitenaufruf bspw. an Matomo. Wenn eine Webseite jedoch nur aus einer einzigen Seite besteht, die nur einmal beim initialen Aufruf geladen wird und später dann nur Teile der Webseite verändern, funktioniert dieser Ansatz nicht mehr.
Glücklicherweise müssen viele Single Page Applications trotzdem in der Lage sein, je nach Inhalt verschiedene Seiten dem Browser, den Suchmaschinen und damit letztlich auch den Webanalyse-Tools „vorzugaukeln“. Sie machen dies, indem sie „künstlich“ die URL und den Seitentitel verändern, sobald ein anderer Inhalt angezeigt werden muss. Würden Sie das nicht tun, kann kein User sich ein Lesezeichen auf bestimmte Inhalte setzen oder Suchmaschinen könnten Inhalte nicht auseinanderhalten und keine unterschiedlichen Treffer anbieten.
Seitenaufruf anhand Trigger „History Änderung“ erkennen
Der Matomo Tag Manager bietet einen Trigger „History Änderung“ an, der die Veränderung einer URL erkennt. Wenn dieser Trigger ausgelöst wird, kann dieser als Auslöser für ein Tag genutzt werden, um den (vermeintlichen) Seitenaufruf innerhalb der Single Page Application in Matomo zu tracken.
Trigger „HistoryChange“, um die Änderung einer URL zu erkennen
Tag, welches die neue URL und den Seitentitel setzt, nachdem entweder der Trigger vom Seitenaufruf oder der bzgl. einer geänderter URL ausgelöst wurde.Nicht zu sehen ist, dass ich dieses Tag zeitverzögert auslöse (1000ms), um sicherzustellen, dass auch der Titel in der Single Page Application geändert wurde.
Dem „fingierten“ Seitenaufruf muss beim Tracking die geänderte URL mitgegeben werden. Der Matomo Tag Manager hat dazu eine vorbereitete Variable, die wie in obiger Abbildung zu sehen ist, als „Custom URL“ zu setzen ist: {{HistoryHashNewUrl}}.
Der Titel (der title im HTML) muss im Tag Manager nicht explizit gesetzt werden, wenn er von der Single Page Application geändert wurde. Im obigen Beispiel habe ich aber die vorbereitete Variable {{PageTitle}} verwendet.
Sollte die Single Page Application jedoch den Titel nicht ändern, so muss im Tag Manager mit Hilfe einer eigens angelegten Variablen (bspw. {{mytitle}}) ein Titel erzeugt werden. Dies kann man mit Hilfe einer Variablen vom Typ „Benutzerdefiniertes JavaScript“, „DOM Element“ oder „Data-Layer“ erledigen. Dies hängt davon ab, welche Informationen die Single Page Application vorhält, die für die Erzeugung eines künstlichen Seitentitel für das Matomo-Tracking verwendet werden kann. Besser wäre es natürlich, wenn der Seitentitel sich bei Änderung der URL ebenfalls ändert.
Hinweis: Ich habe die Erfahrung gemacht, den Tag etwas zeitverzögert (z.B. 1000ms) ausführen zu lassen. Durch asynchrone Ausführung von JavaScript im Browser kann es sein, dass der Trigger für die URL-Änderung bereits ausgelöst wurde, der Titel sich aber noch nicht geändert hat und sonst versehentlich der vorherige Titel vom Tag Manager ermittelt wird.
Zu beachten ist, dass der Trigger „History Änderung“ nicht beim initialen Aufruf der Single Page Application ausgelöst wird und zusätzlich ein Trigger „Seitenansicht“ für diesen Fall benötigt wird.
Ich habe im Beispiel oben daher das Tag zum Tracking des Seitenaufrufes so konfiguriert, dass einer der beiden Trigger ausgelöst werden musste.
Sollte sich die URL durch die Single Page Application bei Aufruf neuer Inhalte nicht ändern, was äußerst nachteilig wäre (wegen SEO, Lesezeichen, Tracking), so kann im Matomo Tag Manager immernoch ein Tracking anhand von Klick-Element-Triggern oder anderen Triggern, die in Folge einer User-Interaktion ausgelöst werden, erfolgen. In dem Fall muss man allerdings überlegen, ob ein fingierter Seitenaufruf wirklich das richtige ist oder eher ein Ereignis an Matomo getrackt werden sollte.
Über den Data-Layer des Matomo Tag Managers gehen
Der Data-Layer des Matomo Tag Managers könnte alternativ ebenfalls zur Ermittlung der neuen URL und des neuen Seitentitels verwendet werden, wenn er durch die Single Page Application entsprechend die Angaben erhält. In dem Fall muss im Skript-Code der Single Page Application ein Tag Manager Event an Matomo gesendet werden, sobald eine „neue Seite“ geöffnet wurde:
var _mtm = _mtm || [];
_mtm.push({‚event‘: ’newSPA_Pageview‘, customURL: ‚/new-url‘, customTitle: ‘Neuer Seitentitel‘});
Im Tag Manager kann mit einem Trigger „Benutzerdefiniertes Ereignis“ – der, um im Code-Beispiel zu bleiben, bei Eintritt des Events „’newSPA_Pageview’” ausgelöst wird – ein Tag sich die beiden Informationen aus eigens für die URL und den Titel im Tag Manager anzulegenden Variablen holen und den Seitenaufruf tracken.
Prinzipiell halte ich jedoch diesen Ansatz in der Praxis aus Wartungsgründen für schwieriger. Der Entwickler der Single Page Application und der Webanalyst in Matomo haben hier eine Vereinbarung über Variablennamen und Prozesse zu treffen, was eine Abhängigkeit schafft.
Wenn möglich sollte über die History-Änderung der Seitenaufruf erkannt werden, da hierzu kein Matomo-spezifischer Code in der Single Page Application vorgehalten werden muss.
Der Data-Layer kann sich allerdings als notwendiger Ansatz herausstellen, wenn nicht nur Seitenaufrufe sondern auch Ereignisse in der Single Page Application getrackt werden sollen, deren Erkennung im Matomo Tag Manager sonst nicht oder nur sehr schwer möglich wäre. Wenn sich z.B. neue Nachrichten oder Werbestörer dynamisch ohne Aktivität des Users in der geöffneten Seite der Single Page Application einblenden, CSS-Klassen oder ID-Selektoren dynamisch sind, um sie nutzen zu können, und dieses Sichtbarwerden getrackt werden soll, dann bietet sich ein Push-Event in den Data-Layer an. In solch einem Fall nicht für den Seitenaufruf, sondern um bspw. ein Tracking Ereignis zu messen.
Zum Verständnis: Ein Data-Layer Event ist nicht gleich zu setzen mit einem Tracking Ereignis in Matomo. Das Data-Layer Event informiert den Tag Manager, über ein Ereignis auf der Webseite. Ein Tracking Ereignis trackt nach Matomo anhand Kategorie, Aktionname und optional Name und Wert.
Weitere Trackingmethoden von Matomo einbinden
Bisher habe ich nur über das Erkennen von Seitenaufrufen geschrieben. Matomo kann jedoch auch ausgehende Links, Downloads, Content-Impressionen und Content-Klicks als auch Formulare (siehe meine Vorstellung des Form-Plugin) und Audio- und Video-Interaktionen automatisch tracken.
Wenn sich in Single Page Applicationen ausgehende Links, Downloads, eingeblendete Inhalte etc. dynamisch ändern, sich also das HTML (DOM) verändert, so muss Matomo darüber aktiv informiert werden, damit diese Änderungen erkannt und zuvor genannte Tracking-Methoden funktionieren.
Ich habe dies mit einem Tag vom Typ „Benutzerdefiniertes HTML“ gelöst, welches die gewünschten Funktionen des klassischen Matomos aufruft, um über die Änderungen zu informieren bzw. den Matomo-Code veranlasst, die Webseite neu zu analysieren. Das Tag führe ich zeitverzögert erst nach jenem Tag aus, was die Matomo-Konfiguration beim Seitenaufruf initialisiert hat.
Folgendes Beispiel zeigt, wie ich einen Re-Scan des HTMLs durch Matomo veranlasse, um ausgehende Links und Download-Links zu erkennen, nachdem sich der Inhalt des DOM’s verändert hat.
Matomo veranlassen, den Seiteninhalt (HTML DOM) neu einzulesen. Der Tag muss ausgeführt werden nachdem der Inhalt der Single Page Application sich geändert hat.
Durch welchen Trigger der Tag angesteuert wird, ist je nach Single Page Application zu bewerten. In meinem Fall habe ich den Trigger gewählt, der über die Änderung der URL informiert. Das kann aber bei bestimmten Webseiten nicht richtig sein und man muss auf Unterstützung der Entwickler der Single Page Application setzen, die ein Push-Event in den Data-Layer des Tag Managers zu senden haben (siehe oben).
In einem weiteren Tag ist zu sehen, wie ich den Referer auf die vorherige URL setze (der Aufruf erfolgt vor dem Page-Tracking). Ob das notwendig ist, bin ich mir nicht sicher, da ich in der Matomo Dokumentation nichts gelesen habe, für welches Reporting diese Angabe genutzt wird. Möglicherweise für die Transitionen, aber bislang konnte ich das nicht belegen.
Hier wird die bisherige URL als Referer gesetzt. Das Tag wird vor dem Tracking des Seitenaufrufs ausgeführt.
Für weitere eventuell notwendige Aufrufe, um spezielle Anforderungen innerhalb der Single Page Application zu tracken, verweise ich auf die Matomo-Dokumentation.
Fazit
Single Page Applications erfordern einen anderen Ansatz zum Tracking. Mit dem Matomo Tag Manager ist es jedoch verhältnismäßig leicht Seitenaufrufe zu tracken und es erfordert keine Programmierkenntnisse beim Webanalysten, sofern die Single Page Application einige grundsätzliche Regeln auch für SEO beachtet. Sind jedoch weitere Anforderungen zu tracken, die über Seitenaufrufe hinausgehen, muss man sich intensiver mit Matomos Tracking-Ansätzen auseinandersetzen. Ein Grundverständnis von JavaScript und ein Engagement bezüglich intensivem Testen werden dann erforderlich sein.
Links
- Matomo Doku zu Single Page Applications (Englisch)
- Arbeiten mit dem Data Layer in Matomo (Englisch)
Kundenstimmen aus meinen Projekten
Schreibe einen Kommentar