Pubblicare una landing HTML su Cloudflare Workers

Cosa ti serve avere pronto

Prima di iniziare, metti insieme tre cose:

• Un dominio — comprato dove vuoi (Namecheap, GoDaddy, ecc.). Non serve sia già su Cloudflare: lo spostiamo nello Step 2.
• La tua landing in HTML, dentro una cartella sul PC. Tipicamente contiene:
  • il file index.html (la pagina)
  • una cartella images/ con le immagini
• Un account RoyLead dove sei loggato.

💡 Non hai ancora la landing? Creala con l'AI in poco tempo: Crea una landing HTML con Claude o ChatGPT ↗. Torni qui con la cartella pronta.

💡 Tutto il codice di tracciamento RoyLead va dentro index.html (lo vediamo allo Step 4): non serve nessun file di configurazione separato.

💡 Tieni tutti i file dentro un'unica cartella: è quella che caricheremo su Cloudflare nello Step 5. Se le immagini sono in una sottocartella images/, assicurati che nell'HTML siano richiamate con il percorso giusto (es. images/foto.jpg).

Prepara il dominio (due cose)

Il tuo dominio deve essere pronto su due fronti. Sono due guide a sé, falle entrambe e poi torna qui:

1. Su Cloudflare — il dominio dev'essere gestito da Cloudflare (nameserver puntati), così potremo ospitarci la landing. → Aggiungere un dominio a Cloudflare ↗
2. Su RoyLead — il dominio va aggiunto e verificato in RoyLead, così i lead e le conversioni vengono attribuiti correttamente. → Come collegare un nuovo dominio ↗

💡 Le due cose si incastrano bene: il record di verifica che RoyLead ti chiede (un TXT) lo aggiungi proprio nel DNS di Cloudflare, dove ormai gestisci il dominio. Nel tipo di sito scegli HTML / Custom.

💡 Se il dominio è già attivo su Cloudflare e verificato in RoyLead, salta pure allo Step 3.

Torna qui quando il dominio è Attivo su Cloudflare e Verificato in RoyLead.

Crea la landing in RoyLead e prendi le chiavi

Qui prendiamo i due dati che il tracker userà: il Landing Page ID e la tua API Key.

1. Nel menu vai su Landing Pages e clicca Collega Landing Page HTML.
2. Compila Nome (es. "Promo Estate") e URL (il percorso che avrà sul tuo dominio, es. https://tuodominio.com/promo), seleziona il dominio e salva.
3. Nella lista, accanto alla landing, clicca l'icona di copia vicino al suo ID per copiare il Landing Page ID. Tienilo da parte.

4. Vai in Impostazioni → API Key e copia la chiave con l'icona di copia accanto (o clicca Rigenera API Key per generarne una nuova).

🔒 L'API Key identifica il tuo account: non condividerla. Se la rigeneri, dovrai aggiornarla nelle landing che la usano.

Alla fine di questo step hai in mano due cose: il Landing Page ID e l'API Key. Servono entrambe allo Step 4.

Incolla il tracker dentro `index.html`

È l'unico pezzo di "codice", ma è solo copia-incolla. Apri index.html con un editor di testo (va bene VS Code, Notepad++, perfino il Blocco note).

1. Dove vuoi il form → metti questo dove deve apparire il modulo (anche in più punti della pagina):

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

Il form lo disegna e lo stila il tracker da solo: tu metti solo il contenitore, nel punto che preferisci.

2. Subito prima di </body> → incolla il blocco tracker e riempilo con i dati dello Step 3:

<!-- RoyLead Tracker -->
<script>
  window.RoyLeadConfig = {
    captureUrl: "https://capture.roylead.com",
    apiKey: "LA_TUA_API_KEY",
    landingPageId: "ID_DELLA_TUA_LANDING",
    thankYouPage: "https://tuodominio.com/percorso/grazie"
  };
</script>
<script src="https://capture.roylead.com/tracker.js"></script>

3. Salva il file.

⚠️ Tre cose a cui stare attenti: sostituisci LA_TUA_API_KEY con la chiave dello Step 3, ID_DELLA_TUA_LANDING con l'ID copiato dalla lista, e ricordati la virgola alla fine di ogni riga dentro le graffe (tranne l'ultima).

💡 Se il tuo index.html ha già altri script (cookie banner, pixel, ecc.), nessun problema: l'importante è che il blocco RoyLead Tracker stia prima di </body>. La pagina indicata in thankYouPage la prepariamo allo Step 7.

Crea il Worker e carica i file su Cloudflare

