Schreibe mir! hallo@trackingninja.de
Matomo Data Layer über die Browser Konsole abrufen_Blog_Header

Matomo Data Layer über die Browser Konsole abrufen

Der Data Layer ist die zentrale Einheit, um grundlegende Daten einer Webseite zu definieren und für das Tracking zur Verfügung zu stellen.
Wer zum ersten Mal den Data Layer des Matomo Tag Managers über die Konsole abrufen mag, aber sonst nur mit dem Google Tag Manager vertraut ist, wird höchstwahrscheinlich nicht das gewünschte Ergebnis angezeigt bekommen.
Anders als beim Google Tag Manager lässt sich dieser beim Matomo Tag Manager nicht durch Eintippen des vergebenen Variablennamens in der Entwicklerkonsole abrufen.

Beim Google Tag Manager gilt:
In den Entwicklertools von Chrome oder der Web-Konsole von Firefox kann man das, durch die Eingaben des Variablennamens dataLayer, relativ schnell und einfach machen.
Das klappt aber beim Matomo Tag Managers nicht, man erhält keine Ausgabe.
Dies ist für viele, die es gewohnt sind mit dem Tag Manager von Google zu arbeiten, etwas Unbekanntes. Auch haben Neueinsteiger oft noch nicht diese Info.
Der folgende Beitrag soll als Hilfestellung dienen, um zu  zeigen, wie man den Matomo Data Layer über die Browser Konsole abrufen kann.

Wie ist es beim Google Tag Manager?

Zuerst aber einen kurzen Abstecher in die Welt von Google.
Den standard Data Layer des Google Tag Managers kann man über die Browserkonsole mit der Eingabe “dataLayer” abrufen und einsehen.
Zuerst muss dazu der Data Layer vorhanden sein.
Diesen erstellt man beispielhaft wie folgt.

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ "pageTitle": document.title });
</script>

In der Konsole des Browser muss man nun einfach dataLayer eintippen und bekommt als Ausgabe den gerade aktuellen Data Layer.

Beispiel:

dataLayer - Google Tag Manager

Wie ist es beim Tag Manager von Matomo?

Bei Matomo ist es etwas anders.
Zuerst einmal hat der standard Data Layer einen anderen Variablennamen. Das macht auch Sinn, denn theoretisch könnte man ja auch zwei unterschiedliche Tag Manager parallel betreiben.
Außerdem wird nach Eingabe der Variable, in der Konsole des Browsers, das gewünschte Objekt nicht so ausgegeben wie erhofft.
Das ist der entscheidende Unterschied, der zu Beginn Probleme bereiten kann!

Matomo Data Layer in der Konsole abrufen!

An Hand eines Beispiels gehen wir nun, um den Data Layer des Matomo Tag Managers abzurufen, Schritt für Schritt die notwendigen Abläufe durch. Als Grundvoraussetzung gilt, dass der Matomo Tag Manager auf der Seite richtig eingebunden wurde.
Dazu erstellen wir erst einmal einen Data Layer und fügen über einen Push die Elemente pageTitle und pageCategory hinzu.

Für gewöhnlich verwendet man bei Matomo var _mtm = _mtm || [];.
Dadurch hat man schon einen leeren Data Layer kreiert.
Im nächsten Schritt kann man dann die gewünschten Items hinzufügen.
Zum Abschluss wird der Tag Manager dann in die Seite injiziert.

<script>
var _mtm = _mtm || [];
_mtm.push({
     'pageTitle':  'Matomo Data Layer prüfen - So geht es!',
    'pageCategory': 'Blog'
});
</script>
<!-- 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://{$MATOMO_URL}/js/container_{$CONTAINER}.js'; s.parentNode.insertBefore(g,s);
</script>
<!-- End Matomo Tag Manager -->

Wollen wir nun die Variable _mtm abrufen, können wir das mit der Eingabe von _mtm in der Browserkonsole.

Damit erhält man dann folgende Ausgabe:

{push: ƒ}

bzw. wenn man das Objekt öffnet 

