How to use the Clicked Data Attribute variable

In Matomo Tag Manager, the Clicked Data Attribute variable allows you to capture the value of a specific data attribute from an HTML element that users interact with on your website. It retrieves the value of a defined data-* attribute (a custom attribute in HTML) associated with the clicked element.

This guide explains how to track clicks on buttons with a custom data attribute.

For example, track clicks on buttons with the data attribute data-resources to indicate the type of resource (e.g., “budgeting-guide”, “retirement-planning-guide”).

<button data-resource="budgeting-guide" id="download-budgeting-guide">
<button data-resource="retirement-planning-guide" id="view-retirement-guide">

Configure the Clicked Data Attribute variable

  1. In Tag Manager, navigate to Variables and click Create New Variable.
  2. Select the Clicked Data Attribute Variable and provide a descriptive name.
  3. In the Clicked Data Attribute Name field, specify the attribute name you want to capture. Using the example above, enter resource as the attribute name (for attribute-suffix, only add the suffix: resource).
  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 data-resource attribute are clicked.
  4. Choose the Click Data Attribute created previously and specify the condition as matches the regular expression ^(?!\s*$).+
    matomo tag manager click data attribute variable
  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: Resources
    Event Action: Clicked
    Event Name: select the variable created previously {{Clicked Data Attribute - Resource}}.
    matomo tag manager clicked data attribute
  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].
Previous FAQ: How do I use variables within a Custom JavaScript variable?