RousselTMLEARNING

Artículo · Grafana Faro: observabilidad front-end y RUM

Embudos de conversión en RUM

Este artículo está disponible en francés.

1. Qu’est-ce qu’un tunnel de conversion ? #

La notion et son vocabulaire.

Le principe #

Un tunnel de conversion (funnel) suit les étapes d'un parcours attendu, par exemple fiche produit, panier, paiement, commande, et compte combien de sessions atteignent chacune. Il répond à une question simple : où les utilisateurs abandonnent-ils ?

Le RUM (Real User Monitoring) est une source idéale : il voit les vraies sessions, dans le vrai navigateur, avec leurs erreurs et leurs lenteurs. Un tunnel RUM ne dit pas seulement combien abandonnent, il aide à comprendre pourquoi.

Tunnel de quatre étapes de 10 000 à 2 500 sessions, avec la plus forte perte entre panier et paiement

Le vocabulaire #

TermeDéfinition
ÉtapeUn événement observable : une page vue, un clic, un événement métier
Taux d’étapeSessions de l’étape ÷ sessions de l’étape précédente
Conversion globaleSessions de la dernière étape ÷ sessions de la première
Abandon1 − taux d’étape : la part perdue entre deux étapes
UnitéCe que l’on compte : session (le plus courant en RUM) ou utilisateur
FenêtreLa période dans laquelle les étapes doivent avoir lieu

2. Bien construire son tunnel #

Les choix qui changent les chiffres.

L’ordre des étapes #

Trois sessions comparées : seul un tunnel ordonné exclut la session qui paie avant de voir le produit

Beaucoup d'outils ne vérifient pas l'ordre : une session qui a réalisé toutes les étapes, dans n'importe quel ordre, est comptée. La documentation de Dynatrace le dit pour USQL FUNNEL, celle de New Relic pour funnel(). Nous l'avons vérifié sur Loki avec la requête de la partie 3 : une session qui paie avant de voir le produit est comptée jusqu'au bout.

Pour un parcours linéaire (panier puis paiement), l'écart est faible. Pour des étapes qui peuvent se répéter ou s'inverser, préférez un outil qui impose l'ordre, comme les funnels de Datadog.

Les bonnes pratiques #

  • 3 à 6 étapes, chacune liée à une décision de l'utilisateur. Au-delà, le tunnel devient illisible.
  • Des noms d'événements stables : ajout_panier partout, jamais addToCart sur une page et panier_ajout ailleurs.
  • Compter des sessions distinctes, pas des événements : un utilisateur qui recharge la page ne doit pas gonfler une étape.
  • Segmenter : navigateur, appareil, pays, version de l'application. Une chute concentrée sur Safari mobile pointe vers un bug, pas vers le prix.
  • Croiser avec la technique : erreurs JavaScript, temps de chargement et Core Web Vitals des pages où l'on abandonne.
  • Protéger les données : jamais d'e-mail, de nom ou de montant précis par client dans les attributs d'événements.

3. Grafana Faro #

Événements Faro et requêtes LogQL.

Instrumenter les étapes #

Faro n'a pas d'écran de tunnel : on le construit avec des événements, envoyés par pushEvent et stockés dans Loki avec le label kind=event.

// Une étape = un événement nommé, toujours avec les mêmes noms
faro.api.pushEvent('vue_produit', { produit: 'casque-x' });
faro.api.pushEvent('ajout_panier', { produit: 'casque-x', quantite: '1' });
faro.api.pushEvent('paiement', { moyen: 'carte' });
// Deux événements identiques à la suite sont dédupliqués par Faro :
faro.api.pushEvent('ajout_panier', { produit: 'casque-x' }, undefined, { skipDedupe: true });

Compter chaque étape en LogQL #

Sessions distinctes ayant vu un produit :

count(
  sum by (session_id) (count_over_time({app_name="boutique", kind="event"} | logfmt | event_name="vue_produit" [24h]))
)

Sessions ayant vu un produit et ajouté au panier : l'opérateur and ne garde que les sessions présentes dans les deux résultats.

count(
    sum by (session_id) (count_over_time({app_name="boutique", kind="event"} | logfmt | event_name="vue_produit"  [24h]))
  and
    sum by (session_id) (count_over_time({app_name="boutique", kind="event"} | logfmt | event_name="ajout_panier" [24h]))
)

Troisième étape :

count(
    sum by (session_id) (count_over_time({app_name="boutique", kind="event"} | logfmt | event_name="vue_produit"  [24h]))
  and
    sum by (session_id) (count_over_time({app_name="boutique", kind="event"} | logfmt | event_name="ajout_panier" [24h]))
  and
    sum by (session_id) (count_over_time({app_name="boutique", kind="event"} | logfmt | event_name="paiement"     [24h]))
)
RequêteRésultat du test
Produit4
Produit et panier3
Produit, panier et paiement2 (dont une session qui a payé en premier)
Le piège du simple comptage. sum by (event_name) (count_over_time(...)) donnait 4 ajouts au panier pour 4 fiches produit : une session avait ajouté au panier sans passer par la fiche. Comptez des sessions qui ont franchi les étapes précédentes, pas des événements.

Dans Grafana, placez chaque requête dans un panneau Bar gauge ou Stat, une requête par étape, pour obtenir un tunnel lisible. Ces requêtes ont été testées sur Loki 3.7.9.

4. Dynatrace #

Objectifs de conversion, USQL et DQL.

RUM Classic : USQL FUNNEL #

Avec le RUM Classic, déclarez d'abord des objectifs de conversion (conversion goals) sur l'application, puis utilisez la fonction FUNNEL du langage USQL :

SELECT FUNNEL(
  useraction.name = "AppStart (easyTravel)" AS "Ouverture",
  useraction.name = "searchJourney" AS "Recherche",
  useraction.name = "bookJourney" AS "Réservation",
  useraction.matchingConversionGoals = "Payment" AS "Payé")
FROM usersession
WHERE stringProperties.memberstatus = "GOLD"
  • 10 conditions au maximum.
  • Pas de GROUP BY, ORDER BY ni LIMIT.
  • L'ordre n'est pas garanti : la documentation précise que rien n'assure que la première action précède la seconde.

Couplé à Session Replay, le tunnel permet de revoir les sessions qui abandonnent à une étape.

Nouvelle expérience RUM : DQL #

Sur la plateforme Grail, les données RUM sont dans la table user.events, interrogée en DQL. La documentation montre comment compter les sessions par page :

fetch user.events
| filter characteristics.has_navigation
| summarize sessions = countDistinct(dt.rum.session.id), by: {view = view.url.path}
| sort sessions desc

Sur ce modèle, un tunnel se construit en deux agrégations : d'abord une ligne par session avec le nombre de passages par étape, puis le décompte des sessions qui ont franchi chaque étape et les précédentes.

fetch user.events, from: now() - 7d
| filter characteristics.has_navigation
| summarize {
    produit  = countIf(view.url.path == "/produit"),
    panier   = countIf(view.url.path == "/panier"),
    paiement = countIf(view.url.path == "/paiement")
  }, by: {dt.rum.session.id}
| summarize {
    `1. Produit`  = countIf(produit > 0),
    `2. Panier`   = countIf(produit > 0 and panier > 0),
    `3. Paiement` = countIf(produit > 0 and panier > 0 and paiement > 0)
  }
À valider sur votre environnement. Les champs viennent de la documentation de la nouvelle expérience RUM, encore en évolution ; nous n'avons pas pu exécuter cette requête. Adaptez les chemins de pages à votre application.

5. Datadog et New Relic #

Deux autres approches.

Datadog #

Datadog propose un écran dédié, Digital Experience > Product Analytics > Funnels : on choisit une vue ou une action de départ, puis on ajoute des étapes avec le bouton +. Les actions qui ont lieu entre deux étapes n'influencent pas les taux. Les requêtes d'un tunnel peuvent être reprises dans un moniteur RUM pour alerter sur une chute du taux de conversion.

New Relic #

FROM PageView
SELECT funnel(session,
  WHERE pageUrl LIKE '%browse%' AS 'Browse',
  WHERE pageUrl LIKE '%cart%' AS 'Cart',
  WHERE pageUrl LIKE '%checkout%' AS 'Checkout')
SINCE 1 week AGO
  • Un seul attribut de regroupement par requête (session ici).
  • 10 étapes au maximum ; résultats approximatifs au-delà de 256 valeurs distinctes.
  • L'ordre n'est pas imposé : la première étape vaut toujours 100 %.

En résumé #

OutilConstructionOrdre des étapes
Grafana FaropushEvent + LogQL dans GrafanaNon vérifié
Dynatrace (Classic)Objectifs de conversion + USQL FUNNELNon garanti
Dynatrace (nouveau RUM)DQL sur user.eventsÀ construire dans la requête
DatadogÉcran Funnels, alertesÉtapes successives
New RelicNRQL funnel()Non imposé

Sources #

📄 Tunnels de conversion en RUM : mesurer où les utilisateurs abandonnent →

Mi seguimiento

  • ⏱ Duración estimada : ≈ 13 min

Inicia sesión para seguir tu progreso y tomar notas. Iniciar sesión

💬 Preguntas sobre esta lección

Todavía no hay preguntas: sé el primero en pedir ayuda o compartir tu configuración.

Hacer una pregunta sobre esta lección →

Glossaire de la formation

Core Web Vitals

Conjunto de tres métricas definidas por Google para medir la experiencia real de una página web: la carga (LCP (Largest Contentful Paint)), la capacid...

LCP (Largest Contentful Paint)

Tiempo hasta que se muestra el elemento visible más grande de la página (imagen, vídeo o bloque de texto): indica cuándo aparece el contenido principa...

INP (Interaction to Next Paint)

Latencia de las interacciones (clic, toque, tecla) observada durante toda la visita: el retraso entre la acción del usuario y el siguiente renderizado...

CLS (Cumulative Layout Shift)

Medida de la estabilidad visual: suma de los desplazamientos inesperados del diseño (un botón que se mueve al hacer clic, un texto empujado por un anu...

FCP (First Contentful Paint)

Tiempo hasta que se muestra el primer contenido (texto, imagen, SVG): el momento en que el usuario ve que la página empieza a cargar. No es una Core W...

TTFB (Time to First Byte)

Tiempo entre el inicio de la navegación y la recepción del primer byte de la respuesta: suma redirecciones, DNS, conexión TCP/TLS y tiempo de procesam...

FID (First Input Delay)

Antigua métrica de capacidad de respuesta de las Core Web Vitals: el retraso antes de que el navegador empiece a procesar la primera interacción (buen...

TBT (Total Blocking Time)

Métrica de laboratorio (Lighthouse): suma, entre FCP (First Contentful Paint) y el final de la carga, de la parte bloqueante de cada tarea larga (más ...

CrUX (Chrome UX Report)

Base pública de Google que agrega las Core Web Vitals medidas en usuarios reales de Chrome (en el percentil 75, por origen y URL, en 28 días móviles)....

Lighthouse

Herramienta de auditoría libre de Google, integrada en las DevTools de Chrome y en PageSpeed Insights: carga la página en un entorno simulado y puntúa...

Apdex

Application Performance Index: puntuación de satisfacción entre 0 y 1 calculada a partir de un umbral de tiempo T. Las peticiones por debajo de T son ...

Artículos recomendados

Real User Monitoring (RUM) et Core Web Vitals : mesurer ce que vivent les utilisateurs

Pourquoi observer le front-end, ce que mesure le RUM, les Core Web Vitals (LCP, INP, CLS) et leur...

Faro et Alloy : recevoir le RUM front-end avec faro.receiver

Configurer faro.receiver : CORS, clé d'API, limite de débit, source maps, puis envoyer erreurs, W...

Real User Monitoring Dynatrace : injection, applications web et vérification

Mettre en place la surveillance des utilisateurs réels dans Dynatrace : injection automatique par...

Grafana Faro : architecture et installation

Installer Grafana Faro : le SDK web (npm ou CDN), le récepteur faro.receiver d'Alloy, l'envoi ver...

RUM et Synthetic Monitoring avec Datadog : synthetic transaction monitoring et expérience utilisateur

Mesurer l'expérience utilisateur avec Datadog : RUM navigateur et mobile, Core Web Vitals, Sessio...

Bonnes pratiques de l'observabilité front-end avec Faro

Check-list pour un RUM utile et respectueux : configuration du SDK, versions, source maps, corrél...

Analyser l'expérience utilisateur dans Dynatrace : sessions, traces, analyses et USQL

Exploiter les données d'expérience utilisateur (DEM) : Apdex et Core Web Vitals, sessions utilisa...

Faro : erreurs JavaScript, logs, événements métier et sessions

Exploiter l'API Faro : capture automatique des erreurs, envoi manuel d'erreurs, logs, événements ...

Étude de cas : le RUM minimal de ce site, sans cookie, exposé à Prometheus

Comment ce site mesure ses Core Web Vitals avec une quarantaine de lignes de JavaScript, une bali...

Apoyar

♥ APOYAR

Apoya RousselTM Learning

Los cursos, artículos, prácticas y certificados siguen siendo gratuitos y sin publicidad intrusiva. Una contribución libre, por el importe que elijas, financia el alojamiento, los entornos de prácticas y nuevos contenidos.

Contribuir con PayPal Importe libre · tarjeta o cuenta PayPalMás información
QR code PayPal
O escanea este código QR con tu teléfono

¡Gracias, cada contribución cuenta!