Schreibe mir! hallo@trackingninja.de
Matomo Tag Manager Data Layer

Den Matomo Tag Manager Data Layer verstehen

Der ultimative Guide den Data Layer zu meistern

Der Data Layer ist die Lösung, um den Matomo Tag Manager mit Daten anzureichern, den vorhandenen Tags und Trigger Informationen zur Verfügung zu stellen und diese Daten dann auch für die Steuerung des Tag Managers zu nutzen.
Ohne den Data Layer hätte der Tag Manager von Matomo keine Variablen oder Trigger und darauf baut das Abfeuern von Tags auf.
Der Data Layer ist also der Dreh- und Angelpunkt, um das volle Potenzial des Matomo Tag Managers zu entfalten.
In diesem Beitrag gehe ich auf alle wichtigen Punkte, bezüglich Matomo und Data Layer, die man kennen sollte, ein.


Es ist zugleich eine Hilfe die erklären soll:

Inhalt


Was ist der Data Layer?

Für viele ist der Data Layer eine große Unbekannte, die kompliziert zu verstehen ist und voller Ungereimtheiten steckt.
Dabei ist er der Schlüssel um das volle Potenzial des Matomo Tag Managers zu entfalten.
Und auch gar nicht so schwer zu verstehen. 

 

Technisch gesehen ist der Data Layer ein JavaScript-Array, in dem die benötigten Informationen gespeichert werden.
Anschließend verwendet der Tag Manager diese Informationen in den Tags, Trigger und Variablen.
Diese Informationen können auch an andere Systeme übertragen werden, zum Beispiel über Marketing-Tags an Facebook und Google.
(Auch wenn das nicht unbedingt dem Grundprinzip von Matomo entspricht)
Somit ist dieses Array wie eine temporäre, nicht sichtbare, weitere Schicht der Website.
Die Besucher der Internetseite sehen die Informationen und den Inhalt, die die Data Layer Schicht hat, nicht.
Da sie ein unsichtbarer Bestandteil der Website ist.
Dennoch kann man die Informationen, wenn man weiß, wie es geht, abrufen.

 

Stell dir vor, die Datenschicht ist wie einen Eimer.
Der Eimer kann verschiedene Bälle enthalten, auf jedem Ball sind einige Informationen als Zahlen oder Wörter aufgedruckt.
Das können zum Beispiel Produktinformationen sein, User-IDs oder die Kategorie der Seite.
Was sich im Eimer deiner Webseite befindet kann auch der Matomo Tag Manager aufnehmen und verwenden.
Fügt man Informationen, also weitere Bälle, dem Eimer hinzu, dann können diese auch ab diesem Zeitpunkt vom Tag Manager verwendet werden.
Damit können dann Trigger für Tags gesteuert werden oder das Matomo Tracking kann mit Informationen angereichert werden, die es standardmäßig nicht kennen kann.

 

Folgendes Bild zeigt die Funktion des Data Layers.

Matomo Tag Manager Data Layer

Es kommt immer wieder vor, dass Entwickler den Data Layer nicht kennen.
Denn nicht jede Webseite besitzt ihn, nicht jeder der ein Tracking implementiert hat, nutzt ihn.
Um aber ein sauberes Tracking zu haben und die Arbeit zwischen Analysten, Entwicklern und externen Beratern zu vereinfachen, empfiehlt es ihn zu kennen und auch zu wissen wie so ein Data Layer funktioniert.

 

Den Data Layer einbauen – So wird er implementiert

Es kommt oft vor dass die Frage gestellt wird wie denn ein Data Layer auf der Webseite einzubauen ist.
Die Dokumentation von Matomo kann etwas verwirrend sein.
Auch in der Hilfe zum Einbetten des Tag Managers wird es oft nicht sofort klar was zu tun ist.

