[Bug] Calling a custom js variable within a custom js variable within a custom js variable leads to an error

[SW-Vincent]

Matomo Tag Manager recently added a feature to import variables within custom JS variables.

This feature is great overall : you can call a custom JS variable within a custom JS variable and while Matomo UI code will look like this :

function () { 
  var clickHostName = {{JS - Click hostname}};
  var targetHostName =  "dummy.example.com"
  if(targetHostName === targetHostName )){
    return true;
  }
  return false;
}

the code that is actually set by Matomo Tag Manager looks like this :

Templates['CustomJsFunctionVariable5630bd1c'] = (function () { return function (parameters, TagManager) { this.get = function () { 
  var clickHostName = TagManager._buildVariable({"name":"JS - Click hostname","type":"CustomJsFunction","lookUpTable":[],"defaultValue":"","parameters":{"jsFunction":"HERE-IS-A-STRING-FORMATTED-VERSION-OF-THE-FUNCTION"},"Variable":"CustomJsFunctionVariable4d0ada15"}, parameters.get('container')).get();
  var targetHostNames = "dummy.example.com" ;
  if(reservationsHostNames.includes(clickHostName)){
    return true;
  }
  return false;
}; } })(); 

Now we're getting to the bug : you noticed that the clickHostName variable is calling the customJSFunction as an object, with TagManager._buildVariable.parameters.jFunction being a string. If within this string there is an other custom JS function call, the " characters within the function reference will escape the string, leading to an error "Unexpected identifier 'name'"