Embudo de varios pasos
Abandono a lo largo de un proceso largo.
Definición
Un embudo de varios pasos pone el volumen de cada paso de un proceso y la conversión de uno al siguiente, junto con el tiempo mediano que se tarda en darlo. Se leen la caída y la espera de cada paso a la vez. Sirve para procesos de alta, ventas o activación.
- Datos
- label · value · y
- Buena para
- Encontrar el paso que pierde más gente o que más tarda en darse.
- Evítala cuando
- Cuando el proceso tiene ramas o caminos alternativos: el embudo supone que todos siguen la misma secuencia.
- Se lee bien
- Entre 3 y 10 elementos; dibuja hasta 2500
- Datos que faltan
- Dibuja el valor ausente como cero.
- Accesibilidad
- Lector de pantalla: tabla de datos · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
label · opcional | string | El paso. Ausente, la pieza los numera «Step 1, Step 2…». |
value | number | El volumen del paso. Sin ninguna columna numérica la pieza LANZA nombrando las columnas que trae el spec: antes devolvía [] y `resolveData` enseñaba su propia demo. |
y · opcional | number | Tiempo mediano en HORAS hasta el paso siguiente; se rotula en días. Opcional y SÓLO por nombre: si no hay una columna llamada así, el embudo se dibuja sin ese dato («↓ 44,4%» a secas) en vez de reciclar el volumen. |
Tamaños
Recompuesta, no encogida
El motor vuelve a componer la pieza a cada ancho: los rótulos conservan su cuerpo y la figura gana alto si lo necesita.
Cuándo usarla
Tres preguntas antes de elegirla
¿Te importa cuánto se tarda en cada paso?
Si sólo interesa la conversión, basta un embudo sin tiempos.
Sí: quédate con embudo de varios pasos
No: usa Embudo de conversión
¿Todos siguen el mismo camino?
Si hay ramas o salidas hacia distintos destinos, se dibujan los flujos.
Sí: quédate con embudo de varios pasos
No: usa Diagrama de Sankey
¿Miras el proceso como una foto de un momento?
Si comparas cómo se comportan distintas cohortes a lo largo del tiempo, se usan cohortes.
Sí: quédate con embudo de varios pasos
No: usa Retención por cohortes
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('multistepfunnel');
spec.data.rows = misFilas; // value
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿En qué unidad va el tiempo entre pasos?
En horas, como mediana, en una columna llamada «y»; se rotula en días. Sin esa columna el embudo se dibuja sólo con la conversión.
¿Qué pasa si no pongo nombre a los pasos?
La pieza los numera en orden, con el rótulo que pone el motor en inglés: «Step 1», «Step 2»…
¿Qué hace si faltan datos?
Dibuja el valor ausente como cero. Si un hueco no es un cero en tus datos, rellénalo o elimina la fila antes de dibujar.
¿Cómo se ve en el móvil?
El motor la recompone a 420 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.
Relacionadas
Otras formas de responder «flujos y recorridos»
- Embudo de conversióncuánto se pierde en cada etapa
Diagrama de cuerdasflujos entre grupos en un círculo
Mapa de conexionesenlaces entre lugares sobre el territorio
Cronograma de operaciónfases y fechas de una transacción
Mapa de flujosmovimientos entre lugares y su volumen
Diagrama de Gantttareas y plazos de un proyecto