[Feature] Add a Trk component for easier analytics tagging

[titouanmathis]

Summary

A generic, declarative component to standardize analytics tracking in @studiometa/ui projects. Compatible with GTM/dataLayer, GA4, Segment, and custom backends.

API

Basic Usage (data-on:* syntax)

 <!-- Click tracking -->
 <button
   data-component="Trk"
   data-on:click='{"event": "cta_click", "location": "header"}'>
   Subscribe
 </button>

 <!-- Page load data (ecommerce, user info) -->
 <div
   data-component="Trk"
   data-on:mounted='{"event": "view_item_list", "ecommerce": {"items": [...]}}'
   hidden>
 </div>

 <!-- Impression tracking (IntersectionObserver) -->
 <div
   data-component="Trk"
   data-on:view.once='{"event": "product_impression", "id": "123"}'>
   Product Card
 </div>

Event Modifiers (same as Action)

Modifier	Effect
.prevent	event.preventDefault()
.stop	event.stopPropagation()
.once	Track only once
.passive	Passive event listener
.capture	Capture phase
.debounce / .debounce500	Debounce (default 300ms)
.throttle / .throttle200	Throttle (default 16ms)

Hierarchical Context

 <section
   data-component="TrkContext"
   data-option-data='{"page_type": "product", "product_id": "123"}'>

   <button
     data-component="Trk"
     data-on:click='{"action": "add_to_cart"}'>
     Add to Cart
   </button>
   <!-- Dispatches: { page_type: "product", product_id: "123", action: "add_to_cart" } -->
 </section>

Custom Events

Works with any Custom Event emitted by other scripts:

 <!-- Listen to custom event -->
 <third-party-form
   data-component="Trk"
   data-on:form-submitted.detail='{"event": "form_submitted"}'>
 </third-party-form>
 <!-- Merges event.detail into tracking data -->

 <!-- Or pick specific fields with $detail.* syntax -->
 <third-party-form
   data-component="Trk"
   data-on:form-submitted='{"event": "form_submitted", "email": "$detail.email"}'>
 </third-party-form>

Custom Dispatcher

 import { setTrkDispatcher } from '@studiometa/ui';

 // Default is window.dataLayer.push (GTM)
 setTrkDispatcher((data, event) => {
   gtag('event', data.event, data);
 });

Supported Events

• DOM events: click, submit, change, input, focus, blur, scroll, etc.
• Special events:
  • mounted - Dispatch on component mount (page load data)
  • view - IntersectionObserver-based impression tracking

Consent (GDPR)

Handled at GTM/Axeptio level. Trk just pushes to dataLayer[]. GTM fires tags based on consent triggers.

Benefits

1. No custom JS required - Fully declarative in HTML/Twig
2. No inline scripts - mounted event replaces <script> blocks
3. Consistent API - One component for all tracking
4. Built-in modifiers - .once, .debounce, .throttle

---

Sources

notes.md
task_plan.md

[antoine4livre]

@titouanmathis It would be the only component with an abbreviation as component name. Why not call it Track or Layer or DataLayer ?