Intégration DataLayer

Poussez les événements Ekoo dans le dataLayer pour les exploiter dans GTM et GA4.

Qu'est-ce que le dataLayer ?

Le dataLayer est un tableau JavaScript standard que Google Tag Manager lit pour détecter et traiter des événements. Chaque appel à dataLayer.push() ajoute un objet dans ce tableau ; GTM intercepte automatiquement cet ajout et déclenche les balises associées.

C'est le mécanisme standard pour faire communiquer votre site avec GTM et, par extension, avec GA4 et tous vos outils de mesure.

Initialiser le dataLayer

Avant de pousser des événements, assurez-vous que le tableau existe. Cette ligne peut être placée n'importe où avant votre premier push() :

1window.dataLayer = window.dataLayer || [];

Pousser tous les événements

L'approche la plus simple : chaque événement Ekoo est envoyé dans le dataLayer. Vous filtrerez ensuite côté GTM si nécessaire.

1function onEkooEvent(data) {
2  window.dataLayer = window.dataLayer || [];
3  window.dataLayer.push({
4    event: 'ekoo_' + data.stats.type.replace('-', '_'),
5    ekoo_event_type: data.stats.type,
6    ekoo_widget_type: data.stats.widget,
7    ekoo_review_id: data.audioId,
8    ekoo_product_id: data.productRef,
9    ekoo_source: data.source,
10    ekoo_reached: data.stats.reached || null
11  });
12}

Pousser uniquement certains événements

Si vous souhaitez limiter le volume de données envoyées à GA4, filtrez directement dans votre callback. L'exemple ci-dessous ne pousse que played-0 (lancement) et played-100 (écoute complète) :

1function onEkooEvent(data) {
2  const tracked = ['played-0', 'played-100'];
3  if (!tracked.includes(data.stats.type)) return;
4
5  window.dataLayer = window.dataLayer || [];
6  window.dataLayer.push({
7    event: 'ekoo_' + data.stats.type.replace('-', '_'),
8    ekoo_event_type: data.stats.type,
9    ekoo_widget_type: data.stats.widget
10  });
11}

Structure de l'événement dans le dataLayer

Voici le détail de chaque propriété poussée dans le dataLayer :

Vérifier les événements dans la console

Ouvrez la console développeur de votre navigateur (F12) et exécutez la commande suivante pour afficher uniquement les événements Ekoo présents dans le dataLayer :

1console.table(window.dataLayer.filter(e => e.event?.startsWith('ekoo_')));

Vous devriez voir un tableau avec chaque événement poussé, ses propriétés et leurs valeurs. C'est le moyen le plus rapide de valider votre intégration avant de passer à GTM.

Conventions de nommage

Respectez ces trois règles pour garantir la compatibilité avec GA4 et la lisibilité de vos rapports :

1. Toujours préfixer avec ekoo_ pour distinguer les événements Ekoo de vos autres événements
2. Utiliser des underscores (_) et jamais de tirets — GA4 rejette les noms contenant des tirets
3. Nommer les propriétés de manière cohérente : ekoo_event_type, ekoo_widget_type, ekoo_review_id, ekoo_source