Contexte

Ekoo est une solution clé en main, alignée sur les nouveaux usages des consommateurs, pour mettre de l’audio sur les sites e-commerce et en magasin.

Ekoo apporte émotion et incarnation  à votre site et permet de se différencier de ses concurrents dans un écosystème orienté par google

Ekoo aide à améliorer le taux de transformation

Ekoo apporte une plus value à l’expérience client en magasin

Nous voulons redonner de l’émotion au commerce grâce à la voix.

Parce que vos produits sont faits avec amour, parce que vos équipes sont des passionnées avant tout, parce que vos clients sont votre meilleure “publicité”, donnez leur la parole !

Présentation des widgets

Ekoo est un ensemble de widgets écrit en Javascript qui s’implantent sur vos sites d’e-commerce et qui permet proposer des contenus audios à vos clients. Ils prennent la forme de players, qui offrent une simplicité d’écoute et de manipulation des audios.

L’intégration de ces widgets peut se faire directement dans les pages d’un site ou via des solutions tels que Google Tag Manager.

Widget Standalone

Le widget standalone permet de lire le commentaire le plus important sur un produit. Il possède une barre d’information qui se déplie quand la piste audio se joue puis se replie une fois terminé ou si l’utilisateur clique sur le bouton pause.

Widget Carousel

Le widget carousel permet d’avoir une vue d’ensemble des avis clients (mais également des témoignages d’équipes s’il y en a). Il se présente sous la forme d’un carousel scrollable en horizontal (avec une largeur maximale de 350px).

Comment ajouter un widget ?

Configuration depuis le Backoffice Ekoo

Vous pouvez retrouvez sur votre Backoffice Ekoo un espace de configuration du widget afin de générer les scripts à implémenter sur vos solutions.

Comment y accéder ?

Connectez vous sur votre Backoffice Ekoo disponible sur le lien suivant : https://app.ekoo.co/

Sur la plateforme Backoffice mise en place pour vous, vous trouverez comme ci-dessous, votre espace utilisateur dans lequel vous retrouverez l’onglet “Admin”.

Ici vous retrouverez les informations concernant l’implémentation du widget en commençant par:

• Le Org ID/Website Id : Qui vous permettra de pouvoir lier votre Backoffice avec le widget pour charger vos audios

Vous pouvez ensuite (si activée), utiliser la fonctionnalité de configuration à distance (recommandée). N’hésitez pas à demander à votre accompagnateur Ekoo d’activer cette fonctionnalité pour vous.

Pour vous y rendre, cliquez sur l’onglet “Look & Feel” puis sur “Widget”, vous arriverez sur la page ci-dessous :

Sur cette page vous trouverez la liste de vos différentes configurations de widgets.

Il y a deux types de configurations:

• Configuration par défaut: Cette configuration est unique et ne peut être supprimée. Les produits créés dans votre backoffice sont automatiquement liés à cette configuration par défaut.
• Configuration personnalisée: Si la configuration par défaut ne vous convient pas pour un produit ou un service spécifique, vous pouvez créer une configuration personnalisée en cliquant sur “Ajouter”. Vous arriverez alors sur la page ci-dessous vous permettant d’éditer votre nouvelle configuration.

Cliquer sur les différentes sections pour éditer les paramètres du widget (couleurs, logo, textes d’appel à l’écoute etc…). Cliquez ensuite sur enregistrer pour valider vos changements.

Pour assigner une configuration à un produit, il vous suffit de vous rendre sur l’onglet “Produits”, sélectionnez le produit que vous souhaitez assigner, puis sélectionner la configuration souhaitée:

⚠️ N’oubliez pas de lier un ou plusieurs audios à votre produit, sans quoi le widget ne pourra pas apparaître

Il ne vous reste plus qu’à intégrer ce code sur votre site pour voir votre widget apparaître:

/* À intégrer à l'endroit où souhaitez voir le widget apparaître */
<div
	data-ekoo="WEBSITE_ID"
	data-ekoo-product-id="PRODUCT_REF ou fonction"
	data-ekoo-locale="AUDIO_LANG (fr, en, auto etc...)"
	data-ekoo-type="WIDGET_TYPE (standalone ou carousel)"
	data-ekoo-on-event="onEvent"
>
	/* Attribut optionnel pour envoyer les évènements Ekoo vers Google Analytics / Piano Analytics
	etc... */
