Intégration Kameleoon

Mesurez le premier lancement audio du widget Ekoo avec un objectif personnalisé.

✅

Intégration recommandée

Utilisez l'événement Ekoo played-0 via data-ekoo-on-event. Il confirme le démarrage effectif de la lecture et ne dépend pas de la structure HTML interne du widget.

1. Créer l'objectif dans Kameleoon

  1. Ouvrez le projet concerné dans Kameleoon.
  2. Allez dans Paramètres > Objectifs, puis créez un objectif personnalisé, par exemple Ekoo – Lancement audio.
  3. Relevez l'identifiant numérique de l'objectif.
  4. Associez cet objectif aux expériences ou personnalisations concernées.

2. Déclencher la conversion depuis Ekoo

Placez ce code avant le script du widget et remplacez uniquement 123456 par l'identifiant de votre objectif Kameleoon.

Callback Ekoo vers Kameleoon
javascript
1(() => {
2  const KAMELEOON_GOAL_ID = 123456; // Replace with your custom goal ID
3
4  window.onEkooEvent = function (data) {
5    if (data.stats.type !== 'played-0') return;
6
7    if (!window.Kameleoon?.API?.Goals?.processConversion) {
8      console.warn('[Ekoo] Kameleoon API is unavailable');
9      return;
10    }
11
12    window.Kameleoon.API.Goals.processConversion(KAMELEOON_GOAL_ID);
13  };
14})();

Ajoutez ensuite cet attribut sur l'élément qui initialise le widget Ekoo :

1data-ekoo-on-event="onEkooEvent"

3. Vérifier l'intégration

Dans la console du navigateur, vérifiez que l'API de conversion Kameleoon est disponible :

1typeof window.Kameleoon?.API?.Goals?.processConversion
2// Expected result: "function"

Le résultat attendu est "function". Utilisez ensuite le mode Preview de Kameleoon, lancez une première lecture et contrôlez la conversion sur l'objectif.

Contournement temporaire sans callback Ekoo

Un suivi Kameleoon fondé uniquement sur un sélecteur CSS peut manquer les clics : le bouton Play se trouve dans le Shadow DOM du widget et interrompt la propagation de l'événement. Si vous ne pouvez pas encore ajouter data-ekoo-on-event, utilisez temporairement un listener en phase de capture :

Fallback temporaire par capture DOM
javascript
1(() => {
2  const KAMELEOON_GOAL_ID = 123456; // Replace with your custom goal ID
3
4  if (window.__ekooKameleoonTrackingInstalled) return;
5  window.__ekooKameleoonTrackingInstalled = true;
6
7  const trackedWidgets = new WeakSet();
8
9  function trackPlay(event) {
10    const path = event.composedPath?.() || [];
11    const isPlayButton = path.some((element) =>
12      element?.matches?.('.ekoo-widget-container-picture-button')
13    );
14
15    if (!isPlayButton) return;
16
17    const widget = path.find((element) => element?.tagName === 'EKOO-WIDGET');
18
19    if (!widget || widget.classList.contains('playing') || trackedWidgets.has(widget)) {
20      return;
21    }
22
23    if (!window.Kameleoon?.API?.Goals?.processConversion) {
24      console.warn('[Ekoo] Kameleoon API is unavailable');
25      return;
26    }
27
28    trackedWidgets.add(widget);
29    window.Kameleoon.API.Goals.processConversion(KAMELEOON_GOAL_ID);
30  }
31
32  document.addEventListener('pointerdown', trackPlay, true);
33  document.addEventListener('keydown', (event) => {
34    if (event.key === 'Enter' || event.key === ' ') trackPlay(event);
35  }, true);
36})();
⚠️

Limite du fallback

Cette méthode mesure l'intention de cliquer sur Play, pas la confirmation que l'audio a démarré. Elle doit être remplacée par le callback natif dès que possible.

Comportement attendu

  • Une conversion au premier lancement audio.
  • Aucune nouvelle conversion lors d'une pause ou d'une reprise.
  • Un nouveau widget peut déclencher sa propre conversion.

Pour envoyer également les événements à GTM ou GA4, consultez le guide DataLayer.

Kameleoon — Documentation — Ekoo