Avoid Javascript errors when using a clickElement custom JS variable

Data collection and tags
#1

Hi,

I’m actualy trying to make a similar tracking of my old website under Piwik Pro, previously under Google Analytics (through the google tag manager).

It appears i quite struggle with custom variables, so i’d like to use mostly Custom Javascript Variables.

For exemple, if i want to get the offsetParent class of the clicked Element,

With GTM, i’d use :

function(){
return {{Click Element}}.offsetParent.attributes.class.value;
}

With Matomo Tag Manager, i’d use :

function () {
if (TagManager.dataLayer.get(‘mtm.clickElement’)) {
return TagManager.dataLayer.get(‘mtm.clickElement’).offsetParent.attributes.class.value;
}
else {
return ‘foo’;
}
}

What should i do to get a similar result with Piwik Pro ?

Edit

I tried to adapt what i saw on Target “Click text” of buttons. The variable now returns the correct value.

Here is an exemple of how my current custom JS variable looks like :

function() {
e = window.event;
if (e && e.target && e.target.tagName !== “BODY”){
return e.target.offsetParent.attributes.class.value;
};
}

Yet when i use tagbird to check how things are working i see a Javascript error “Failed to evaluate variable - myVariableName”. Is it normal ? Won’t it have any impact on my tags or website ? Can i prevent it ?

Thanks for your answers !

#2

Hi @SW_Vincent
Depending on the exact outcome, you could do something like this:

Create a trigger, having the correct Event conditions.

When the event triggers, you can call a tag of type Custom asynchronous tag, having something like this:

<script type="text/javascript">
  console.log({{ Click Element }}.offsetParent.attributes.class.value);
</script>

I usually use these custom HTML tags to create a tracker function like custom events as seen in
Developers portal | Custom event tracking

<script type="text/javascript">
  var _paq=_paq || [];
try {
  _paq.push(["trackEvent", "Item Clicked", {{ Click Element }}.offsetParent.attributes.class.value]);
  } catch (error) {
  // do some errorhandling, in case there is no offsetParent.attributes.class.value 
}

</script>

You can’t use tagmanager variables in a TM “Custom JS” variable, but using it this way the browser doesn’t have to re-calculate the values for all non-required variables.

#4

Hi @rmastop
After few tests, it looks like the following custom js variable would work :

function () {
if (dataLayer.findLast(element=>element.event==‘stg.click’)) {
return dataLayer.findLast(element=>element.event==‘stg.click’).element.offsetParent.attributes.class?.value;
}
else {
return ‘foo’;
}
}

Is it bad practice ? Sorry for being that stubborn, but i’d really enjoy your opinion about this :slight_smile:

#5

Hi @SW_Vincent,
I’m not sure why you want this class value as a variable value, could you describe the use-case?

#6

Hi @rmastop ,

In this case i’d like to use it as an event action : there are several share buttons on my website and the offsetParent class matches the related social network name.
Thanks to that, with one tag i can differenciate all of them.