Recorrido del cliente en flujo

Por dónde pasan los clientes y cuántos.

Definición

Un recorrido del cliente en flujo dibuja las etapas por las que pasan los clientes y los enlaces entre ellas, con un grosor que es el volumen que pasa por cada salto. Lo que entra en una etapa y no sale de ella es la caída. Se usa para ver dónde se pierde gente entre el primer contacto y la compra.

Editar con tus datos SVG Spec JSON

Datos: source · target · value
Buena para: Ver por qué caminos llegan los clientes y en qué salto se pierden.
Evítala cuando: Cuando el recorrido tiene más de tres niveles: la pieza deduce sólo origen, paso intermedio y destino.
Se lee bien: Entre 3 y 50 elementos; dibuja hasta 500
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é
`source` · opcional	string	De dónde sale el flujo. Sin ella (o sin destino) el chart devuelve un mapa vacío, no falla.
`target` · opcional	string	A dónde va. Las etapas NO se declaran: salen de quién aparece sólo como origen (etapa 0), sólo como destino (etapa 2) o como ambos (etapa 1).
`value` · opcional	number	El volumen del enlace: su grosor. Si la columna no aparece, TODOS los enlaces valen 1 y el mapa iguala flujos que no son iguales.

Tamaños

Ancha por necesidad

Esta pieza necesita anchura para que cada rótulo quepa entero. El motor prefiere decirlo a apretarla.

A menos de 480 px sus rótulos no caben sin pisarse o recortarse, y el motor no la publica así. En el móvil se ve la versión ancha, a tamaño legible y sin recortar, dentro de un marco que se desliza.

Cuándo usarla

Tres preguntas antes de elegirla

¿El recorrido se ramifica?

Si todos pasan por las mismas etapas en el mismo orden, un embudo de conversión se lee antes.

Sí: quédate con recorrido del cliente en flujo

No: usa Embudo de conversión

¿Tienes volúmenes medidos en cada enlace?

Si sólo quieres describir las etapas sin cifras, usa el recorrido por etapas.

Sí: quédate con recorrido del cliente en flujo

No: usa Recorrido por etapas

¿Te bastan tres niveles de etapas?

Si el flujo pasa por más etapas, el diagrama de Sankey las admite.

Sí: quédate con recorrido del cliente en flujo

No: usa Diagrama de Sankey

Código

La misma pieza, con tus datos

import { getPreset, renderComposition } from 'visx-render/node';

const spec = await getPreset('customerjourney');
spec.data.rows = misFilas; // tus columnas
const { svg, warnings } = await renderComposition(spec);

También en React con Chart y prepareComposition. Guía para desarrolladores →

Dudas

¿Cómo se definen las etapas?

No se declaran: lo que sólo aparece como origen es la primera etapa, lo que sólo aparece como destino es la última, y lo que es ambas cosas va en medio.

¿Es obligatorio dar el volumen?

Sin columna de volumen todos los enlaces valen 1, y el mapa iguala flujos que no son iguales.

¿Cuántos enlaces admite?

Se lee bien entre 3 y 50.

¿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?

A menos de 480 px el motor no la compone sin pisar o cortar rótulos, y lo dice. En el móvil se ve la versión ancha, a tamaño legible, dentro de un marco que se desliza.

Relacionadas

Otras formas de responder «flujos y recorridos»

Guía para elegir: flujos y recorridos →