How to use the Clicked HTML Attribute variable

In Matomo Tag Manager, the Clicked HTML Attribute variable allows you to capture the value of a standard HTML attribute (e.g., id, class, href, alt, title ) from an element that users click on. This is useful for dynamically tracking interactions without hardcoding values or creating custom scripts for each interaction.

This guide explains how to track clicks on images and capture the image’s alt text.

Configure the Clicked HTML Attribute variable

1. In Tag Manager, navigate to Variables and click Create New Variable.
2. Select the Clicked HTML Attribute Variable and provide a descriptive name.
3. In the Clicked HTML Attribute Name field, specify the attribute name you want to capture. Using the example, enter alt.
4. Save the new variable. It can now be used to fire a trigger and execute a tag.

Set up a Click Trigger

1. Navigate to Triggers and click Create New Trigger.
2. Select the All Elements Click Trigger and provide a descriptive name.
3. Add a condition to fire the trigger only when elements with the alt attribute are clicked.
4. Choose the Click HTML Attribute created previously and specify the condition matches the regular expression ^(?!\s*$)[^x].+
   
5. Save the new trigger.

Set up the Matomo Analytics Tag

1. Navigate to Tags and click Create New Tag.
2. Select the Matomo Analytics Tag and provide a descriptive name.
3. Choose the Event Tracking Type and (using the example above), define the event as you want it to appear in your reports:
   Event Category: Images
   Event Action: Clicked
   Event Name: select the variable created previously {{Clicked HTML Attribute - alt}}.
   
4. Link the All Elements Click Trigger.
5. Save the new tag.
6. Use Preview and Debug mode to test your setup before publishing.
7. Once successfully configured, run a test event and check it is recorded in the Matomo Real-time report.