_mtm
{push: ƒ}
push: ƒ ()
length: 0
name: "push"
arguments: null
caller: null
prototype: {constructor: ƒ}
__proto__: ƒ ()
[[FunctionLocation]]: container_ZAs9DTJS.js:39
[[Scopes]]: Scopes[3]
__proto__: Object


Das Problem hierbei ist, dass die bereits existierenden Elemente und Werte nicht angezeigt werden.
Nachdem der Matomo Data Layer aber ja schon für die Webseite erstellt wurde kann man diesen nun über die nachfolgende Möglichkeit abrufen.

Folgendes ist in der Browserkonsole einzugeben!

Mit der Eingabe

MatomoTagManager.dataLayer

in der der Browserkonsole erhält man diese Ausgabe.

MatomoTagManager.dataLayer
t {values: {…}, events: Array(5), callbacks: Array(1), reset: ƒ, push: ƒ, …}

-----

t {values: {…}, events: Array(5), callbacks: Array(1), reset: ƒ, push: ƒ, …}
values:
pageCategory: "Blog"
pageTitle: "Matomo Data Layer prüfen - So geht es!"
mtm.startTime: 1587136004333
event: "mtm.PageView"
mtm.mtmScriptLoadedTime: 1587136004958
__proto__: Object
events: (4) [{…}, {…}, {…}, {…}]
callbacks: [ƒ]
reset: ƒ ()
push: ƒ (H)
on: ƒ (i)

Nun hat man den Data Layer, mit all seinen vorhandenen Werten, aufgelistet.

Was kann man an diesem Beispiel herauslesen?

  • Zuerst wurden die Variablen pageCategory und pageTitle, vor der Initialisierung des Matomo Tag Managers, in das Data Layer Object gepusht.
  • In der nächsten Zeile folgt ein Timestamp mit dem Wert 1587136004333 (Berlin 4/17/2020, 5:06:44 PM) .
    event: “mtm.PageView” weist darauf hin, dass der Browser mit dem Laden der Seite beginnt. Dieser Event wird immer dann verwendet, wenn man Daten so schnell wie möglich benötigt.
  • Die letzte Zeile ist wiederum ein Timestamp. 4/17/2020, 5:06:45 PM

Was passiert, wenn man einen weiteren Wert in das Data Layer Object gibt?

Würde man nun folgendes in die Browser Konsole eingeben
 

_mtm.push({'weather': ‘sunny’});

 

dann würde sich das Array des Objekts um eins erhöhen.

t {values: {…}, events: Array(5), callbacks: Array(1), reset: ƒ, push: ƒ, …}
values: {pageCategory: "Blog", pageTitle: "Matomo Data Layer prüfen - So geht es!", mtm.startTime: 1587136004333, event: "mtm.PageView", mtm.mtmScriptLoadedTime: 1587136004958, weather: "sunny"}
events: Array(6)
0: {pageCategory: "Blog"}
1: {pageTitle: "Matomo Data Layer prüfen - So geht es!"}
2: {mtm.startTime: 1587136004333, event: "mtm.Start"}
3: {mtm.mtmScriptLoadedTime: 1587136004958}
4: {event: "mtm.PageView"}
5: {weather: "sunny"}
length: 6
__proto__: Array(0)


Wie man erkennen kann ist die Anwendung beim Matomo Tag Manager und dem darin vorhandenen Data Layer im Prinzip dieselbe wie es für viele bereits von Google bekannt ist.
Um aber den Matomo Data Layer über die Browser Konsole abrufen zu können, um die enthaltenen Elemente einzusehen, muss man wissen, dass hierfür

MatomoTagManager.dataLayer

zu verwenden ist.
Die Verwendung des Matomo Data Layer ermöglicht somit ebenso die Integrierung von Custom Events, CRM-Daten oder ECommerce.

Es würde mich freuen, wenn ich deine Meinung dazu hören würde.
Hinterlasse gerne einen Kommentar oder NIMM MIT MIR KONTAKT AUF.

Media-Engineer, Web Analytics & Vinyllover. Vater einer reizenden Tochter, fährt gerne Skateboard und praktiziert Yoga.

Post a Comment