Add support for matiomo js paq.push() #2012

Implement automatic event tracking for common user interactions (e.g. buttons, links, CTAs) using Matomo’s JavaScript tracking API—without requiring any manual input from content authors.

The matomo script is for now, implemented manually from the script section. We may add a dedicated options page, where this function may be controlled instead. Fields for entering a matomo id etc.

Scope

• Add automatic tracking to:

  • <button> elements
  • <a> elements styled as buttons (e.g. .btn, .c-button)
  • Other CTA components in the design system

• Tracking should:

  • Be applied globally (frontend)
  • Require zero author configuration
  • Be extensible for future components

Implementation Requirements

1. Event Binding Strategy

   • Use delegated event listeners (e.g. document.addEventListener('click', ...))
   • Avoid per-component JS initialization
   • Ensure compatibility with dynamically injected DOM (AJAX, React, etc.)

2. Matomo Tracking Integration

   • Use _paq.push(['trackEvent', category, action, name, value])
   • Follow Matomo’s event tracking model:
     • Category: UI Interaction
     • Action: Click
     • Name: Derived from:
       • aria-label, title, or
       • innerText fallback
     • Value: Optional (omit unless meaningful)

3. Automatic Attribute Injection (Optional Enhancement)

   • On DOM ready, normalize elements by adding:
     • data-matomo-category
     • data-matomo-action
     • data-matomo-name
   • These should be overridable if explicitly set

4. Component-Level Support

   • Integrate into base components in the design system:
     • Button component
     • Link component
   • Ensure consistency across server-rendered and JS-rendered elements

5. Accessibility Considerations

   • Ensure labels derived for tracking do not conflict with accessibility
   • Prefer aria-label over visual text when available