# Avoid Javascript errors when using a clickElement custom JS variable

**URL:** <https://community.piwik.pro/t/avoid-javascript-errors-when-using-a-clickelement-custom-js-variable/400>\
**Category:** Data collection and tags\
**Created:** [December 23, 2021, 2:17pm UTC](https://community.piwik.pro/t/avoid-javascript-errors-when-using-a-clickelement-custom-js-variable/400 "2021-12-23T14:17:00Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![SW\_Vincent](https://avatars.discourse-cdn.com/v4/letter/s/e79b87/32.png) [@SW\_Vincent](https://community.piwik.pro/u/SW_Vincent)\
**Post date:** [December 23, 2021, 2:17pm UTC](https://community.piwik.pro/t/avoid-javascript-errors-when-using-a-clickelement-custom-js-variable/400/1 "2021-12-23T14:17:00Z")

</div>

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](https://community.piwik.pro/t/target-click-text-of-buttons/318). 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 !

---

<div class="post-metadata">

**Author:** ![rmastop](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/rmastop/32/29_2.png) [@rmastop](https://community.piwik.pro/u/rmastop)\
**Post date:** [January 6, 2022, 3:00pm UTC](https://community.piwik.pro/t/avoid-javascript-errors-when-using-a-clickelement-custom-js-variable/400/2 "2022-01-06T15:00:18Z")

</div>

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:

```auto
<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](https://developers.piwik.pro/en/latest/data_collection/web/javascript_tracking_client/api.html#custom-events)

```auto
<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.

---

<div class="post-metadata">

**Author:** ![SW\_Vincent](https://avatars.discourse-cdn.com/v4/letter/s/e79b87/32.png) [@SW\_Vincent](https://community.piwik.pro/u/SW_Vincent)\
**Post date:** [February 22, 2022, 1:16pm UTC](https://community.piwik.pro/t/avoid-javascript-errors-when-using-a-clickelement-custom-js-variable/400/4 "2022-02-22T13:16:28Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![rmastop](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/rmastop/32/29_2.png) [@rmastop](https://community.piwik.pro/u/rmastop)\
**Post date:** [February 22, 2022, 1:46pm UTC](https://community.piwik.pro/t/avoid-javascript-errors-when-using-a-clickelement-custom-js-variable/400/5 "2022-02-22T13:46:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![SW\_Vincent](https://avatars.discourse-cdn.com/v4/letter/s/e79b87/32.png) [@SW\_Vincent](https://community.piwik.pro/u/SW_Vincent)\
**Post date:** [February 22, 2022, 2:43pm UTC](https://community.piwik.pro/t/avoid-javascript-errors-when-using-a-clickelement-custom-js-variable/400/6 "2022-02-22T14:43:47Z")

</div>

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.