Sofern keine zusätzlichen Seiteninformationen zum Ladezeitpunkt des Tag Managers vorhanden sein müssen, wie zum Beispiel User IDs oder Produktdaten, ist nichts weiteres zu tun als den Matomo Tag Manager Code in den Quellcode der Seite einzubauen.
Denn sobald das JavaScript-Snippet des Matomo Tag Manager in den Quellcode der Website eingefügt wurde und es durch einen Seitenbesuch geladen wird, wird der Data Layer automatisch vom JavaScript-Snippet initiiert.
Nun steht die Datenschicht zur Verfügung, sie ist aber noch leer.


Aber wie man sich vorstellen kann ist es möglich den Matomo Data Layer zu erweitern.
Dazu werden Daten und Informationen hinzugefügt oder überschrieben.
Sie sind so lange präsent bis ein Seitenwechsel statt findet oder die Seite neu geladen wird.
Hinzufügen von Nutzer- oder seitenspezifische Informationen werde ich im weiteren Verlauf des Beitrages näher erläutern.
Da solche Informationen aber zumeist aus dem Backend kommen oder über ein Trackingscript erfasst werden, ist es gut wenn sich ein Webentwickler darum  kümmert.

 

 

Hier ist ein Beispiel für das Container-Snippet von Matomo Tag Manager.

Es steht jeder Matomoinstallation zur Verfügung und kann in den Einstellungen per Copy&Paste einfach entnommen werden.

<!-- Matomo Tag Manager -->
<script type="text/javascript">
    var _mtm = window._mtm = window._mtm || [];
    _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.src='https://{$MATOMO_URL}/js/container_{$CONTAINER}.js'; s.parentNode.insertBefore(g,s);
</script>
<!-- End Matomo Tag Manager -->

 

Den Data Layer deklarieren

Wie werden nun die Daten in die Datenschicht eingefügt?
Denn Ist der Data Layer einmal erstellt ist er von Beginn an (fast) leer.
Um den vollen Nutzen und Spaß zu haben müssen Daten hinzugefügt werden.
Bildlich ist es so zu verstehen dass man nun seinen leeren Eimer mit Bällen, die natürlich allerhand an Informationen aufgedruckt haben, befüllt.

Dafür gibt es zwei Möglichkeiten:

  1. Bereitstellen des Matomo Data Layer vor dem Matomo Tag Manager Code
  2. Durch das “pushen” von Informationen mittels eines _mtm.push

 

Den Data Layer deklarieren – Bereitstellen des Matomo Data Layer vor dem Matomo Tag Manager Code

Die erste Methode gehört meiner Meinung nach auf eine jede Webseite.
Damit man diese ordentlich getrackt wird.

Hierzu fügt man den Data Layer vor dem Tag Manager Code ein.
Basierend auf Werte, die das CMS bereitstellt, kann man dann den Tag Manager mit diesen Informationen anreichern.
Über die Einstellungen des Tag Managers (Variablen) können sie dann beim Seitenaufruf erfasst und an das Matomo Tracking weitergegeben werden.
Dadurch kann man sich zum Beispiel Produktdaten, Seiten-ID (kennt der ein oder andere aus WordPress) oder, falls ein Nutzer schon eingeloggt ist, die Nutzer-ID bereitstellen.
Standardtracking kann solche Informationen nicht erfassen oder kennen.
Wir helfen also damit nach und organisieren was erfasst und getrackt wird.
Und da diese Werte bereits vorhanden sind, wenn der Tag Manager geladen wird, kann dieser die Werte auch für Custom Dimensions oder Event-Tags benutzen.


Das kann dann so aussehen:

<!-- Static Data Layer -->
<script>var_mtm = _mtm|| [];
_mtm.push({
'pageValue': '0.5',
'pageTitle': document.title
});
</script>
<!-- Static Data Layer End -->


<!-- Matomo Tag Manager -->
<script type="text/javascript">
var _mtm = _mtm || [];
_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src='https://your.domain.de/js/container_12345.js'; s.parentNode.insertBefore(g,s);</script>
<!-- Matomo Tag Manager -->

 

_mtm.push

