Publicar una landing HTML en Cloudflare Workers

Paso 1 — Qué necesitas tener listo

Antes de empezar, reúne tres cosas:

• Un dominio — comprado donde quieras (Namecheap, GoDaddy, etc.). No hace falta que esté ya en Cloudflare: lo movemos allí en el Paso 2.
• Tu landing en HTML, dentro de una carpeta en tu PC. Normalmente contiene:
  • el archivo index.html (la página)
  • una carpeta images/ con las imágenes
• Una cuenta de RoyLead en la que estés logueado.

💡 ¿Todavía no tienes la landing? Créala con IA en poco tiempo: Crea una landing HTML con Claude o ChatGPT ↗. Vuelve aquí con la carpeta lista.

💡 Todo el código de tracking de RoyLead va dentro de index.html (lo vemos en el Paso 4): no hace falta ningún archivo de configuración separado.

💡 Mantén todos los archivos dentro de una sola carpeta: es la que subiremos a Cloudflare en el Paso 5. Si las imágenes están en una subcarpeta images/, asegúrate de que el HTML las referencia con la ruta correcta (p. ej. images/foto.jpg).

Paso 2 — Prepara el dominio (dos cosas)

Tu dominio tiene que estar listo en dos frentes. Son dos guías por separado — haz ambas y luego vuelve aquí:

1. En Cloudflare — el dominio debe estar gestionado por Cloudflare (nameservers apuntados), para poder alojar en él la landing. → Añadir un dominio a Cloudflare ↗
2. En RoyLead — el dominio debe añadirse y verificarse en RoyLead, para que los leads y las conversiones se atribuyan correctamente. → Cómo conectar un nuevo dominio ↗

💡 Las dos cosas encajan bien: el registro de verificación que RoyLead te pide (un TXT) lo añades directamente en el DNS de Cloudflare, donde ahora gestionas el dominio. En el tipo de sitio elige HTML / Custom.

💡 Si el dominio ya está activo en Cloudflare y verificado en RoyLead, salta directamente al Paso 3.

Vuelve aquí cuando el dominio esté Activo en Cloudflare y Verificado en RoyLead.

Paso 3 — Crea la landing en RoyLead y consigue las claves

Aquí conseguimos los dos datos que usará el tracker: el Landing Page ID y tu API Key.

1. En el menú ve a Landing Pages y haz click en Conectar landing HTML.
2. Rellena Nombre (p. ej. "Promo Verano") y URL (la ruta que tendrá en tu dominio, p. ej. https://tudominio.com/promo), selecciona el dominio y guarda.
3. En la lista, junto a la landing, haz click en el icono de copiar cerca de su ID para copiar el Landing Page ID. Guárdalo a un lado.

4. Ve a Ajustes → API Key y copia la clave con el icono de copiar que hay al lado (o haz click en Regenerar API Key para generar una nueva).

🔒 La API Key identifica tu cuenta: no la compartas. Si la regeneras, tendrás que actualizarla en las landings que la usan.

Al final de este paso tienes en la mano dos cosas: el Landing Page ID y la API Key. Necesitas ambas en el Paso 4.

Paso 4 — Pega el tracker dentro de `index.html`

Es el único trozo de "código", pero es solo copiar y pegar. Abre index.html con un editor de texto (vale VS Code, Notepad++, incluso el Bloc de notas).

1. Donde quieres el formulario → pon esto donde debe aparecer el formulario (también en varios puntos de la página):

<div class="lp-form-container"></div>

El formulario lo dibuja y lo estiliza el tracker por sí solo: tú solo pones el contenedor, en el punto que prefieras.

2. Justo antes de </body> → pega el bloque tracker y rellénalo con los datos del Paso 3:

<!-- RoyLead Tracker -->
<script>
  window.RoyLeadConfig = {
    captureUrl: "https://capture.roylead.com",
    apiKey: "TU_API_KEY",
    landingPageId: "ID_DE_TU_LANDING",
    thankYouPage: "https://tudominio.com/ruta/gracias"
  };
</script>
<script src="https://capture.roylead.com/tracker.js"></script>

3. Guarda el archivo.

⚠️ Tres cosas a las que prestar atención: sustituye TU_API_KEY por la clave del Paso 3, ID_DE_TU_LANDING por el ID copiado de la lista, y recuerda la coma al final de cada línea dentro de las llaves (excepto la última).

💡 Si tu index.html ya tiene otros scripts (banner de cookies, píxeles, etc.), no hay problema: lo importante es que el bloque RoyLead Tracker esté antes de </body>. La página indicada en thankYouPage la preparamos en el Paso 7.

Paso 5 — Crea el Worker y sube los archivos a Cloudflare

Ahora ponemos los archivos online en tu cuenta de Cloudflare. Nada de terminal ni de GitHub: simplemente subes la carpeta.

1. En dash.cloudflare.com, en el menú de la izquierda abre Compute (Workers) y haz click en Crear.
2. En la pantalla "Ship something new" elige la última opción: Upload your static files.

3. Se abre la pantalla "Subir e implementar". En el recuadro haz click en carpeta (o arrastra y suelta) y selecciona la carpeta entera de tu landing — así index.html y la subcarpeta images/ se suben juntos, con la estructura correcta.

⚠️ Sube la carpeta, no solo index.html: de lo contrario las imágenes (que están en images/) no se suben y la página se ve sin fotos.

4. Cloudflare lista todos los archivos subidos (index.html + la carpeta images/) y sugiere un nombre de Worker ya listo: puedes dejarlo tal cual. Haz click en Implementar.

5. En pocos segundos la landing está online en una dirección de Cloudflare tipo nombre-worker.tu-subdominio.workers.dev. Puedes abrirla ya con Visitar para comprobar que se ve bien.

💡 Esta dirección .workers.dev funciona pero no es tu dominio. En el Paso 6 conectamos tu dominio real.

Paso 6 — Conecta tu dominio al Worker

Ahora hacemos que la landing se sirva en tu dirección. En la página del Worker abre la pestaña Dominios.

En "Dominios personalizados y rutas" haz click en Añadir dominio.

💡 Usa Añadir dominio (dominio personalizado), no "Añadir ruta": el dominio personalizado sirve la landing de forma limpia, con las imágenes funcionando de inmediato.

Se abre "Conectar dominio" con la lista de tus dominios en Cloudflare. Elige el dominio en el que quieres publicar.

💡 Consejo: conecta la landing a un subdominio dedicado, p. ej. promo.tudominio.com, en lugar del dominio "desnudo". Así puedes publicar muchas landings en el mismo dominio (una por subdominio: promo., oferta., etc.) y cada una queda independiente.

Se abre "Conectar a tudominio.com": en el campo Subdominio (opcional) escribe el subdominio que quieras (p. ej. promo → se convierte en promo.tudominio.com). Si lo dejas vacío, usa el dominio desnudo. Luego haz click en Añadir dominio.

Listo: el dominio aparece en la lista "Dominios personalizados y rutas" con el entorno Producción. En unos minutos (el tiempo del certificado SSL) tu landing está en vivo en tu dirección.

💡 La dirección de tu landing ahora es el subdominio (p. ej. https://promo.tudominio.com). Tenlo en cuenta: lo necesitas para la página de agradecimiento (Paso 7) y para las pruebas.

Paso 7 — Página de agradecimiento

Tras enviar el formulario, el usuario debe acabar en una página "Gracias": hace falta para la experiencia de usuario y porque RoyLead usa esa URL como referencia de la conversión. Como alojas tú los archivos, la página la pones en la misma carpeta:

1. Crea un archivo gracias.html en la carpeta de la landing (basta una página simple: "¡Gracias! Te contactamos en breve").
2. En el bloque tracker dentro de index.html (Paso 4) configura thankYouPage con la dirección real en tu subdominio:

thankYouPage: "https://promo.tudominio.com/gracias.html"

3. Vuelve a subir la carpeta actualizada al Worker: desde la página del Worker haz click en New deployment → Upload your static files y arrastra de nuevo la carpeta (ahora con index.html actualizado + gracias.html).

⚠️ Sin thankYouPage configurado hacia una página real, tras enviar el formulario el usuario acaba en una dirección que no existe (404). Pon siempre una página real tuya.

Paso 8 — Verificación final

Ya casi está. Comprobemos que todo funciona:

1. Abre la landing en tu dirección (p. ej. https://promo.tudominio.com). Para probar el tracking añade un parámetro a la URL, p. ej. ?fbclid=test123&utm_source=facebook.
2. Comprueba que las imágenes se ven y que el formulario aparece donde pusiste el <div class="lp-form-container">.
3. Rellena y envía el formulario de prueba: debes acabar en la página de gracias.
4. Ve a RoyLead → Leads: el lead de prueba debe aparecer ahí (con los parámetros de la campaña, si los añadiste a la URL).

Ir a Leads ↗

💡 Si el lead llega y ves los parámetros en Leads, la integración está completa. A partir de aquí solo tienes que cambiar los archivos y volver a subir la carpeta (Paso 7, punto 3) cada vez que actualices la landing.

Solución de problemas

• La página se ve sin imágenes → subiste solo index.html en lugar de la carpeta entera. Vuelve a subir la carpeta completa (Paso 5).
• El formulario no aparece → falta el <div class="lp-form-container"></div> en el HTML, o el bloque tracker no está antes de </body> (Paso 4).
• El lead no llega / "no autorizado" → apiKey incorrecta, o dejada como TU_API_KEY (Paso 4).
• Tras enviar me sale una página 404 → thankYouPage no configurado o dirección incorrecta (Paso 7).
• El dominio no abre → el certificado SSL puede tardar unos minutos tras conectar el dominio (Paso 6); vuelve a intentarlo en breve.