Looker Studio propose un graphique en entonnoir natif. Il fonctionne bien pour les cas d’usage simples : une dimension, une métrique, un champ de tri. Ces visualisations personnalisées gratuites vont plus loin en répondant à deux limites que le graphique natif ne couvre pas.
Présentation & fonctionnalités clés
Le premier bénéfice de cette visualisation personnalisée est la flexibilité du modèle de données. Le funnel natif ne supporte que le modèle par dimension (une dimension + une métrique). Ces visualisations ajoutent un modèle multi-métriques, où chaque étape du tunnel correspond à une métrique distincte, un schéma très courant lorsqu’on travaille avec des événements e-commerce pré-agrégés (par ex. « Items viewed », « Items added to cart », « Items purchased »). Pas de dimension requise, pas de champ de tri à configurer : il suffit de glisser les métriques dans l’ordre souhaité.
Le second bénéfice est la mise en page tabulaire avec colonnes dérivées. Au lieu de labels flottants sur des barres, le tunnel est affiché sous forme de tableau structuré avec des colonnes dédiées pour le nom de l’étape, la forme visuelle de l’entonnoir, la valeur brute, le % par rapport à l’étape précédente et le % par rapport à la première étape, chacune activable/désactivable indépendamment. Les largeurs de colonnes sont configurables en pourcentage, ce qui offre un contrôle total sur la mise en page.
Les deux variantes partagent le même moteur de rendu, les mêmes contrôles de style et le même CSS, elles sont donc visuellement cohérentes lorsqu’elles sont utilisées côte à côte dans un rapport.
- Deux formes de tunnel
Choisissez entre Smoothed Bar (entonnoir classique en trapèzes) et Stepped Bar (barres horizontales) selon votre style visuel. - Entièrement configurable
Couleurs, polices, largeurs de colonnes, hauteur des lignes, visibilité de l’en-tête, tout est paramétrable depuis le panneau de style de Data Studio. - Colonnes activables
Affichez ou masquez indépendamment la valeur, le % de l’étape précédente et le % de la première étape. - Formatage selon la locale
Les nombres et pourcentages sont automatiquement formatés selon la locale du navigateur (séparateurs décimaux, notation compacte). - Support Google Fonts
Sélectionnez n’importe quelle police Google depuis le panneau de style. - i18n intégrée
Les en-têtes de colonnes (« Étape », « % Précédent », « % Initial ») sont traduits en anglais, français, espagnol, allemand et italien, selon la langue du navigateur.
Deux variantes pour deux modèles de données
Les données d’un tunnel de conversion peuvent être structurées de deux manières fondamentalement différentes dans Data Studio. Le package fournit une visualisation pour chaque cas.
Tunnel à plusieurs métriques (Multi-Metric Funnel Chart)
Utilisez cette variante lorsque chaque étape de votre tunnel correspond à une métrique distincte dans votre source de données. C’est un schéma courant pour les tunnels e-commerce, où chaque étape est une métrique pré-agrégée (ici « Items viewed », « Items added to cart », « Items checked out », « Items purchased »).
Configuration des données
- Dimension: aucune
- Métriques : ajoutez de 1 à 15 métriques, dans l’ordre dans lequel vous souhaitez qu’elles apparaissent dans le tunnel (de haut en bas). La première métrique est considérée comme le sommet du tunnel.
Les noms des métriques définis dans votre source de données sont utilisés comme libellés des étapes — veillez à ce qu’ils soient lisibles.
Tunnel à dimension (Dimension Funnel Chart)
Utilisez cette variante lorsque les étapes de votre tunnel sont des lignes d’une dimension unique, chacune associée à une seule valeur de métrique. C’est le cas typique lorsqu’on travaille avec des données préparées et ventilées sur une dimension spécifique, ici avec « nom de l’événement » qui contient des valeurs comme view_item, add_to_cart, purchase, et la métrique comme comptage (« Total users » pour l’exemple).
Configuration des données
- Dimension : ajoutez 1 seule dimension. Ses valeurs seront utilisées comme libellés des étapes.
- Metrique : ajoutez 1 seule métrique. Sa valeur pour chaque ligne de la dimension détermine la taille de la barre.
Les lignes sont affichées dans l’ordre de tri défini dans Data Studio. Assurez-vous de trier vos données par un champ numérique (l’ordre des étapes à afficher par example) pour que le tunnel se lise correctement de la barre la plus large à la plus étroite.
Le tri est déterminant
Contrairement à la variante Multi-Metric où l’ordre est déterminé par l’ordre des champs dans la configuration, le Dimension Funnel repose sur l’ordre de tri de Data Studio. Si vos étapes de tunnel semblent mélangées, vérifiez les paramètres de tri du graphique.
Options de style
Les deux variantes exposent le même ensemble de contrôles de style dans le panneau de propriétés de Data Studio, organisés en trois sections : Main, Header et Data.
Section principale (Main)
La section « Main » contrôle l’apparence générale et la mise en page du graphique.
| Option | Description | Par défaut |
|---|---|---|
| Funnel Type | Option entre Smoothed Bar (trapèzes connectés d’une étape à l’autre) et Stepped Bar (barres horizontales indépendantes, centrées) | Smoothed Bar |
| Funnel Color | Couleur de base du tunnel. Le graphique génère automatiquement un dégradé à partir de cette couleur : la première étape utilise une teinte légèrement assombrie, et les étapes suivantes deviennent progressivement plus claires et moins saturées | #b81318 |
| Row Height | Hauteur de chaque ligne du tunnel en pixels. | 48px |
| Display Value Column | Afficher ou masquer la colonne qui montre la valeur brute de la métrique | Activé |
| % of Previous Step | Afficher ou masquer le taux de conversion par rapport à l’étape précédente. | Activé |
| % of First Step | Afficher ou masquer le taux de conversion par rapport à la première étape (sommet du tunnel). | Activé |
| Font Family | Police Google proposée par Data Studio | Montserrat |
| Largeurs de colonnes | Cinq champs de texte pour contrôler la largeur (en %) de chaque colonne : nom de l’étape, tunnel, valeur, % du précédent, % du premier. La somme des valeurs doit être égale à 100. | 25 / 30 / 15 / 15 / 15 |
Entête et données (Header & Data)
Ces deux sections permettent de styliser la ligne d’en-tête et les lignes de données indépendamment.
| Section | Option | Description | Par défaut |
|---|---|---|---|
| Header | Display the header | Afficher ou masquer la ligne d’en-tête entière. | Activé |
| Text Color | Couleur des libellés de l’en-tête. | #999999 | |
| Font Size | Taille de police des libellés de l’en-tête. | 14px | |
| Bold | Activer ou désactiver le gras sur les libellés de l’en-tête. | Désactivé | |
| Data | Text Color | Couleur utilisée pour les noms d’étapes et les valeurs numériques dans les lignes de données. | #000000 |
| Font Size | Taille de police des lignes de données. | 14px | |
| Bold | Activer ou désactiver le gras sur les lignes de données. | Activé | |
| Separator Color | Couleur de la ligne horizontale entre les lignes. Mettez une couleur transparente pour supprimer complètement les séparateurs. | #f3f3f3 |
Comment installer le tunnel de conversion dans votre rapport Data Studio
Pour installer l’une des variantes de tunnel de conversion au sein de votre rapport interactif ou tableau de bord Data studio, il vous suffit de suivre les étapes suivantes :
- Vérifier que vos sources de données sont configurées pour autoriser l’utilisation de visualisations personnalisées
- Aller sur le menu Ressource > Gérer les nouvelles sources de données
- Sélectionner la source de données concernées
- Cliquer sur « Accès aux visualisations de la communauté » en haut à droite du panneau de la source de données et activer
- Fermer le panneau de la source de données pour revenir sur votre rapport Data Studio
- Ajouter la visualisation personnalisée
- Cliquer sur le bouton d’ajout de visualisation de la communauté dans la barre d’outils, à droite de « Ajouter un graphique »
- Dans la popin, cliquer sur « Découvrir d’autres visualisations »
- Dans le panneau « Visualisations de partenaires », cliquer sur le premier choix « Créer votre propre visualisation »
- Dans le champ du chemin d’accès au fichier manifeste, saisir l’adresse suivante et valider : gs://viz.withlookerstudio.com/funnel
- Et enfin, choisir la variante de tunnel de conversion souhaitée, l’ajouter sur sa page de rapport
- Configurer la visualisation fraîchement ajoutée