Die folgende Methode ist anzuwenden, um den Data Layer mit weiteren Informationen zu füllen.
Durch Push-Befehle wird der Data Layer, das Array, mit zusätzlichen Attributen angereichert.
Der Tag Manager kann diese dann bei Ereignissen aufnehmen und an das Matomo Tracking schicken.

 

Hier sind ein paar Beispiele dazu.

 

Eine Variable in den Data Layer schreiben, zur Verfügung stellen:

var _mtm = _mtm || [];
window._mtm.push({
  'productColor': 'black'
});


Ein bestimmtes Event in den Data Layer schreiben:

var _mtm = _mtm || [];
window._mtm.push({
  'event': 'purchase'
});

 

Ein Seitenbesucher hat ein Produkt zum Warenkorb hinzugefügt:

var _mtm = _mtm || [];
window._mtm.push({
  'event': 'addToCard',
  'productID': 'A1B2C3',
  'productPrice': '123'
});

 

Hinweis: Es ist nicht zwingend notwendig window._mtm zu verwenden.
Es hat sich aber schon bei der ein oder anderen Webseite als Hilfreich erwiesen.

 

Wie benutzt der Matomo Tag Manager nun diese Informationen – Was mache ich damit?

 

Der Matomo Tag Manager kann zwei Dinge damit anfangen.

 

  1.  Er kann bestimmte Werte, die einer Variable zugeordnet sind, auslesen.
  2.  Mit den Event-Informationen kann er auf diese horchen und über einen Trigger (im deutschen auch als Impuls bekannt) dann bestimmte Tags abfeuern.

 

Variablen auslesen

Gehen wir nun davon aus deine Webseite hat unterschiede Kategorien.
Einen Blog, Kontakt, Startseite und vielleicht sogar eine Produktübersichts-  und Produktdetailseite.
Wo sich der Seitenbesucher gerade befindet kann Matomo nicht wissen.
Möchtest du alle Aktionen und Events, nach Kategorie oder Seitentyp erfassen, dann musst du zusätzliche Information bereit stellen.
Über den Data Layer des Matomo Tag Managers kannst du es bereitstellen.
Dazu muss, vor dem Container Snipped, ein static Data Layer zur Verfügung gestellt werden.

Das kann dann so aussehen:

<head>
<script> var _mtm = _mtm || [];
_mtm.push ({
'pageCategory': 'Blog'
});
</script>
<script>
<!-- Matomo Tag Manager -->
<! -- ....abcs.js... -->
<!-- End Matomo Tag Manager -->
</script>
</head>

Jetzt kann Matomo gleich beim Laden den hinterlegten Wert aus dem Data Layer auslesen und man kann diesen, zum Beispiel, einer Custom Dimension hinzufügen.
Dadurch könnte man alle Seitenkategorien wie den Blog, Produktübersichtseiten oder die Detailseiten gruppieren und deren Performance vergleichen.


Hier ein schönes Beispiel aus der Matomo Demo.


Ein weitere Beispiel an Hand eines Nutzers der, über seinen Account, auf der Webseite eingeloggt ist:
Ein Nutzer ist über das Backend der Seite eingeloggt und hat bereits den Wert ‘Internal’ (durch einen vorherigen Data Layer Push) beim Seitenbesuch erhalten.
Beim Seitenaufruf (Pageview Event im Tag Manager) besitzt er also schon einen definierten userType.
Der userType ist eine Variable aus der Datenschicht des Tag Managers, diese hat der Seitenbesitzer dort angelegt.

 

Der Matomo Tag Manager Data Layer

user-logged-in

 

user_internal_matomo - Variables

 


Beim Abmelden wird, über einen Data Layer Push, die Variable aktualisiert.
Dies geschieht, zum Beispiel, über ein Script das die Loginfunktion verwaltet.

 

 

_mtm.push({
   'event': 'mtEvent',
   'userType': 'undefined'
 });

user-undefined

 

Was ist hier passiert?
Durch den Data Layer Push Event wurde ein Event mit dem Namen mtEvent in den Data Layer geschickt.
Zusätzlich wurde die Variable userType mit einem Wert von undefined (als String) neu geschrieben.
Da der Nutzer nicht mehr eingeloggt ist wird er bei jedem folgenden Seitenbesuch als “undefined” markiert.

 

