Retrieve Matomo Data Layer via the browser console

No activity yet

Share Retrieve Matomo Data Layer via the browser console

Subscribe to Untitled

<100 subscribers

Subscribe to Untitled

<100 subscribers

The data layer is the central unit to define basic data of a website and make it available for tracking. Whoever for the first time uses the Data Layer of the Matomo Tag Manager via the console, but otherwise only with the Google Tag Manager is familiar, the desired result will most likely not be displayed. Unlike the Google Tag Manager, the Matomo Tag Manager cannot be accessed by typing the assigned variable name in the developer console.

With the Google Tag Manager applies: In the developer tools of Chrome or the web console of Firefox you can do this by entering the variable name *dataLayer *, relatively quickly and easily. But that doesn’t work with the Matomo Tag Manager, you don’t get any output. This is something unknown to many who are used to working with Google’s Tag Manager. Also, newcomers often do not have this information yet. The following article should serve as an aid to show how to retrieve the Matomo Data Layer via the browser console.

How is it with the Google Tag Manager?

But first a short excursion into the world of Google. The standard data layer of the Google Tag Manager can be retrieved and viewed via the browser console by entering “dataLayer”. First the data layer must be available. This can be created as follows as an example.

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

In the console of the browser you now simply have to enter ***dataLayer ***and the output is the current data layer.

Example:

How is it with the day manager of Matomo?

With Matomo it’s a little different. First of all, the standard data layer has a different variable name. This also makes sense, because theoretically you could run two different tag managers in parallel. In addition, after entering the variable in the browser console, the desired object is not displayed as hoped. This is the crucial difference that can cause problems at the beginning!

Call up Matomo Data Layer in the console!

By means of an example we will now go through the necessary procedures step by step to retrieve the data layer of the Matomo Tag Manager. The basic requirement is that the Matomo Tag Manager has been correctly integrated on the site. First we create a data layer and add the elements pageTitle and pageCategory via a push.

Usually Matomo uses **var _mtm = _mtm []; **.This has already created an empty data layer. In the next step you can add the desired items. Finally the Tag Manager is injected into the page.

<script>
    var _mtm = _mtm [];
    _mtm.push({
      'pageTitle': 'Check Matomo Data Layer - How to do it!',
      '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.>

If we now want to retrieve the variable _mtm, we can do this by entering *_mtm *in the browser console.

The following output is then obtained:

{push: ƒ}

or when you open the object

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

The problem here is that the existing elements and values are not displayed. After the Matomo Data Layer was already created for the website you can now call it up with the following option.

The following must be entered in the browser console!

With the input

MatomoTagManager.dataLayer

in the browser console you get this output.

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)

Now you have listed the data layer with all its existing values.

What can be seen from this example?

First the variables pageCategory and pageTitle were pushed into the Data Layer Object before the Matomo Tag Manager was initialized.
In the next line there is a timestamp with the value 1587136004333 (Berlin 4/17/2020, 5:06:44 PM).event: “mtm.PageView” indicates that the browser is starting to load the page. This event is always used when you need data as quickly as possible.
The last line is again a timestamp. 4/17/2020, 5:06:45 PM

What happens if you add another value to the Data Layer Object?

If one would now enter the following into the browser console

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

then the array of the object would increase by one.

t {values: {...}, events: Array(5), callbacks: Array(1), reset: ƒ, push: ƒ, ...}
values: {pageCategory: "Blog", pageTitle: "Check Matomo Data Layer - How it works", mtm.startTime: 1587136004333, event: "mtm.PageView", mtm.mtmScriptLoadedTime: 1587136004958, weather: "sunny"}
events: Array(6)
0: {pageCategory: "Blog"}
1: {pageTitle: "Check Matomo Data Layer - How it works!"}
2: {mtm.startTime: 1587136004333, event: "mtm.Start"}
3: {mtm.mtmScriptLoadedTime: 1587136004958}
4: {event: "mtm.PageView"}
5: {weather: "sunny"}
length: 6
__proto__: Array(0)

As you can see the application of the Matomo Tag Manager and the data layer it contains is basically the same as it is already known from Google for many people.But to be able to call up the Matomo Data Layer via the browser console to view the contained elements, you have to know that

MatomoTagManager.dataLayer

is to be used. The use of the Matomo Data Layer enables the integration of custom events, CRM data or e-commerce.

I’d be happy to hear your opinion. Feel free to leave a comment or GET IN TOUCH.