Composants réutilisables
Comparer les parcours sans reconstruire le graphique.
Au départ…
Les équipes veulent comparer étapes de conversion et cohortes dans plusieurs vues. La présentation change, mais les définitions doivent rester cohérentes.
Ce que nous avons construit
Un composant de tunnel configurable. Les builders associent les champs et étapes ; les analystes filtrent, comparent et choisissent la représentation adaptée à leur question.
Entrez dans l’outil
Écran 1 sur 6Tendances par cohorte
Lire les volumes par étape et l’évolution de conversion entre cohortes. Les valeurs privées sont masquées.
Ce que nous voulons changer
Faciliter l’analyse des pertes entre étapes et des différences entre cohortes avec un composant réutilisable.
Comment c’est construitModèle de données, code, contrôles et autonomie des équipes
Parcours utilisateur
- 01
Mapper table, dimensions, étapes numériques et objectifs éventuels.
- 02
Filtrer les cohortes ou comparer des groupes sélectionnés.
- 03
Réutiliser le composant en pleine page ou dans un dashboard.
Structure de la base
| Entité / table | Champs clés | Relations |
|---|---|---|
| Faits par cohorte | Campus · cohorte · type de rentrée · année éventuelle | Un enregistrement représente une cohorte sur un campus |
| Mesures par étape | Volumes numériques · objectifs éventuels | Chaque étape est mappée vers un champ |
| Configuration des vues | Mapping partagé · préférences personnelles ou partagées | La définition analytique reste séparée des préférences d’affichage |
Implémentation technique
- Champs et étapes se configurent dans Airtable ; le code ne suppose pas un nom de champ funnel fixe.
- Les sélections devenues incompatibles avec les filtres globaux sont retirées.
- Un plafond d’affichage documenté borne le nombre de segments produits.
Décision d’ingénierie
Combiner les filtres de cohortes sans fausser les totaux
Adapté du filtrage par dimensions et de l’agrégation des étapes et objectifs. Une dimension peut contenir plusieurs valeurs, mais chaque enregistrement filtré est compté une seule fois. Seuls les nombres finis sont sommés. Ici, un filtre vide signifie tout afficher ; un objectif nul ne produit pas de taux. Les liens doivent utiliser des identifiants stables si les libellés ne sont pas uniques.
const finite = value => Number.isFinite(value) ? value : 0;export function buildFunnel(records, filters, stageKeys) { const dimensions = Object.entries(filters) .map(([key, values]) => [key, new Set(values)]); const included = records.filter(record => dimensions.every(([key, allowed]) => allowed.size === 0 || (record[key] ?? []).some(value => allowed.has(value)) )); const stages = Object.fromEntries(stageKeys.map(key => [key, 0])); const objectives = Object.fromEntries(stageKeys.map(key => [key, 0])); // Multi-valued dimensions never expand a record into duplicate facts. for (const record of included) { for (const key of stageKeys) { stages[key] += finite(record.stages?.[key]); objectives[key] += finite(record.objectives?.[key]); } } return stageKeys.map((key, index) => { const previous = index > 0 ? stages[stageKeys[index - 1]] : null; return { key, value: stages[key], objective: objectives[key], attainment: objectives[key] > 0 ? stages[key] / objectives[key] : null, conversion: previous > 0 ? stages[key] / previous : null, }; });}Extrait adapté de l’implémentation
Contrôles et limites
- Le composant lit les enregistrements exposés à son interface. Les accès se configurent séparément.
- L’export local évite un service d’export supplémentaire ; les données exportées restent à protéger.
Qui peut contribuer
- Analystes : filtrer, comparer et exporter la vue utile.
- Builders : configurer dimensions, étapes et objectifs.
- Développeurs : ajouter des rendus en conservant les définitions communes.
Ce qui documente ce cas
L’extension publiée, le dépôt et l’interface en fonctionnement ont été inspectés : graphes, entonnoirs, tableaux, Sankey, vue consolidée et réglages analyste.