Der Vergleich mit dem Aufkleber

Man kann es sich so vorstellen wie wenn du ein Haus über zwei Türen betreten kannst.
Nimmst du die linke Tür bekommst du einen blauen Aufkleber, gehts du durch die rechte Tür bekommst du einen roten Aufkleber.
Dieses Attribut gilt so lange bis du den Aufkleber entfernst.
Jetzt kannst du aber diese Attribute ändern, entfernen oder aktualisieren.
Dadurch würdest du weitere Aufkleber bekommen, entfernen oder umtauschen.
Und dadurch könnte man dann gewisse Zuordnungen machen.
Egal welches Zimmer du im Haus betrittst, die dort Anwesenden könnten über die Aufkleber sehen welche Attribute du besitzt.


Achtung:

Es gilt immer der zuletzt gesetzte Wert, der gleichen Variable, als aktuell.
Die Aktualisierung überschreibt den vorherige Wert!
Für jede Seite ist ein neuer Data Layer anzulegen.
Ein gutes Beispiel für ein besseres Verständnis ist:
Beim Wechsel, von der Startseite zum Kontaktformular, wird die Datenschicht nicht übertragen.
Das macht auch Sinn, da sich die Attribute ändern können.

 

Werte von Variablen abfangen

Folgen wir weiter dem Beispiel mit der Variable userType.
Im Matomo Tag Manager kannst du dann den Wert der Variable userType, mit der Zuhilfenahme einer Variable, abfangen.
Diese Variable muss aber erst einmal vorhanden sein.
Dafür muss natürlich im Tag Manager, unter Variables, eine Variable angelegt werden.
Hierzu einfach besagten Bereich im Tag Manager aufrufen und CREATE NEW VARIBLE WÄHLEN.

 

Tag Manager - Variablen

user_internal_matomo_variable_overview

Matomo - Variable


Dadurch fügst du dem Matomo Tag Manager Data Layer einen zusätzliche Varibale hinzu.
Diese kann anschließend genutzt werden.

 

Ich hoffe dass es mit diesem Beispiel etwas verständlicher wurde, was der Matomo Data Layer ist und wie man sich den Data Layer zu nutze machen kann.
Dafür wurde eine Variable angelegt und diese beispielhaft mit einem neuen Wert versehen.
Was bringt uns das?
Basierend auf Ereignisse, Tags und den Variablen kann man sich ein, auf die notwendigen Anforderungen, maßgeschneidertes Tracking erstellen.
Das könnte dann dann folgendes Zusammenspiel ermöglichen.
Ein Event kann als Trigger fungieren, daraufhin wird ein Tag gefeuert, z.B. ein Download-Ereignis, welches in Matomo erfasst werden soll.
Dieser Tag für enthält wiederum eine Custom Dimension, die ihren Wert über eine vorhanden Variable bezieht.

 

Zusammenfassung:

Das war jetzt sicherlich nicht so einfach (und der Beitrag wird mit der Zeit noch etwas wachsen).
Da die Nutzung der Variablen und Tags noch nicht im Detail erklärt wurde.

 

Matomo Tag Manager Data Layer ist ein wichtiger Bestandteil des Matomo Trackings.
Ereignis-Tracking kann damit dynamischer gestaltet werden, es muss nicht für sämtliche Seiteninteraktionen einen neuer Tag erstellt werden.
Es ermöglicht es uns also, Interaktionen zu erfassen (sie als Trigger zu verwenden) und zusätzliche Daten über die Interaktion oder den Seiteninhalt abzurufen (über die Variablen der Datenschicht).

Ich bin mir sich, dass es anfangs schwer ist dieses Konzept zu verinnerlichen und anzuwenden.
Auch gerade weil dieser Beitrag noch nicht alles abbildet was möglich ist.
Ausprobieren ist angesagt!

Hinterlasse gerne einen Kommentar auf der Seite oder wende dich bei Fragen an mich.

Post a Comment