How do I trigger a tag when any DOM element which matches a CSS selector is clicked?

A frequent use case is that we want to trigger a specific action when one element of the page is clicked. And often these elements may not have a specific ID or CSS class, and the only way to match these elements is by using their CSS selector.

In this FAQ we’ll show you how to use Matomo Tag Manager to trigger a tag when one element matching a CSS selector is clicked. We’ll use this technique with the use case of tracking custom events in Matomo when specific elements of the page are clicked, in our example tracking clicks on 1st level titles (h1).

Create the trigger

Fist, we create the trigger that listens to clicks and specifies the CSS selector:

  • In Matomo Tag Manager click on « Triggers » in the left menu.
  • Click « Create a new trigger ».
  • Select « All Elements Click (Triggered when any element is clicked) ».
  • In this example we’ll trigger on a click on all H1 title elements, so we name the trigger Clicked on H1.
  • Under « Only trigger when » select « Click element Matches the CSS selector ».
  • In the text field, enter the CSS selector that matches the element. In our example we’ll simply enter h1 so any click on a H1 element will trigger.

Note: there is also the option « not matches the CSS selector ».

How to find the CSS selector for a given element of the page?

You can easily find the CSS selector for any element in the page using your web browser. For example in Firefox, you can right-click on your element and select « Inspect element ». Then within the « Inspector » panel which shows the DOM tree, right-click on the element and click on « Copy > CSS selector ». Then you can paste the value in the « Click element Matches the CSS selector » field in Matomo Tag Manager.
​

Create the tag

Once you have created the Trigger, the next step is to create a Tag.

  • In Matomo Tag Manager click on « Tags » in the left menu.
  • Click « Create a new Tag ».
  • Select the tag you wish to create, for example « Custom HTML », « Matomo Analytics » or any other tag. In our example we’ll use « Matomo Analytics » since we want to track an event in Matomo Analytics whenever any H1 title element is clicked.
  • Give the tag a clear name. In our example we name it Track event when H1 title is clicked.
  • In our case we want to track a custom event. Under « Tracking Type » we select Event.
  • Next we configure the Event to track in Matomo: we set « Event Category » as Title and « Event Action » as clicked.
  • It is also possible to get the value of the clicked element (for example the text value). In our case we’ll want to track as the « Event Name » the actual text of the H1 title that was clicked, so we set « Event Name » to {{ClickText}}.
  • Click « Create new tag ».

Publish the tag

  • Once the tag is created, the next step is to publish the changes. Click on « Publish » in the left menu.
  • Name the version and click « Create new version and publish release ».

Now whenever a visitor will click on any H1 title in your page, an event will be tracked in Matomo. This is just an example which you can adapt to your own use cases by changing the CSS selector on which the click trigger will be activated.

Screenshot of the « Create a new Tag » page in our example: