Format CSS Class Selectors for Matomo Tracking
CSS selectors are used in multiple areas of Matomo, including Tag Manager, custom Event tracking, Content tracking, and Heatmaps & Session Recording. When referencing an element with a class attribute, it’s essential to format the selector correctly, especially when class names contain spaces.
In HTML, multiple class names are separated by spaces. However, in CSS selectors, spaces indicate a nested structure rather than multiple class names. To correctly target an element with multiple class values, replace spaces with dots (.) in your selector. For example:
- If an element has this class attribute:
<div class="this is my class">Track Me</div> - Correct CSS selector:
.this.is.my.class - Incorrect format:
.this is my class
Examples of correctly formatted CSS Selectors
The table below provides examples of common class attributes and their corresponding CSS selectors. To target multiple elements, separate their selectors with a comma.
Use the reference below to avoid formatting errors when setting up Triggers, Event tracking, or Heatmaps in Matomo.
| Class Attribute Value | Correct CSS Selector |
|---|---|
| button primary action | .button.primary.action |
| promo-banner large | .promo-banner.large |
| cta button-highlight | .cta.button-highlight |
| nav-item active current | .nav-item.active.current |
| sidebar menu-item selected | .sidebar.menu-item.selected |
| form-group input-text | .form-group.input-text |
| footer-links social-icons | .footer-links.social-icons |
| pricing-card featured | .pricing-card.featured |
| hero-section main-title | .hero-section.main-title |
| alert warning dismissible | .alert.warning.dismissible |
| alert alert-success alert-dismissible | .alert.alert-success.alert-dismissible |
| button-submit and button-cancel | .button-submit, .button-cancel |
How to find the CSS selector for an element on the page?
To find the CSS selector for any element, use your web browser’s developer tools.
1. For example, in Firefox, right-click the element and select Inspect.
2. In the Inspector panel, right-click the highlighted element, choose Copy > CSS Selector, and paste it where required.
Using the correct format ensures Matomo accurately tracks interactions in Triggers, custom Events, Content tracking and Heatmaps where CSS selectors are required.