</div>

/* Pour avoir la gestion multilingue de vos audios, vous pouvez mettre "auto" en valeur pour
l'attribut data-ekoo-locale. La langue de l'audio dépendra dès lors de la langue du navigateur de
l'internaute. */ /* À intégrer avant la fermeture du tag
<body>
	*/
	<script src="https://app.ekoo.co/widgets/widget-3.1.0.js"></script>

	<script>
		function onEvent(stats) {
			console.log(stats)
			if (stats.stats.type == 'printed') {
				dataLayer.push({
					//...
				})
			}
		}
	</script>
</body>

Voici un exemple de code avec les valeurs de notre exemple ci-dessus:

/* À intégrer à l'endroit où souhaitez voir le widget apparaître */
<div
	data-ekoo="762ddd84-3d48-4b12-a4cd-c558ae799771"
	data-ekoo-product-id="001"
	data-ekoo-locale="fr"
	data-ekoo-type="standalone"
></div>
/* Pour avoir la gestion multilingue de vos audios, vous pouvez mettre "auto" en valeur pour
l'attribut data-ekoo-locale. La langue de l'audio dépendra dès lors de la langue du navigateur de
l'internaute. */ /* À intégrer avant la fermeture du tag
<body>
	*/
	<script src="https://app.ekoo.co/widgets/widget-3.1.0.js"></script>
</body>

Les paramètres du widget

Voici la liste des paramètres valides pour tous les types de widgets

Paramètres obligatoires

Paramètres relatifs au theming

Les paramètres communs à tous les widgets

Les différents modèles d’icône :

Les paramètres spécifiques au widget standalone

Les paramètres spécifique aux widgets carousel

Description avancée

Le script javascript du widget comporte 2 fonctions principales window.ekooLoad et window.ekooUnload.

Lors de l’évènement onload de la page, la fonction ekooLoad est appelée automatiquement mais vous pouvez également l’appeler manuellement à tout moment.

Pour chaque widget déclaré, le widget s’affiche si et seulement si:

• Le produit visé par data-ekoo-product-id existe dans le Backoffice et contient des audios
• Au moins un des audios est publié

Enfin la fonction ekooUnload peut être utilisée pour supprimer tous les widgets de la page courante.

Exemples avancés

Obtenir le productId dynamiquement

Il est assez fréquent de vouloir récupérer la référence produit de manière dynamique. Vous pouvez par exemple utiliser une variable du dataLayer, une Liquid variable dans le cadre du CMS Shopify, ou tout simplement une fonction comme dans l’exemple ci-dessous où nous récupérons le productId dans l’URL de la page

<div
	data-ekoo="762ddd84-3d48-4b12-a4cd-c558ae799771"
	data-ekoo-product-id="getProductId"
	data-ekoo-locale="fr"
	data-ekoo-type="standalone"
></div>

<script>
	function getProductId() {
		const path = window.location.pathname
		const splittedPath = path.split('/')
		// L'url serait comme ceci
		// <https://votresite.fr/produits/produit-001>
		const id = splittedPath[splittedPath.length - 1]
		return id
	}
</script>

<script src="https://app.ekoo.co/widgets/widget-3.1.0.js"></script>

Fonctionnement dans une application Single Page App

Dans ce type d’application, l’évènement “onload” de la page n’est déclenché qu’une seule fois au chargement de l’application. Il est alors nécéssaire d’appeler la fonction ekooLoad et ekooUnload au moment opportun (par exemple lorsque la navigation est triggered)

Exemple en Svelte

En svelte on aurait quelque chose de semblable à ceci dans un composant Page

<script>
	// Page.svelte

	import { onMount, onDestroy } from 'svelte'

	onMount(() => {
		window.ekooLoad()
	})
	onDestroy(() => {
		window.ekooUnload()
	})
</script>

<div>
	<div
		data-ekoo="762ddd84-3d48-4b12-a4cd-c558ae799771"
		data-ekoo-product-id="001"
		data-ekoo-locale="fr"
		data-ekoo-type="standalone"
	></div>

	<script src="https://app.ekoo.co/widgets/widget-3.1.0.js"></script>
</div>

Exemple en React

En React on aurait quelque chose de semblable à ceci dans un composant ‘Page’

import React from 'react'
import { useEffect, useState } from 'react'

