Intégration Google Tag Manager

Injectez le widget Ekoo via un tag Custom HTML dans GTM

Google Tag Manager permet d'ajouter le widget Ekoo sans modifier le code source de votre site. Vous créez un tag Custom HTML qui insère le conteneur et le script sur la page.

Le widget charge automatiquement sa configuration depuis le backoffice. Les attributs d'apparence sont des surcharges optionnelles — inutile de les définir si le backoffice est configuré.

Attributs principaux

data-ekooReq

string

UUID du site Ekoo. Visible dans le backoffice → Paramètres du site.

data-ekoo-product-idReq

string

Référence produit (doit correspondre exactement au catalogue Ekoo).

data-ekoo-locale

string·default: auto

Code langue : fr, en, es, it, de, ar, cn, tw, hk, jp, kr, nl, tr, pl, pt, lu, be, ru. "auto" = détection navigator.language.

data-ekoo-variant

string

Référence stable d’une configuration widget. Le produit, ses audios et ses reviewers restent pilotés par data-ekoo-product-id ; seul l’habillage change.

data-ekoo-review-id

string

ID d'un avis audio spécifique. Si omis, le premier avis publié est utilisé.

data-ekoo-on-event

string (fn name)

Nom d'une fonction globale window appelée à chaque événement widget (printed, played-0, played-25…).

Apparence — surcharges backoffice

data-ekoo-direction

normal | reverse·default: normal

Sens d'expansion. normal = gauche→droite, reverse = droite→gauche.

data-ekoo-scale

number·default: 1

Facteur de zoom (ex: "1.2" pour 20% plus grand).

data-ekoo-animation

string·default: pulse

Type d'animation de l'icône au repos.

data-ekoo-animation-duration

string·default: continuous

Durée de l'animation.

data-ekoo-always-open

boolean·default: false

Si "true", le widget reste toujours déplié.

data-ekoo-show-image

boolean·default: true

Afficher ou masquer l'image produit dans le widget.

data-ekoo-not-fully-clickable

boolean·default: false

Si "true", seul le bouton lecture est cliquable.

data-ekoo-autoplay

boolean·default: false

Lecture audio automatique au chargement.

data-ekoo-show-transcript

boolean·default: false

Afficher un bouton pour lire la transcription.

data-ekoo-show-speed-button

boolean·default: false

Afficher un contrôle de vitesse de lecture.

data-ekoo-closed-state-main-text

string

Texte CTA principal affiché quand le widget est replié.

data-ekoo-closed-state-secondary-text

string

Texte secondaire sous le CTA quand le widget est replié.

SPA & Shadow DOM

data-ekoo-mode

spa | static·default: auto

Force le mode rendu. Auto-détecté (Next.js, Nuxt, React, Vue, Angular, Sapper). À utiliser seulement si la détection auto échoue.

data-shadow-mode

open | closed·default: open

"open" (par défaut) permet l'inspection, l'accès CSS externe et le tracking analytics. Définir à "closed" pour isoler complètement le widget.

Config JS globale

window.EKOO_FORCE_SPA = true

Force le mode SPA globalement (alternative à data-ekoo-mode="spa" sur chaque widget).

window.ekooShadowMode = "open"

Shadow DOM mode global (alternative à data-shadow-mode sur chaque widget).

1. Créer un tag Custom HTML

Ouvrez votre conteneur GTM.
Allez dans Tags → Nouveau.
Choisissez le type HTML personnalisé.
Collez le code ci-dessous dans le champ de saisie.

Tag Custom HTML — GTM

html

1<script>
2(function() {
3  // 1. Create the widget container
4  var container = document.createElement('div');
5  container.setAttribute('data-ekoo', 'YOUR_WEBSITE_ID');
6  container.setAttribute('data-ekoo-product-id', 'MY_PRODUCT_ID');
7  container.setAttribute('data-ekoo-locale', 'fr');
8
9  // 2. Insert the container at the desired location
10  //    Adjust the CSS selector to match your site
11  var target = document.querySelector('.product-detail');
12  if (target) {
13    target.appendChild(container);
14  } else {
15    document.body.appendChild(container);
16  }
17
18  // 3. Load the Ekoo script
19  if (!document.querySelector('script[src*="widget-4.0.0-standalone"]')) {
20    var script = document.createElement('script');
21    script.src = 'https://app.ekoo.co/widgets/widget-4.0.0-standalone.js';
22    script.defer = true;
23    document.head.appendChild(script);
24  } else if (window.ekooLoad) {
25    window.ekooLoad();
26  }
27})();
28</script>

2. Cibler le bon élément sur la page

