En esta guía, le mostraremos algunas funcionalidades básicas de CrowdHandler, crearemos su primera Sala de Espera y conectaremos la Sala de Espera a su sitio.

Primera conexión

La primera vez que acceda a su panel de administración, debería ver algo como esto:

CrowdHandler no está viendo ningún tráfico a través de su dominio en este momento, de ahí la planta rodadora. Tu cuenta es nueva, aún no has instalado el código en tu sitio web y necesitas una Sala de Espera para proteger todas las URL de tu dominio.

La Sala de Espera en sí es una página web que CrowdHandler aloja para usted; cualquier visitante de la Sala de Espera será redirigido finalmente a su sitio web. Siga leyendo para saber más sobre cómo liberamos a los visitantes a sus páginas.

Crear una sala de espera

Haga clic en el botón Añadir sala y accederá a la pantalla Añadir sala.

Haz clic en el botón Crear sala. Volverás al panel de control.

Echa un vistazo a la sala de espera

Tu nueva Sala de Espera aparecerá en el panel de control. Está preparada para proteger todas las URL de tu dominio, y ya está activa. ¿No nos crees? Haz clic en el enlace de la sala de espera y se abrirá en una nueva pestaña.

Eres el primer visitante de la sala de espera (bueno, es nueva), así que deberías ver algo así: Estado inicial de la sala de espera

Eres el número uno porque eres el único usuario que intenta acceder a tu sitio web a través de esta sala de espera. Pero vas a tener que esperar mucho tiempo, porque cuando configuramos tu dominio, pusimos la tasa de entrada a 0. Queríamos que echaras un vistazo a la sala de espera, y si hubiéramos puesto la tasa más alta te habrían dejado pasar directamente.

Consulta el cuadro de mandos

Vuelva al Panel de control en el Panel de administración. En aproximadamente un minuto debería ver algo como esto:

No más plantas rodadoras. Ese punto en la parte superior de la línea eres tú, esperando. El punto rojo de la parte inferior de la línea está a cero, lo que indica que no hay usuarios activos, sólo en espera.

Pongamos en marcha la cola.

Convirtamos a ese usuario en espera en un usuario activo. Adelante, fija la tasa a algo mayor que 0. Aumenta el deslizador de tasa a 10.

Ahora, si vuelve a la pestaña de su sala de espera, debería ver que se le redirige a su sitio web en menos de un minuto.

Éxito de la prueba de reorientación de la sala de espera

Y si vas al salpicadero y esperas menos de un minuto, deberías ver que el gráfico se actualiza así:

Ahora no tenemos usuarios en espera, y uno activo (¡tú!).

La configuración de la tasa controla el número de usuarios que permitiremos entrar en su sitio cada minuto.

Entender la tarifa y las colas

Tomémonos un tiempo para considerar qué es la "tasa" y cómo funciona una cola con CrowdHandler. Aquí está la clave a tener en cuenta:

Usted fija el ritmo que puede soportar, y la sala de espera se activa cuando es necesario y no lo hace cuando no lo es.

Contamos cada usuario que entra en su sitio y llevamos la cuenta de cuántos entran por minuto. La tasa puede ser tan baja como 1 por minuto, o tan alta como lo permita su plan. Muchos clientes de CrowdHandler no saben qué tasa pueden manejar, y tenemos una función de autoajuste que lo calcula en tiempo real.

  • Mientras el número de usuarios se mantenga por debajo de su tarifa, permitimos el paso de los usuarios sin marcar. 
  • Una vez que el número de usuarios supera su tarifa, empezamos a redirigir a los usuarios a la sala de espera.
  • A continuación, se les permite volver a su sitio a la tasa. 

Eso es. Esa es la relación entre la tarifa y la sala de espera. También merece la pena saber cómo evoluciona esto a lo largo de un periodo más largo:

  • Si el número de usuarios que intentan acceder a su sitio supera sistemáticamente su tarifa, se estarán sumando a una cola que crece con el tiempo. 
  • Una vez que el número de usuarios que intentan acceder a su sitio web descienda por debajo de su tasa, la cola se reducirá hasta que la sala de espera se desactive.

Enviar tráfico a CrowdHandler

Así pues, hemos aprendido que la Sala de Espera retendrá a los visitantes y los enviará a su sitio web de forma controlada. ¡Estupendo! Pero, ¿cómo protege esto al sitio? Bueno, cuando el tráfico a su sitio está excediendo la tasa, los visitantes deben ser redirigidos desde su sitio web a la Sala de Espera - CrowdHandler puede entonces retenerlos y liberarlos de una manera controlada.

Hay varias formas de redirigir el tráfico a CrowdHandler:

Su tráfico no será enviado a la Sala de Espera hasta que añada una de estas integraciones para desviar a los visitantes a la Sala de Espera.

Ahora es el momento de seleccionar su aplicación.

Para esta configuración rápida elegiremos JavaScript. 

La forma de añadir el JavaScript a su sitio depende de cómo esté configurado.Tenemos una guía dedicada a la instalación del javascript. Deberías leerla detenidamente. En su panel de control, verá un fragmento de JavaScript, listo para ser puesto en sus páginas web, se verá algo como esto:

<script src="https://wait.crowdhandler.com/js/latest/main.js?id=12533683a055c52b09e383c50a3e5c65b6a33ba17629af3166d6dedd647020a6"></script>

Puede hacer clic en el icono del portapapeles para copiar las etiquetas de script.

Si estás editando código o marcado, querrás poner el script antes de cualquier otra etiqueta script.

Posición sugerida del fragmento JS en HTML

Si utiliza un constructor web (servicios como SquareSpace), busque una opción como "inyección de código" o "HTML personalizado" en el panel de control o en el editor: querrá colocar la secuencia de comandos en el encabezado si existe una opción para ello, y antes de cualquier otra secuencia de comandos.

ejemplo de inyección de código en un constructor web como SquareSpace

Ahora, para ver si el código se ha instalado correctamente, vuelvo a mi sitio web y hago clic en algunas páginas. Cuando vuelvo al panel de control ahora se ve así:

Vista inicial del salpicadero tras la instalación de JS

Este gráfico muestra cuándo abandonó la sala de espera.

Consejo 4: La integración de JavaScript es rápida y cómoda, y cumple los requisitos de muchos clientes. Pero nunca puede ser completamente segura. Por ello, le recomendamos que, una vez en funcionamiento, busque una integración basada en API del lado del servidor. Como alternativa, considere una integración basada en DNS, CDN(Cloudflare, CloudFront) o WordPress para mayor seguridad y comodidad.

Cambiar el mensaje de la sala de espera

Cuando sus visitantes son redirigidos a la sala de espera de CrowdHandler, querrán entender qué ha pasado y dónde están. Puede proporcionar algo más de contexto editando la sala de espera. En su panel de control, seleccione el icono de edición:

Botón de edición de la sala de espera

Aquí puede cambiar el nombre de la sala de espera y el mensaje:

Hay más información sobre lo que hace cada uno de estos campos en el artículo de ayuda: Editar una sala de espera. También hay opciones para personalizar la plantilla (sólo planes de pago) o añadir su propio logotipo (todos los planes) que se puede leer aquí: Añadir plantillas.

Para comprobar que esto ha funcionado:

  1. Vuelve a poner a 0 la tasa de entrada en el cuadro de mandos
  2. Abre una nueva pestaña de incógnito/privada y visita mi sitio en ella. (Podrías ir directamente a la sala de espera, pero esto también significa que tienes que comprobar que te envían a la sala de espera correctamente).

El nombre de la sala se ha actualizado y ahora muestra el mensaje personalizado:

Sala de espera personalizada con éxitoSugerencia 5: si ya ha pasado por la sala de espera, tendrá que realizar la prueba utilizando una sesión de incógnito o privada, o en un equipo diferente.

Conclusión

En esta guía hemos demostrado:

  • La sala de espera inicial

  • Cómo puede utilizarse la configuración de tarifas para controlar la redirección desde la Sala de Espera a su sitio web

  • Cómo la integración dirige el tráfico a la sala de espera

  • Cómo personalizar la sala de espera para dar información significativa a sus visitantes

A continuación se indican algunos pasos que puede dar para comprender mejor el producto:

1. Integración de JavaScript

2. Edición de una sala de espera

3. Mecánica de colas

4. Aspectos básicos de la integración de API