Use Variables in Custom JavaScript Variable

Tag Manager
1

I want to use other variable information in the custom JavaScript Variable. I use the syntax like {{Variable Name}}, but this error is thrown.

SyntaxError: expected property name, got '{'

In the Container i see the plain variable markup:

Templates['CustomJsFunctionVariable32002477'] = (function () { return function (parameters, TagManager) { this.get = function() {
  var pt_pagetype = "default";
  var pageURL = {{Page URL}};

How can i access the variable in an other variable.

Greetings

1 Like
2

Hi,
instead of referencing the inbuilt variables you can create a JS like following example.

function () { 
var myPagePath = undefined;
myPagePath = window.location.pathname+window.location.search;
return myPagePath;
}

Because unfortunately custom-JavaScript variables do not support the inbuilt variables.

3

Hi Tom,
at the moment it isnā€™t yet possible to do this, but it is listed in our backlog at: https://github.com/matomo-org/tag-manager/issues/212
but unfortunately as we have not scheduled it yet, we cannot give a date when it will be implemented.

@Trackingninja solution might work as well, have you tried it maybe?

4

The solution would work but of course it depends on the use case.

5

Hi all,
I hit this topic googling matomo javascipt variable function, indeed I encountered the same issue.
As there is a generic solution for the issue described in the link provided by @matthieu, I share it there:

function () {
  // Below you must provide your own datalayer property as defined in your container
  // OR one of the Matomo defined property as displayed in this example
  var propertyName = 'mtm.clickElement'
  if (window.MatomoTagManager.dataLayer.get(propertyName)) {
      return window.MatomoTagManager.dataLayer.get(propertyName);
  } else { 
      return 'foo';
  }
}
6

You can simply use the TagManager object, e.g.

function () {
  if (TagManager.dataLayer.get('mtm.clickElement') && TagManager.dataLayer.get('mtm.clickElement').getAttribute('data-name')) {
      return TagManager.dataLayer.get('mtm.clickElement').getAttribute('data-name');
  } else { 
      return "";
  }
}

Will store the value of the attribute ā€œdata-nameā€ of the clicked element.

7

An addition to that:
I think itā€™s a little bit more complicated.

Some properties are only available in the datalayer when some triggers listen to them (f.e. clicks or scrolls) and fill the datalayer with them.
But not all pre-configured variables are written in the datalayer.

In my case I want to work with the preconfigured variable {{PreviewMode}}.
I get this with this code, so I think:

var debugMode=window.MatomoTagManager.debug.enabled;
//debugMode= true|false;
8

Hey! Some of the pre-configured variables can be accessed through the Tag Manager Javascript API like the Environment:

parameters.container.environment;

See more in the Matomo API Reference.

9

Hi,

Using the TagManager object mostly does wonders, but what is the syntax if i want to use it for a DataLayer variable instead of the ā€˜mtm.clickElementā€™ variable ?

10

Now you can use custom JavaScript variables.

2 Likes