Adesso mettiamo i file online sul tuo account Cloudflare. Niente terminale né GitHub: si carica la cartella e basta.

1. Su dash.cloudflare.com, nel menu a sinistra apri Compute (Workers) e clicca Crea.
2. Nella schermata "Ship something new" scegli l'ultima opzione: Upload your static files.

3. Si apre la schermata "Carica e distribuisci". Nel riquadro clicca su cartella (oppure trascina) e seleziona l'intera cartella della tua landing — così index.html e la sottocartella images/ vengono caricati insieme, con la struttura giusta.

⚠️ Carica la cartella, non solo index.html: altrimenti le immagini (che stanno in images/) non vengono caricate e la pagina si vede senza foto.

4. Cloudflare elenca tutti i file caricati (index.html + la cartella images/) e propone un Nome Worker già pronto: puoi lasciarlo così. Clicca Distribuisci.

5. In pochi secondi la landing è online su un indirizzo Cloudflare tipo nome-worker.tuo-sottodominio.workers.dev. Puoi già aprirla con Visita per controllare che si veda bene.

💡 Questo indirizzo .workers.dev funziona ma non è il tuo dominio. Allo Step 6 ci colleghiamo il tuo dominio vero.

Collega il tuo dominio al Worker

Adesso facciamo servire la landing sul tuo indirizzo. Sulla pagina del Worker apri la tab Domini.

In "Domini personalizzati e percorsi" clicca Aggiungi dominio.

💡 Usa Aggiungi dominio (dominio personalizzato), non "Aggiungi percorso": il dominio personalizzato serve la landing in modo pulito, con le immagini che funzionano subito.

Si apre "Connetti dominio" con l'elenco dei tuoi domini su Cloudflare. Scegli il dominio su cui vuoi pubblicare.

💡 Consiglio: collega la landing a un sottodominio dedicato, es. promo.tuodominio.com, invece che al dominio "nudo". Così puoi pubblicare tante landing sullo stesso dominio (una per sottodominio: promo., saldi., ecc.) e ognuna resta indipendente.

Si apre "Connetti a tuodominio.com": nel campo Sottodominio (opzionale) scrivi il sottodominio che vuoi (es. promo → diventa promo.tuodominio.com). Se lo lasci vuoto, usa il dominio nudo. Poi clicca Aggiungi dominio.

Fatto: il dominio compare nell'elenco "Domini personalizzati e percorsi" con ambiente Produzione. In pochi minuti (il tempo del certificato SSL) la tua landing è live sul tuo indirizzo.

💡 L'indirizzo della tua landing ora è il sottodominio (es. https://promo.tuodominio.com). Tienilo a mente: ti serve per la pagina di ringraziamento (Step 7) e per i test.

Pagina di ringraziamento

Dopo l'invio del form l'utente deve finire su una pagina "Grazie": serve per l'esperienza utente e perché RoyLead usa quell'URL come riferimento della conversione. Visto che ospiti tu i file, la pagina la metti nella stessa cartella:

1. Crea un file grazie.html nella cartella della landing (basta una pagina semplice: "Grazie! Ti contattiamo a breve").
2. Nel blocco tracker dentro index.html (Step 4) imposta thankYouPage con l'indirizzo reale sul tuo sottodominio:

thankYouPage: "https://promo.tuodominio.com/grazie.html"

3. Ricarica la cartella aggiornata sul Worker: dalla pagina del Worker clicca Nuova distribuzione → Upload your static files e ritrascina la cartella (ora con index.html aggiornato + grazie.html).

⚠️ Senza thankYouPage impostato su una pagina reale, dopo l'invio l'utente finisce su un indirizzo che non esiste (404). Mettici sempre una tua pagina vera.

Verifica finale

Quasi fatto. Controlliamo che tutto giri:

1. Apri la landing sul tuo indirizzo (es. https://promo.tuodominio.com). Per testare il tracciamento aggiungi un parametro all'URL, es. ?fbclid=test123&utm_source=facebook.
2. Controlla che le immagini si vedano e che il form compaia dove hai messo il <div class="lp-form-container">.
3. Compila e invia il form di prova: devi finire sulla pagina grazie.
4. Vai in RoyLead → Lead: il lead di prova deve comparire lì (con i parametri della campagna, se li hai aggiunti all'URL).

Vai ai Lead ↗

💡 Se il lead arriva e nei Lead vedi i parametri, l'integrazione è completa. Da qui in poi ti basta cambiare i file e ricaricare la cartella (Step 7, punto 3) ogni volta che aggiorni la landing.