Add global Matomo _paq click tracking with backend-driven component targeting

[Copilot]

This change adds zero-config Matomo event tracking for common interactive UI elements on the frontend. Buttons and CTA-like components are tracked globally through the JavaScript _paq.push(['trackEvent', ...]) API, including dynamically injected DOM.

• What changed

  • Added a small frontend tracking module to the main municipio entrypoint.
  • Uses a single delegated document click listener instead of per-component initialization.
  • Moves tag assignment and targeting to the backend where possible through the existing ComponentLibrary/Component/Attribute filter.
  • Targets:
    • Native <button> elements
    • Component-library rendered links/buttons that receive backend-injected data-matomo-* attributes

• Tracking model

  • Emits Matomo events as:
    • Category: UI Interaction
    • Action: Click
    • Name: derived from data-matomo-name, then aria-label, title, then visible text
  • Keeps value omitted unless explicitly needed later.

• Attribute normalization

  • Backend injects default data-matomo-category and data-matomo-action on eligible rendered components.
  • Frontend normalizes data-matomo-name on matching elements and preserves explicitly provided data-matomo-* overrides.

• Design/system impact

  • Makes targeting more backend-driven for design system/component-library output.
  • Keeps delegated frontend tracking for native buttons and dynamically inserted DOM.
  • Uses closest(...) matching so nested label/content inside tracked elements resolves to the correct target.

• Implementation sketch

  add_filter('ComponentLibrary/Component/Attribute', function ($attributes) {
      if (!empty($attributes['href']) || !empty($attributes['type']) || ($attributes['role'] ?? null) === 'button') {
          $attributes['data-matomo-category'] = $attributes['data-matomo-category'] ?? 'UI Interaction';
          $attributes['data-matomo-action'] = $attributes['data-matomo-action'] ?? 'Click';
      }
  
      return $attributes;
  }, 20, 1);

  document.addEventListener("click", (event) => {
    const element = event.target.closest('button, [data-matomo-category]');
    if (!element || !window._paq) return;
  
    const name =
      element.dataset.matomoName ||
      element.getAttribute("aria-label") ||
      element.getAttribute("title") ||
      element.innerText ||
      element.textContent;
  
    window._paq.push(["trackEvent", "UI Interaction", "Click", name.trim()]);
  });

• Screenshot

  • Manual browser verification screenshot: https://github.com/user-attachments/assets/6ecd4ce2-d5fa-46b9-8d01-a95c264f3626

[sebastianthulin]

@copilot I want the tag assignment and targeting to be more backend driven. Utilize the components filters to insert these where we can instead.

[Copilot]

@copilot I want the tag assignment and targeting to be more backend driven. Utilize the components filters to insert these where we can instead.

Updated to move the targeting/tag assignment backend-side via ComponentLibrary/Component/Attribute, so component-rendered links/buttons now get the Matomo attributes server-side and the JS listener keys off those markers plus native buttons. Addressed in 65e5392 (follow-up c682509). Screenshot: https://github.com/user-attachments/assets/6ecd4ce2-d5fa-46b9-8d01-a95c264f3626

[sonarqubecloud]

Quality Gate passed

Issues
10 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud