Tours de producto

Los tours son recorridos paso a paso que el SDK de Kilden renderiza sobre tus propias páginas: cada paso es una tarjeta que apunta a un elemento de tu página (tooltip + spotlight) o, sin ancla, se muestra como un modal centrado. Son un tipo de unit in-app, así que el targeting, la programación y las reglas de display funcionan igual que en banners y surveys — el servidor decide quién ve un tour, el SDK decide dónde y cuándo.

Un tour jamás rompe tu página: un selector que no coincide con nada simplemente salta ese paso, y todos los listeners se limpian cuando el tour termina.

Construir un tour

En el panel, ve a In-app → New unit → Tour. Cada paso tiene:

Campo	Qué hace
Texto	Lo que dice el paso (más un título e imagen opcionales)
Ancla	Un selector CSS del elemento al que apunta el paso. Vacío = modal centrado
Posición	De qué lado del ancla aparece la tarjeta (top, bottom, left, right, o centrada)
Avance	Botón Next (default), o avanzar cuando el visitante hace clic en el propio elemento anclado

Los pasos avanzan en orden; los visitantes pueden retroceder, y se muestra un control Skip salvo que lo desactives. Los tours usan por defecto frecuencia once: un visitante que terminó (o saltó) un tour no lo vuelve a ver.

Anclar pasos: el selector de elementos

No tienes que escribir selectores a mano. Junto al campo de ancla de cada paso, Pick on your site abre tu página en una pestaña nueva con la barra del picker de Kilden activa — haz clic en el elemento que quieres y el selector aterriza de vuelta en el editor.

El picker sintetiza el selector más estable que encuentra, prefiriendo (en orden):

1. Un id estable
2. Un atributo data-* — con data-kilden-tour por encima de todos
3. Atributos semánticos (aria-label, name, role, href)
4. El texto visible del elemento
5. Posición estructural (cadenas nth-child)

Las clases utilitarias de CSS (Tailwind y compañía) jamás se usan: cambian con cada rediseño. Los niveles 4 y 5 se marcan como débiles — funcionan, pero dependen de textos o layout que pueden cambiar.

Elegir elementos es solo para autores: la barra se activa con un ticket de corta vida firmado por el panel y verificado server-side antes de montarse. Los visitantes nunca la ven ni la descargan.

data-kilden-tour: el ancla permanente

El ancla más confiable es una que existe para el tour. Agrega un atributo data-kilden-tour a los elementos a los que apuntas:

<button data-kilden-tour="take-a-number">Take a number</button>

El ancla del paso queda entonces [data-kilden-tour="take-a-number"] — inmune a rediseños, cambios de texto y reorganizaciones del DOM. Cuando el picker solo encuentra un ancla débil, sugiere el atributo exacto a agregar. Si puedes editar tu markup, hazlo: es un atributo y el ancla no se rompe nunca.

Anclas por texto

Cuando la mejor ancla disponible es el texto visible del elemento, el picker emite la extensión :kilden-text("…") de Kilden sobre una base CSS:

button:kilden-text("Take a number")

El SDK resuelve el selector base y filtra por el texto propio del elemento (recortado). Ten presente que esto se rompe apenas cambia el texto (traducciones incluidas) — prefiere data-kilden-tour cuando puedas.

Previsualizar un tour

Iterar sobre un tour activo era doloroso: una visita real lo marca como visto y no vuelve a mostrarse. Preview on my site (bajo la vista previa del editor) lo resuelve:

• Tu página se abre con el tour renderizado exactamente como está editado ahora — incluso cambios sin guardar.
• Nada se marca como visto, no se registran eventos de analytics, y las reglas de frecuencia/URL se omiten: preview significa «muéstramelo ahora».
• Una barra flotante Kilden preview ofrece Replay, así que puedes ver el tour todas las veces que necesites.
• La previsualización arranca en el paso que estabas editando, no en el paso uno.
• Lo que el SDK habría trackeado se espeja en la consola del navegador ([kilden] preview (not tracked): …).

Como el picker, la previsualización se autoriza con un ticket firmado de corta vida — un visitante no puede activarla editando la URL.

Anclas rotas

Si tu página cambia y el selector de un paso deja de coincidir, el tour degrada con gracia: el paso espera hasta 3 segundos (por las SPAs que renderizan tarde) y luego se salta. Los visitantes nunca quedan atrapados — pero el paso desaparece en silencio.

El panel vigila esto. El alcance de cada paso anclado se mide ($tour_step_viewed por paso), y cuando un paso muestra alcance cero mientras el tour sigue comenzando, el editor lo marca con Anchor may be broken — distinguiendo «nunca coincidió» de «dejó de coincidir hace poco» (la firma de un deploy que renombró el elemento). Vuelve a elegir el elemento o, mejor, dale un atributo data-kilden-tour.

Medir

Los tours emiten eventos $ que puedes consultar como cualquier otro dato:

Evento	Cuándo
$tour_started	Se renderizó el primer paso
$tour_step_viewed	Se renderizó un paso ($step_index, $step_id)
$tour_completed	El visitante llegó al final
$tour_dismissed	El visitante lo saltó

La página de detalle de la unit muestra un funnel de drop-off por paso (personas únicas por paso, con el id inmutable del paso como llave).