Debugging analytics

Ce guide vous accompagne pas à pas pour diagnostiquer et résoudre les problèmes liés au suivi analytics du widget Ekoo. Que vous utilisiez Google Analytics 4, Google Tag Manager ou un autre outil, les techniques ci-dessous vous aideront à vérifier que les événements sont correctement émis et transmis.

Étape 1 : Vérifier que les événements se déclenchent

La première étape est de confirmer que le widget émet bien des événements. Ajoutez un console.log dans votre fonction de callback :

1<script>
2  function onEkooEvent(data) {
3    console.log('%c[Ekoo Event]', 'color: #7c3aed; font-weight: bold;', data.stats.type);
4    console.log('  Product:', data.productRef);
5    console.log('  Review:', data.audioId);
6    console.log('  Reached:', data.stats.reached || 'N/A');
7    console.log('  Full data:', data);
8  }
9</script>
10
11<script src="https://app.ekoo.co/widgets/widget-4.0.0-standalone.js"</script>
12
13<ekoo-widget
14  data-ekoo="YOUR_WEBSITE_ID"
15  data-ekoo-product-id="YOUR_PRODUCT_ID"
16  data-ekoo-on-event="onEkooEvent"
17></ekoo-widget>

Ouvrez la console du navigateur (F12 → onglet Console), puis interagissez avec le widget. Vous devriez voir les événements apparaître en violet :

• printed — Dès que le widget est visible.
• played-0 — Au clic sur le bouton play.
• played-25, played-50, played-75, played-100 — Au fur et à mesure de l'écoute.

Étape 2 : Inspecter le dataLayer

Si vous utilisez GTM, les événements doivent être poussés dans window.dataLayer. Vérifiez son contenu directement dans la console :

1// View the full dataLayer
2console.table(window.dataLayer);
3
4// Filter Ekoo events only
5const ekooEvents = (window.dataLayer || [])
6  .filter(entry => entry.event && entry.event.startsWith('ekoo_'));
7
8console.log('Ekoo events found:', ekooEvents.length);
9ekooEvents.forEach((evt, i) => {
10  console.log(`  [${i}] ${evt.event}`, evt);
11});

Résultat attendu : Vous devriez voir des entrées comme ekoo_printed, ekoo_played-0, etc.

1// Watch new pushes in real time
2const originalPush = window.dataLayer.push.bind(window.dataLayer);
3window.dataLayer.push = function(...args) {
4  args.forEach(arg => {
5    if (arg.event && arg.event.startsWith('ekoo_')) {
6      console.log('%c[dataLayer]', 'color: #059669; font-weight: bold;', arg.event, arg);
7    }
8  });
9  return originalPush(...args);
10};
11console.log('dataLayer monitoring enabled.');

Étape 3 : Mode Preview de GTM

Le mode Preview de GTM affiche en temps réel les tags, déclencheurs et variables :

• 1. Ouvrez tagmanager.google.com et sélectionnez votre conteneur.
• 2. Cliquez sur Prévisualiser en haut à droite. L'outil Tag Assistant s'ouvre.
• 3. Entrez l'URL de votre page produit et cliquez sur Connecter.
• 4. Votre page s'ouvre dans un nouvel onglet avec le panneau de debug GTM.
• 5. Interagissez avec le widget Ekoo (affichez-le, lancez un audio).
• 6. Dans le panneau GTM, consultez la Timeline : chaque événement apparaît comme une ligne.
• 7. Cliquez sur un événement ekoo_* pour voir :
  • Tags Fired — Quels tags se sont déclenchés.
  • Variables — Les valeurs des variables au moment de l'événement.
  • Data Layer — L'état du dataLayer à cet instant.

Étape 4 : GA4 DebugView

La DebugView de GA4 affiche les événements en temps réel pour les sessions de debug :

• 1. Installez l'extension Chrome Google Analytics Debugger depuis le Chrome Web Store.
• 2. Activez l'extension (l'icône devient colorée).
• 3. Dans GA4, allez dans Admin → DebugView (dans la colonne de gauche).
• 4. Naviguez sur votre page produit et interagissez avec le widget.
• 5. Les événements apparaissent en temps réel dans le flux vertical.
• 6. Cliquez sur un événement pour voir ses paramètres détaillés.

Vérifiez : que les noms d'événements correspondent à ce que vous attendez (ex. : ekoo_played_0 vs ekoo_played-0 — GA4 convertit les tirets en underscores).

Problèmes courants et solutions

Le nom de la fonction ne correspond pas

La valeur de data-ekoo-on-event doit être le nom exact d'une fonction déclarée globalement sur window :

1// Check in the console:
2typeof window.onEkooEvent
3// Should return "function"
4
5// If "undefined", the function is not globally accessible.
6// Possible causes:
7// - Declared inside a module (import/export)
8// - Declared inside an IIFE or a block {}
9// - Typo in the name

Fonction déclarée après le script Ekoo

Le script Ekoo avec defer s'exécute après le parsing du HTML mais avant DOMContentLoaded. Si votre fonction est dans un script chargé dynamiquement ou dans un module, elle peut ne pas être disponible à temps.

1<!-- ✅ Declare the function BEFORE the Ekoo script -->
2<script>
3  // Function immediately accessible on window
4  function onEkooEvent(data) {
5    window.dataLayer = window.dataLayer || [];
6    window.dataLayer.push({
7      event: 'ekoo_' + data.stats.type.replace('-', '_'),
8      ekoo: data
9    });
10  }
11</script>
12
13<!-- The Ekoo script will find onEkooEvent on window -->
14<script src="https://app.ekoo.co/widgets/widget-4.0.0-standalone.js"</script>

dataLayer non initialisé

Appeler window.dataLayer.push() avant que GTM ne l'ait initialisé provoque une erreur silencieuse :

1// Always initialize before using
2window.dataLayer = window.dataLayer || [];
3
4// Then push safely
5window.dataLayer.push({
6  event: 'ekoo_printed',
7  ekoo_product_id: 'my-product'
8});

Checklist de diagnostic

• ☐ Le script Ekoo est chargé (typeof window.ekooLoad === 'function').
• ☐ La fonction de callback existe sur window (typeof window.onEkooEvent === 'function').
• ☐ Le nom dans data-ekoo-on-event correspond exactement au nom de la fonction.
• ☐ La fonction est déclarée avant le script Ekoo dans le HTML.
• ☐ window.dataLayer est initialisé avant le premier push.
• ☐ Le widget s'affiche (sinon, pas d'événement printed).
• ☐ L'audio est lancé manuellement (pas d'autoplay → pas d'événement played-0).
• ☐ Le tag GTM a un déclencheur configuré sur l'événement personnalisé correspondant.
• ☐ GA4 DebugView est activé (extension Chrome) pour voir les événements en temps réel.