It’s not very common but you may stumble upon a case where you need to record the value of an onclick event handler.

Usually you have a JavaScript function and the “onClick” event handler executes a piece of JS when an element is clicked on. It can be added to elements like <a> tags, form buttons, check boxes, <div> tags, etc. Here’s an actual example:

<script>
function inform(){
alert("You have activated me by clicking the grey button! Note that the event handler is added within the event that it handles, in this case, the form button event tag")
}
</script>

<form>
<input id="click-me-button" type="button" name="test" value="Click me" onclick="inform()">
</form>

On this test page we have a button that will show an alert when clicked. And we want to record an event with some category that we define and the onclick value as action (it will dynamically change if you have different onclick event handlers).

Let’s build our variable first:

function() {
var field = {{Click Element}}.getAttribute('onclick');
return field;
}

It will get the onclick value of the element you’re clicking.

Now let’s enter Preview & Debug mode and see if it does what we need – click on the button and explore the variables list:

Looks good! Now we can build a simple event tag in GTM, firing on the click of this button:

Publish the workspace and start gathering data:

So, that’s it! What kind of onclick event handlers do you need to track?

Margarita Evtimova

Margarita Evtimova is a Google Analytics fan, who also loves SEO, conversion optimization, online marketing and social media. You can follow her on Twitter and LinkedIn.