const App = () => {
	useEffect(() => {
		const script = document.createElement('script')

		script.src = '<https://app.ekoo.co/widgets/widget-3.1.0.js>'
		script.async = true
		script.defer = true

		document.body.appendChild(script)

		return () => {
			document.body.removeChild(script)
		}
	}, [])

	return (
		<div>
			<h1>React App</h1>
			<div
				data-ekoo="762ddd84-3d48-4b12-a4cd-c558ae799771"
				data-ekoo-product-id="001"
				data-ekoo-locale="fr"
				data-ekoo-type="standalone"
			></div>
		</div>
	)
}

export default App

Intégration via un tag manager

Les “best practices” pour intégrer la solution Ekoo via un système de Tag Manager

GoogleTagManager

Pour ce qui est de l’intégration via un Google Tag Manager, voici comment on procède :

Dans un premier temps cliquer sur le bouton Ajouter un balise

Par la suite nous devons choisir comme type de balise “HTML personnalisée” et ajouter dans l’encart HTML le script ci-dessous avec les valeurs désirées pour les différents data attributs. (Vous pouvez définir vos “Déclencheurs” du widgets dans la section “Déclenchements”)

<script>
	// Create a new div element
	const div = document.createElement('div')

	// Set the attributes
	div.setAttribute('data-ekoo', '762ddd84-3d48-4b12-a4cd-c558ae799771')
	div.setAttribute('data-ekoo-product-id', '001')
	div.setAttribute('data-ekoo-locale', 'fr')
	div.setAttribute('data-ekoo-type', 'standalone')

	// Use querySelector to find the desired location
	const targetElement = document.querySelector('#target-element')
	// replace '#target-element' with your selector
	if (targetElement) {
		targetElement.appendChild(div)
	}

	// Create the script element
	const script = document.createElement('script')
	script.src = 'https://app.ekoo.co/widgets/widget-3.1.0.js'

	// Append the script to the same target or wherever preferred
	document.body.appendChild(script)
</script>

Vous pouvez désormais voir le résultat via l’onglet “Prévisualiser” et par la suite cliquez sur “Envoyer” pour l’activer sur votre environnement défini.

Voilà ! Le widget devrait donc s’afficher !

Envoi d’event dans Google Analytics

Chez Ekoo, nous nous engageons à respecter la vie privée des utilisateurs tout en enrichissant l’expérience sur les sites de nos clients. Notre solution audio se démarque par son approche non-intrusive : aucun cookie n’est utilisé pour le suivi des visiteurs. Cette approche assure une conformité totale avec les réglementations sur la protection des données et permet à vos visiteurs de profiter d’une expérience personnalisée en toute confidentialité.

Ceci dit, vous pouvez remonter les events de lecture et d’affichage du widget Ekoo directement dans votre outil de tracking. Pour cela, nous mettons à disposition une fonction, onEvent, qui sera appelé à chaque fois que le widget enverra des évènements à votre backoffice.

Exemple : Mesurer l’impact de l’écoute d’un audio sur le taux de conversion

Voici comment mesurer l’impact d’EKOO sur votre taux de conversion en 3 étapes:

Étape 1 : Paramétrer l’intégration du widget pour envoyer les events dans le dataLayer

Pour cela, il faut ajouter l’attribut data-ekoo-on-event à la div et créer la fonction onEvent associée à cet attribut comme ci-dessous :

<div
	data-ekoo="WEBSITE_ID"
	data-ekoo-product-id="PRODUCT_REF ou fonction"
	data-ekoo-locale="AUDIO_LANG (fr, en, auto etc...)"
	data-ekoo-type="WIDGET_TYPE (standalone ou carousel)"
	data-ekoo-on-event="onEvent"
></div>

<script>
	function onEvent(stats) {
		if (stats.stats.type == 'played-100') {
			window.dataLayer &&
				widnow.dataLayer.push({
					event: 'ekoo-played-100',
					eventData: stats
				})
		}
	}
</script>

<script src="https://app.ekoo.co/widgets/widget-3.1.0.js"></script>

Ici on envoie uniquement l’event played-100 qui correspond à l’écoute complète d’un audio. On pourrait également utiliser played-50, en considérant qu’une écoute partielle peut suffire pour impacter la conversion. Pour rappel, voici une liste exhaustive des events :

