Click Element Variable

On interactive events the context is key. Meaning that the pure information that a click appeared is often not the full story. You will also want to know what was the elements properties, such as a data attribute or inner text value.

Here is a quick reference on how to access those values as Frontend Variables within your Jentis Tag Manager account.

Click Trigger

The first step is always to have a click trigger active in your account. Make sure there is a trigger and tag first, so we can then focus on reading actual values from clicked elements. Here is a sample configuration:

Now that our click trigger is defined we can actually go ahead and access values from the element in mind.

Access Interaction-Elements Properties

The following applies to all kind of interactions: clicks, hover, etc.

You can access all elements values via JavaScript. The actual reference points to the arguments the Frontend Variable element receives. Here is a sample Frontend Variable code that reads the inner text value and returns it.

function(){
  if(arguments[0].element && arguments[0].element.innerText){
    return arguments[0].element.innerText;
  }
  return null;
}

Now you can extend this logic to access other element properties as needed.

A further example would be to access the elements HTML attribute, such as a data value.

function(){
  if(arguments[0].element && arguments[0].element.getAttribute("type")){
    return arguments[0].element.getAttribute("type");
  }
  return null;
}

Here is an example where we access an anchors href attribute:

function(){
  if(arguments[0].element && arguments[0].element.href){
    return arguments[0].element.href;
  }
  return null;
}