Go Back

Track which UI elements are used by visitors

July 4, 2018

We all know how important for the constant website development is having information about which UI elements are used by our Visitors – which ones of them are actually being clicked. Here we will take care of all of those that have a click-id.

Let’s see how to implement such a solution:

1. Establish the elements that interact with what you want to track – those, for example, can be some menu items.

2. If either element ID or an element class contains the information allowing you to identify specific item – then you can use that by simply pointing it in the Custom Event:

3. If the elements do not contain information allowing to identify them uniquely in either ID, class or URL, you can create Tag Manager tag that will use {{Click ID}} or {{Click Class}} to pull some other information from an element and put it in the dataLayer Variable:

This example is using jQuery, hence association through $(#…

<script>
var clicked_button = $("#"+{{ Click ID }});
var product_id = clicked_button.attr("data-product_id");
window.dataLayer.push({clicked_button_label: product_id});
</script>

In this example, we are using “data-product-id” attribute of the clicked element, but this can be its label, label of the parent element (especially common when HTML of tracked elements is complex).

Next, you just need to configure TM variable that you will be able to use wherever you like: