Intégration GA4 et Google Tag Manager

Guide complet pour mesurer l'impact de l'écoute audio sur votre taux de conversion.

Objectif

À la fin de ce guide, vous disposerez d'un pipeline de mesure complet : les événements du widget Ekoo sont captés par votre callback, poussés dans le dataLayer, interceptés par GTM, puis envoyés à GA4. Vous pourrez alors comparer le taux de conversion des visiteurs qui ont écouté un audio avec ceux qui ne l'ont pas fait.

Vue d'ensemble du flux

1Widget Ekoo → onEkooEvent() → dataLayer.push() → GTM Trigger → GA4 Event Tag → GA4 Reports

Chaque maillon de cette chaîne est détaillé ci-dessous. Suivez les étapes dans l'ordre pour une intégration sans accroc.

Étape 1 — Configurer le widget pour envoyer les événements au dataLayer

Placez le widget Ekoo sur votre page, définissez une fonction callback, puis chargez le script. La fonction pousse chaque événement dans le dataLayer avec un nom compatible GA4 (underscores, préfixe ekoo_).

1<ekoo-widget
2  data-ekoo="YOUR_WEBSITE_ID"
3  data-ekoo-product-id="YOUR_PRODUCT_ID"
4  data-ekoo-locale="fr"
5  data-ekoo-on-event="onEkooEvent"
6></ekoo-widget>
7
8<script>
9  function onEkooEvent(data) {
10    window.dataLayer = window.dataLayer || [];
11
12    // Push all Ekoo events to dataLayer
13    window.dataLayer.push({
14      event: 'ekoo_' + data.stats.type.replace('-', '_'),
15      ekoo_event_type: data.stats.type,
16      ekoo_widget_type: data.stats.widget,
17      ekoo_review_id: data.audioId,
18      ekoo_product_id: data.productRef,
19      ekoo_source: data.source
20    });
21  }
22</script>
23
24<script src="https://app.ekoo.co/widgets/widget-4.0.0-standalone.js"</script>

Lorsqu'un visiteur lance la lecture, l'événement ekoo_played_0 est poussé dans le dataLayer. C'est cet événement qui vous permettra de segmenter vos audiences dans GA4 et de mesurer l'impact de l'écoute audio sur la conversion.

Étape 2 — Configurer Google Tag Manager

2.1 Créer les variables de couche de données

Les variables de couche de données (Data Layer Variables) permettent à GTM de lire les propriétés poussées par votre callback. Créez une variable pour chaque propriété que vous souhaitez exploiter dans vos balises.

1. Dans GTM, allez dans Variables > Variables définies par l'utilisateur > Nouvelle
2. Choisissez le type Variable de couche de données
3. Dans Nom de la variable de couche de données, saisissez : ekoo_event_type
4. Nommez la variable DLV - ekoo_event_type et sauvegardez
5. Répétez l'opération pour chaque propriété :

2.2 Créer un déclencheur pour les événements Ekoo

Le déclencheur indique à GTM quand déclencher votre balise GA4. Vous pouvez créer un déclencheur par événement, ou un seul déclencheur générique avec une expression régulière.

Option A — Un déclencheur par événement :

1. Allez dans Déclencheurs > Nouveau
2. Type : Événement personnalisé
3. Nom de l'événement : ekoo_played_0
4. Nommez le déclencheur Trigger - Ekoo Played 0
5. Sauvegardez

Option B — Un seul déclencheur regex (recommandé) :

1. Allez dans Déclencheurs > Nouveau
2. Type : Événement personnalisé
3. Nom de l'événement : ekoo_.* et cochez Utiliser une expression régulière
4. Nommez le déclencheur Trigger - Ekoo All Events
5. Sauvegardez

2.3 Créer une balise GA4 Event

Cette balise envoie les événements Ekoo à votre propriété GA4.

1. Allez dans Balises > Nouvelle
2. Type de balise : Événement Google Analytics : GA4
3. ID de mesure : votre G-XXXXXXXXXX
4. Nom de l'événement : {{DLV - ekoo_event_type}} (mapping dynamique) ou un nom fixe comme ekoo_audio_play
5. Ajoutez les paramètres d'événement :

6. Dans Déclenchement, sélectionnez le déclencheur créé à l'étape précédente
7. Sauvegardez la balise

2.4 Tester dans GTM Preview

Avant de publier, validez l'intégration grâce au mode Prévisualisation de GTM :