Utilisez document.querySelector() pour positionner le widget à l'endroit voulu. Exemples de sélecteurs courants :

.product-detail — bloc principal de la fiche produit
#add-to-cart — juste avant/après le bouton d'ajout au panier
[data-product-id] — élément portant l'ID du produit

💡

Astuce

Utilisez l'inspecteur de votre navigateur pour identifier le sélecteur CSS idéal, puis testez-le dans la console avec document.querySelector('...').

3. Product ID dynamique

Si votre site rend l'identifiant du produit disponible dans le DOM ou dans le dataLayer, vous pouvez le récupérer dynamiquement :

Product ID dynamique via GTM

html

1<script>
2(function() {
3  // Retrieve the product ID from a DOM attribute
4  var productEl = document.querySelector('[data-product-id]');
5  var productId = productEl
6    ? productEl.getAttribute('data-product-id')
7    : null;
8
9  if (!productId) return; // No product, no widget
10
11  var container = document.createElement('div');
12  container.setAttribute('data-ekoo', 'YOUR_WEBSITE_ID');
13  container.setAttribute('data-ekoo-product-id', productId);
14  container.setAttribute('data-ekoo-locale', 'fr');
15
16  var target = document.querySelector('.product-detail');
17  if (target) {
18    target.appendChild(container);
19  }
20
21  // Check that the script is not already loaded
22  if (!document.querySelector('script[src*="widget-4.0.0-standalone"]')) {
23    var script = document.createElement('script');
24    script.src = 'https://app.ekoo.co/widgets/widget-4.0.0-standalone.js';
25    script.defer = true;
26    document.head.appendChild(script);
27  } else if (window.ekooLoad) {
28    window.ekooLoad();
29  }
30})();
31</script>

4. Configurer le déclencheur

Le tag doit se déclencher après que le DOM de la page produit soit prêt :

DOM Ready — convient dans la plupart des cas.
Window Loaded — si le contenu est chargé en asynchrone après le DOM Ready.
Ajoutez un filtre de page (ex. Page URL contient /product/) pour ne déclencher le tag que sur les fiches produit.

5. Gestion du timing

⚠️

GTM injecte après le DOM

GTM exécute les tags après le chargement du DOM. Si votre site utilise du rendu côté client (SPA, lazy-loading), l'élément cible peut ne pas encore exister. Dans ce cas, utilisez un MutationObserver pour attendre l'apparition de l'élément.

MutationObserver — attente de l'élément cible

html

1<script>
2(function() {
3  function injectEkoo(target) {
4    var container = document.createElement('div');
5    container.setAttribute('data-ekoo', 'YOUR_WEBSITE_ID');
6    container.setAttribute('data-ekoo-product-id', 'MY_PRODUCT_ID');
7    container.setAttribute('data-ekoo-locale', 'fr');
8    target.appendChild(container);
9
10    if (!document.querySelector('script[src*="widget-4.0.0-standalone"]')) {
11      var script = document.createElement('script');
12      script.src = 'https://app.ekoo.co/widgets/widget-4.0.0-standalone.js';
13      script.defer = true;
14      document.head.appendChild(script);
15    } else if (window.ekooLoad) {
16      window.ekooLoad();
17    }
18  }
19
20  var target = document.querySelector('.product-detail');
21  if (target) {
22    injectEkoo(target);
23    return;
24  }
25
26  // Wait for the element to appear
27  var observer = new MutationObserver(function(mutations, obs) {
28    var el = document.querySelector('.product-detail');
29    if (el) {
30      obs.disconnect();
31      injectEkoo(el);
32    }
33  });
34  observer.observe(document.body, { childList: true, subtree: true });
35})();
36</script>

6. Prévisualiser et publier

Cliquez sur Prévisualiser dans GTM pour tester votre tag en mode debug.
Naviguez vers une page produit ayant un audio publié.
Vérifiez que le widget s'affiche correctement.
Si tout est bon, cliquez sur Soumettre pour publier la version.

Pièges courants

Tag déclenché trop tôt : l'élément cible n'est pas encore dans le DOM → utilisez DOM Ready ou un MutationObserver.
Script chargé en double : vérifiez avec querySelector que le script n'est pas déjà présent avant de l'ajouter.
Product ID en dur : pensez à rendre le product ID dynamique si vos pages produit partagent le même tag GTM.
Politique CSP : si votre site utilise une Content Security Policy stricte, ajoutez app.ekoo.co à la directive script-src.

Aller plus loin

Charger le script dans le <head> via un second tag GTM — pour réduire le LCP.
Intégration Commanders Act — alternative européenne à GTM.

ℹ️

Note

Besoin d'aide ? Consultez la FAQ ou contactez le support Ekoo.