Track onclick event handler value with Google Tag Manager

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:

&lt;script&gt;
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")
}
&lt;/script&gt;

&lt;form&gt;
&lt;input id="click-me-button" type="button" name="test" value="Click me" onclick="inform()"&gt;
&lt;/form&gt;

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.

onclick variable

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

onclick GTM preview

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

tag settings

Publish the workspace and start gathering data:

real time results

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

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

2 thoughts on “Track onclick event handler value with Google Tag Manager

Leave a Reply

Your email address will not be published. Required fields are marked *