1. Cliquez sur Prévisualiser en haut à droite de GTM
2. Saisissez l'URL de votre site et cliquez sur Connecter
3. Naviguez sur une page contenant le widget Ekoo
4. Interagissez avec le widget (lancez la lecture audio)
5. Dans le panneau GTM Debug, vérifiez que vos événements ekoo_* apparaissent dans la timeline
6. Cliquez sur l'événement, puis sur votre balise GA4 pour vérifier que les variables sont correctement transmises

Étape 3 — Exploiter les données dans GA4

3.1 Vérifier la réception des événements

1. Temps réel : allez dans GA4 > Rapports > Temps réel. Les événements ekoo_* devraient apparaître en quelques secondes après une interaction avec le widget.
2. Liste des événements : allez dans GA4 > Configuration > Événements. ekoo_played_0 devrait apparaître sous 24 à 48 heures.

3.2 Marquer comme événement clé (conversion)

Si l'écoute audio est un indicateur clé pour votre business, marquez l'événement comme conversion :

1. Allez dans GA4 > Configuration > Événements
2. Repérez ekoo_played_0 dans la liste
3. Activez le toggle Marquer comme événement clé à droite

L'événement apparaîtra désormais dans les rapports de conversion de GA4 et pourra être utilisé comme objectif dans vos campagnes publicitaires.

3.3 Créer une analyse comparative de conversion

Objectif : comparer le taux de conversion entre les visiteurs qui ont écouté un audio et ceux qui n'ont pas écouté, pour démontrer l'impact de l'audio sur votre business.

1. Allez dans GA4 > Explorer > Nouvelle exploration
2. Créez un Segment 1 — « Avec écoute audio » : incluez les utilisateurs ayant déclenché l'événement ekoo_played_0
3. Créez un Segment 2 — « Sans écoute audio » : excluez les utilisateurs ayant déclenché l'événement ekoo_played_0
4. En Dimensions, ajoutez : Event name
5. En Métriques, ajoutez : Conversions, Taux de conversion utilisateur
6. Appliquez les deux segments au rapport
7. Comparez les colonnes : la différence de taux de conversion entre les deux segments révèle l'impact de l'écoute audio

Mapping des événements recommandé

Pièges fréquents

1. Noms d'événements GA4 avec des tirets — GA4 n'accepte pas les tirets dans les noms d'événements. Utilisez toujours data.stats.type.replace('-', '_') pour convertir.
2. Oublier d'initialiser le dataLayer — si window.dataLayer n'existe pas au moment du push(), l'événement est silencieusement perdu.
3. Callback défini après le script — la fonction onEkooEvent doit être déclarée avant le chargement du script widget-4.0.0-standalone.js.
4. Nom de fonction incohérent — la valeur de data-ekoo-on-event doit correspondre exactement au nom de votre fonction globale (sensible à la casse).
5. GTM Preview non activé — les balises non publiées ne se déclenchent pas sans le mode Prévisualiser. Pensez toujours à l'activer avant de tester.
6. Événements absents dans GA4 — les données n'apparaissent dans Configuration > Événements qu'après 24 à 48 heures. Utilisez Rapports > Temps réel pour vérifier immédiatement.

Exemple complet récapitulatif

Voici l'intégralité du code à placer sur votre page pour une intégration GA4 via GTM fonctionnelle. Copiez-collez ce bloc et remplacez les valeurs en majuscules par les vôtres.

1<!-- 1. Ekoo Widget -->
2<ekoo-widget
3  data-ekoo="YOUR_WEBSITE_ID"
4  data-ekoo-product-id="YOUR_PRODUCT_ID"
5  data-ekoo-locale="fr"
6  data-ekoo-on-event="onEkooEvent"
7></ekoo-widget>
8
9<!-- 2. Callback — BEFORE the Ekoo script -->
10<script>
11  function onEkooEvent(data) {
12    window.dataLayer = window.dataLayer || [];
13
14    // Push the event with a GA4-compatible name
15    window.dataLayer.push({
16      event: 'ekoo_' + data.stats.type.replace('-', '_'),
17      ekoo_event_type: data.stats.type,
18      ekoo_widget_type: data.stats.widget,
19      ekoo_review_id: data.audioId,
20      ekoo_product_id: data.productRef,
21      ekoo_source: data.source
22    });
23  }
24</script>
25
26<!-- 3. Ekoo Script -->
27<script src="https://app.ekoo.co/widgets/widget-4.0.0-standalone.js"</script>