Collecte d'Analytics (Umami)

TVCast Display utilise Umami pour la collecte de données analytiques anonymisées. Ce système permet de mesurer l'engagement des utilisateurs sur les différents contenus et services proposés sur la télévision.

Architecture

L'intégration est centralisée dans le composant Svelte UmamiTracker.svelte, situé dans src/lib/components/analytics/. Ce composant est injecté dans le layout global (src/routes/+layout.svelte) et s'active uniquement si les variables d'environnement nécessaires sont présentes.

Variables d'Environnement

• PUBLIC_UMAMI_WEBSITE_ID : L'ID unique du site dans l'instance Umami.
• PUBLIC_UMAMI_SCRIPT_URL : L'URL vers le script script.js de l'instance Umami.

Suivi des Pages (Pageviews)

Le suivi des pages est déclenché automatiquement après chaque navigation client (afterNavigate).

Personnalisation du Hostname

Pour faciliter le filtrage par établissement dans le tableau de bord Umami, le hostname est dynamiquement réécrit sous la forme : facility-{facilityId}.display.tvcast.fr

Cas particulier : /contentfull

La page /contentfull affiche différents contenus en fonction d'un paramètre de requête ?id=.... Pour éviter que toutes les vues de contenu ne soient agrégées sous une seule ligne dans Umami, le tracker réécrit l'URL de la vue de page :

• URL réelle : /contentfull?id=123
• URL envoyée à Umami : /contentfull/123

Cela permet une lecture claire et structurée des performances par fiche de contenu dans l'onglet "Pages".

Événements Personnalisés (Custom Events)

En plus du suivi de page, des événements spécifiques sont déclenchés pour une analyse plus fine.

Vue ContentFull

Déclenché automatiquement lors de l'accès à une fiche de contenu.

• Nom de l'événement : Vue ContentFull
• Données associées :
  • content_id : L'ID de la fiche consultée.
  • facilityId : L'ID de l'établissement.

Comment ajouter un nouveau suivi ?

Utilisation via l'objet global window.umami

Vous pouvez appeler directement Umami n'importe où dans le code client :

if (window.umami) {
  window.umami.track('Nom de l'événement', { donnee: 'valeur' });
}

Utilisation via l'action Svelte trackUmami

Une action Svelte est disponible dans src/lib/actions/trackUmami.ts pour tracker des clics sur des éléments DOM :

<script>
  import { trackUmami } from '$lib/actions/trackUmami';
</script>

<button use:trackUmami={{ eventName: 'Click Bouton Reservé', eventData: { id: 456 } }}>
  Réserver
</button>

Conformité et Vie Privée

• Les données sont collectées de manière anonyme.
• Aucune donnée personnelle (PII) n'est envoyée à Umami.
• Le système est conforme aux exigences de purge automatique lors du check-out.