Cambiar la página durante el directo

El día de un directo la misma dirección tiene que servir para tres cosas distintas: la gente que llega antes de tiempo, la que entra mientras hablas y la que se queda al final, cuando presentas tu oferta. Lo normal es resolverlo con tres páginas y cambiar los enlaces a mano a mitad del evento, con el riesgo de que alguien se quede mirando la pantalla equivocada.

Con las escenas es una sola dirección. Tú decides qué se ve, y cambia al instante en todos los navegadores que la tengan abierta.

Cómo funciona

Tu página declara las escenas que quiere tener. Los nombres los eliges tú: cuenta_atras, directo, oferta, replay, lo que encaje con tu evento.

Durante el directo abres tu vista de moderador y ahí tienes una barra con un botón por escena. Pulsas uno y la página cambia para todos.

Ponerlo en tu página

Marca cada bloque con data-stage y deja que una clase en el body decida cuál se ve:

<section data-stage="cuenta_atras">…falta poco, deja la página abierta…</section>
<section data-stage="directo">…aquí va el vídeo…</section>
<section data-stage="oferta">…aquí va tu oferta…</section>

[data-stage] { display: none; }
body.stage-cuenta_atras [data-stage~="cuenta_atras"],
body.stage-directo     [data-stage~="directo"],
body.stage-oferta      [data-stage~="oferta"] { display: block; }

Un bloque puede estar en varias escenas a la vez: data-stage="directo oferta" se ve en las dos, que es lo típico del reproductor de vídeo.

El último paso es escuchar los cambios. Al cargar preguntas en qué escena estáis, y después te quedas a la escucha:

<script>
var API = "https://track.alloop.ch/chat/TU-CUENTA/TU-SALA";

function aplicar(escena) { document.body.className = "stage-" + escena; }

fetch(API + "/stage").then(function (r) { return r.json(); })
  .then(function (d) { if (d.stage) aplicar(d.stage); });

new EventSource(API + "/stream").onmessage = function (ev) {
  var d = JSON.parse(ev.data);
  if (d.type === "stage") aplicar(d.stage);
};
</script>

Es el mismo canal que usa el chat en directo, así que si ya lo tienes puesto no añades ninguna conexión nueva.

La barra de botones

En tu vista de moderador la barra aparece en cuanto hay escenas que mostrar, con el nombre de cada una y marcada la que se está viendo ahora mismo.

La primera vez tienes que decirle cuáles son las tuyas, porque alloop no puede adivinar cómo has llamado a las escenas de tu página. Se añaden a la dirección:

track.alloop.ch/moderador/TU-CUENTA/TU-SALA?escenas=cuenta_atras,directo,oferta

Guarda ese enlace en favoritos y ya lo tienes para el día del evento.

Qué se mide

Cada cambio de escena queda registrado, así que después puedes ver cuánta gente había en cada momento del evento y qué hizo en cada tramo: cuántos estaban cuando enseñaste la oferta, cuántos llegaron tarde y entraron directamente a ella, y desde qué escena salieron los que compraron.

Preguntas que nos hacen

¿Y si a alguien le falla internet justo en el cambio? La página vuelve a preguntar por su cuenta cada poco tiempo. Si el cambio no le llegó en el momento, lo recoge en menos de medio minuto.

¿Puedo volver atrás? Sí. Las escenas no van en un solo sentido: puedes volver a la anterior tantas veces como quieras. Si te equivocas de botón, pulsas el correcto y ya está.

¿Sirve para otra cosa que no sea un directo? Sí. Es útil siempre que quieras cambiar lo que ve la gente en un momento concreto sin tocar la página: abrir un carrito a una hora, revelar un precio, cerrar unas inscripciones.

¿Quién puede cambiar la escena? Solo tú o quien tenga tu enlace de moderador. Es el mismo permiso que modera el chat, y no abre nada más de tu cuenta.