{"id":1743,"date":"2020-04-17T21:36:18","date_gmt":"2020-04-17T19:36:18","guid":{"rendered":"https:\/\/www.trackingninja.de\/retrieve-matomo-data-layer-via-the-browser-console\/"},"modified":"2021-07-18T23:33:47","modified_gmt":"2021-07-18T21:33:47","slug":"retrieve-matomo-data-layer-via-the-browser-console","status":"publish","type":"post","link":"https:\/\/www.trackingninja.de\/en\/retrieve-matomo-data-layer-via-the-browser-console\/","title":{"rendered":"Retrieve Matomo Data Layer via the browser console"},"content":{"rendered":"\r\n

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<\/strong> <\/a> via the console, but otherwise only with the Google Tag Manager<\/strong> <\/a> 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<\/strong> <\/em>, 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.<\/p>\r\n\r\n\r\n\r\n

\u00a0<\/div>\r\n\r\n\r\n\r\n

How is it with the Google Tag Manager?<\/h3>\r\n\r\n\r\n\r\n

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.<\/p>\r\n

 <\/p>\r\n

<script>\r\n    window.dataLayer = window.dataLayer [];\r\n    window.dataLayer.push({ \"pageTitle\": document.title });\r\n<\/script><\/pre>\r\n
 <\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
In the console of the browser you now simply have to enter  dataLayer <\/strong> <\/em> and the output is the current data layer.<\/p>\r\n\r\n\r\n\r\n
Example:<\/h4>\r\n\r\n\r\n\r\n
\"dataLayer<\/a><\/figure>\r\n\r\n\r\n\r\n\r\n\r\n
\u00a0<\/div>\r\n\r\n\r\n\r\n
How is it with the day manager of Matomo?<\/h3>\r\n\r\n\r\n\r\n
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!<\/p>\r\n\r\n\r\n\r\n
\u00a0<\/div>\r\n\r\n\r\n\r\n
Call up Matomo Data Layer in the console!<\/h3>\r\n\r\n\r\n\r\n
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 [];<\/em> <\/strong>.
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.<\/p>\r\n\r\n\r\n\r\n
\u00a0<\/div>\r\n\r\n\r\n\r\n
<script>\r\n    var _mtm = _mtm [];\r\n    _mtm.push({\r\n      'pageTitle': 'Check Matomo Data Layer - How to do it!',\r\n      'pageCategory': 'Blog'\r\n    });\r\n<\/script><\/pre>\r\n\r\n\r\n\r\n
<Matomo Tag Manager.>\r\n<script type=\"text\/javascript\">\r\n var _mtm = _mtm [];\r\n  _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'})\r\n  var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];\r\n  g.type='text\/javascript'; g.async=true; g.defer=true; g.src='https:\/\/{$MATOMO_URL}\/js\/container_{$CONTAINER}.js'; s.parentNode.insertBefore(g,s);\r\n<\/script>\r\n<End Matomo Tag Manager.><\/pre>\r\n\r\n\r\n\r\n
\u00a0<\/div>\r\n\r\n\r\n\r\n
If we now want to retrieve the variable _mtm, we can do this by entering  _mtm<\/strong> <\/em> in the browser console.

The following output is then obtained:<\/p>\r\n\r\n\r\n\r\n
{push: \u0192}<\/pre>\r\n\r\n\r\n\r\n
\r\n
<\/figure>\r\n<\/figure>\r\n\r\n\r\n\r\n
or when you open the object<\/p>\r\n\r\n\r\n\r\n
_mtm\r\n{push: \u0192}\r\npush: \u0192 ()\r\nlength: 0\r\nname: \"push\"\r\narguments: null\r\ncaller: null\r\nprototype: {constructor: \u0192}\r\n__proto__: \u0192 ()\r\n[[FunctionLocation]]: container_ZAs9DTJS.js:39\r\n[[Scopes]]: Scopes[3]\r\n__proto__: Object\r\n<\/pre>\r\n\r\n\r\n\r\n
\r\n
<\/figure>\r\n<\/figure>\r\n\r\n\r\n\r\n

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.<\/p>\r\n\r\n\r\n\r\n
\u00a0<\/div>\r\n\r\n\r\n\r\n
The following must be entered in the browser console!<\/h4>\r\n\r\n\r\n\r\n
With the input<\/p>\r\n\r\n\r\n\r\n
MatomoTagManager.dataLayer<\/pre>\r\n\r\n\r\n\r\n
in the browser console you get this output.


<\/p>\r\n\r\n\r\n\r\n
MatomoTagManager.dataLayer\r\nt {values: {\u2026}, events: Array(5), callbacks: Array(1), reset: \u0192, push: \u0192, \u2026}\r\n\r\n-----\r\n\r\nt {values: {\u2026}, events: Array(5), callbacks: Array(1), reset: \u0192, push: \u0192, \u2026}\r\nvalues:\r\npageCategory: \"Blog\"\r\npageTitle: \"Matomo Data Layer pr\u00fcfen - So geht es!\"\r\nmtm.startTime: 1587136004333\r\nevent: \"mtm.PageView\"\r\nmtm.mtmScriptLoadedTime: 1587136004958\r\n__proto__: Object\r\nevents: (4) [{\u2026}, {\u2026}, {\u2026}, {\u2026}]\r\ncallbacks: [\u0192]\r\nreset: \u0192 ()\r\npush: \u0192 (H)\r\non: \u0192 (i)\r\n<\/pre>\r\n\r\n\r\n\r\n
Now you have listed the data layer with all its existing values.<\/p>\r\n\r\n\r\n\r\n
\u00a0<\/div>\r\n\r\n\r\n\r\n
What can be seen from this example?<\/h3>\r\n\r\n\r\n\r\n