- printed - played-0 - played-25 - played-50 - played-75 - played-100

Étape 2 : Paramétrer GTM pour récupérer les events depuis le dataLayer et les envoyer dans GA

A) Créer une variable pour récupérer eventData

Accédez à Variables dans le menu de gauche de GTM.

Détails de l’étape :

1. Cliquez sur Nouvelle variable.
2. Choisissez Variable de couche de données.
3. Configurez : Nom de la clé dans la couche de données : eventData (c’est la clé utilisée dans votre DataLayer).
4. Donnez un nom clair à cette variable, comme Event Data.
5. Enregistrez

B) Créer un déclencheur pour ekoo-played-100

Accédez à Déclencheurs dans le menu de gauche.

Détails de l’étape :

1. Cliquez sur Nouveau pour créer un déclencheur.
2. Sélectionnez Événement personnalisé comme type de déclencheur.
3. Configurez : Nom de l’événement : ekoo-played-100 (exactement comme dans le DataLayer).
4. Nommez le déclencheur, par exemple : Trigger - ekoo-played-100.
5. Enregistrez.

C) Créer une balise pour envoyer l’événement à GA4

Accédez à Balises dans le menu de gauche.

Détails de l’étape :

1. Cliquez sur Nouvelle balise.
2. Choisissez Événement Google Analytics 4 comme type de balise.
3. Configurez la balise :
   • Associez votre ID de flux GA4 (ex. : G-XXXXXXXXXX).
   • Définissez le Nom de l’événement comme played_100 (ou un nom pertinent).
   • Ajoutez des Paramètres personnalisés en fonction des données dans eventData
4. Associez la balise au déclencheur Trigger - ekoo-played-100 créé dans l’étape 3.
5. Enregistrez.

Étape 3 : Paramétrer GA

A) Configurer les événements nécessaires dans GA4

Vérifiez que les événements sont bien configurés :

Assurez-vous que l’événement played_100 ou équivalent (défini dans GTM) est bien envoyé à GA4.

Vérifiez les conversions dans GA4 :

1. Allez dans Configuration → Événements dans GA4.
2. Assurez-vous que votre événement de conversion principal (comme purchase, signup, etc.) est marqué comme Conversion (Cliquez sur l’icône en forme d’étoile pour marquer cet événement comme une conversion)

B) Créer des segments personnalisés pour “avec écoute” et “sans écoute”

1. Allez dans Explorer (rapports exploratoires) dans GA4.
2. Créez un rapport vierge ou utilisez un modèle Exploratoire.
3. Ajoutez des Segments utilisateurs :
   • Segment 1 : Utilisateurs avec écoute d’audio
     • Cliquez sur + Ajouter un segment → Condition utilisateur.
     • Configurez une condition : Inclure les utilisateurs où Événement = played_100.
     • Enregistrez le segment avec un nom explicite, par exemple “Avec écoute audio”.
   • Segment 2 : Utilisateurs sans écoute d’audio
     • Cliquez sur + Ajouter un segment → Condition utilisateur.
     • Configurez une condition : Exclure les utilisateurs où Événement = played_100.
     • Enregistrez avec un nom explicite, par exemple “Sans écoute audio”.

C) Construire le rapport dans l’exploration

1. Choisissez un type d’exploration :

   Sélectionnez Exploration libre.

2. Ajoutez les dimensions nécessaires :

   • Dimension principale : Event name (nom des événements, pour filtrer vos conversions principales).
   • Ajoutez d’autres dimensions si nécessaire, comme device_category ou source/medium, pour enrichir l’analyse.

3. Ajoutez les métriques nécessaires :

   • Conversions : Utilisez la métrique de conversion GA4 pour afficher le nombre d’événements marqués comme conversions.
   • Taux de conversion utilisateur : Cette métrique calcule le pourcentage d’utilisateurs ayant complété l’événement de conversion par rapport au total.

4. Appliquez les segments :

   • Glissez les segments “Avec écoute audio” et “Sans écoute audio” dans la section des lignes ou colonnes de votre rapport.

5. Personnalisez la vue :

   • Comparez directement les taux de conversion des deux segments.
   • Utilisez des graphiques pour visualiser les différences si nécessaire (barres, lignes, etc.).

Grâce à ces étapes vous pourrez par exemple créer ce type de rapport de conversion :