Eine HTML-Landing auf Cloudflare Workers veröffentlichen

Schritt 1 — Was Sie bereit haben müssen

Bevor Sie starten, sammeln Sie drei Dinge:

• Eine Domain — gekauft, wo Sie wollen (Namecheap, GoDaddy usw.). Sie muss noch nicht auf Cloudflare sein: Das erledigen wir in Schritt 2.
• Ihre HTML-Landing, in einem Ordner auf Ihrem Computer. Er enthält typischerweise:
  • die Datei index.html (die Seite)
  • einen images/-Ordner mit den Bildern
• Ein RoyLead-Konto, in dem Sie eingeloggt sind.

💡 Haben Sie die Landing Page noch nicht? Erstellen Sie sie in kürzester Zeit mit KI: Eine HTML-Landing mit Claude oder ChatGPT erstellen ↗. Kommen Sie mit dem fertigen Ordner hierher zurück.

💡 Der gesamte RoyLead-Tracking-Code kommt in index.html (das sehen wir in Schritt 4): keine separate Konfigurationsdatei nötig.

💡 Halten Sie alle Dateien in einem einzigen Ordner: Das ist der, den wir in Schritt 5 zu Cloudflare hochladen. Wenn die Bilder in einem images/-Unterordner liegen, stellen Sie sicher, dass das HTML sie mit dem richtigen Pfad referenziert (z. B. images/foto.jpg).

Schritt 2 — Domain vorbereiten (zwei Dinge)

Ihre Domain muss auf zwei Fronten bereit sein. Das sind zwei eigenständige Anleitungen — machen Sie beide und kommen Sie dann hierher zurück:

1. Auf Cloudflare — die Domain muss von Cloudflare verwaltet werden (Nameserver umgestellt), damit wir die Landing Page darauf hosten können. → Eine Domain zu Cloudflare hinzufügen ↗
2. Auf RoyLead — die Domain muss in RoyLead hinzugefügt und verifiziert werden, damit Leads und Conversions korrekt zugeordnet werden. → Eine neue Domain verbinden ↗

💡 Die beiden passen gut zusammen: Den Verifizierungseintrag, den RoyLead verlangt (ein TXT-Record), fügen Sie direkt im DNS von Cloudflare hinzu, wo Sie die Domain jetzt verwalten. Wählen Sie beim Sitetyp HTML / Custom.

💡 Ist die Domain bereits auf Cloudflare aktiv und in RoyLead verifiziert, springen Sie direkt zu Schritt 3.

Kommen Sie hierher zurück, sobald die Domain auf Cloudflare Aktiv und in RoyLead Verifiziert ist.

Schritt 3 — Landing Page in RoyLead erstellen und die Schlüssel holen

Hier holen wir die zwei Werte, die der Tracker verwendet: die Landing Page ID und Ihren API Key.

1. Gehen Sie im Menü zu Landing Pages und klicken Sie auf HTML-Landing verbinden.
2. Füllen Sie Name aus (z. B. "Sommeraktion") und URL (den Pfad, den sie auf Ihrer Domain haben wird, z. B. https://ihredomain.com/promo), wählen Sie die Domain aus und speichern Sie.
3. Klicken Sie in der Liste neben der Landing Page auf das Kopiersymbol bei ihrer ID, um die Landing Page ID zu kopieren. Legen Sie sie beiseite.

4. Gehen Sie zu Einstellungen → API Key und kopieren Sie den Schlüssel mit dem Kopiersymbol daneben (oder klicken Sie auf API Key neu generieren, um einen neuen zu erstellen).

🔒 Der API Key identifiziert Ihr Konto: teilen Sie ihn nicht. Wenn Sie ihn neu generieren, müssen Sie ihn in den Landing Pages aktualisieren, die ihn verwenden.

Am Ende dieses Schritts haben Sie zwei Dinge in der Hand: die Landing Page ID und den API Key. Beide brauchen Sie in Schritt 4.

Schritt 4 — Tracker in `index.html` einfügen

Das ist das einzige Stück "Code", aber es ist reines Copy-Paste. Öffnen Sie index.html mit einem Texteditor (VS Code, Notepad++, sogar Notepad funktionieren).

1. Wo Sie das Formular wollen → setzen Sie dies dorthin, wo das Formular erscheinen soll (auch an mehreren Stellen der Seite):

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

Das Formular zeichnet und stylt der Tracker selbst: Sie platzieren nur den Container, wo immer Sie möchten.

2. Direkt vor </body> → fügen Sie den Tracker-Block ein und befüllen Sie ihn mit den Daten aus Schritt 3:

<!-- RoyLead Tracker -->
<script>
  window.RoyLeadConfig = {
    captureUrl: "https://capture.roylead.com",
    apiKey: "IHR_API_KEY",
    landingPageId: "IHRE_LANDING_PAGE_ID",
    thankYouPage: "https://ihredomain.com/pfad/danke"
  };
</script>
<script src="https://capture.roylead.com/tracker.js"></script>

3. Speichern Sie die Datei.

⚠️ Drei Dinge, auf die Sie achten sollten: ersetzen Sie IHR_API_KEY durch den Schlüssel aus Schritt 3, IHRE_LANDING_PAGE_ID durch die aus der Liste kopierte ID, und denken Sie an das Komma am Ende jeder Zeile innerhalb der geschweiften Klammern (außer der letzten).

💡 Wenn Ihre index.html bereits andere Skripte hat (Cookie-Banner, Pixel usw.), kein Problem: Wichtig ist nur, dass der RoyLead-Tracker-Block vor </body> steht. Die in thankYouPage angegebene Seite bereiten wir in Schritt 7 vor.

Schritt 5 — Worker erstellen und Dateien zu Cloudflare hochladen

Jetzt stellen wir die Dateien auf Ihrem Cloudflare-Konto online. Kein Terminal, kein GitHub: Sie laden einfach den Ordner hoch.

1. Öffnen Sie auf dash.cloudflare.com im linken Menü Compute (Workers) und klicken Sie auf Erstellen.
2. Wählen Sie auf dem Bildschirm "Ship something new" die letzte Option: Upload your static files.

3. Der Bildschirm "Hochladen und bereitstellen" öffnet sich. Klicken Sie im Kasten auf Ordner (oder ziehen Sie ihn hinein) und wählen Sie den gesamten Ordner Ihrer Landing Page aus — so werden index.html und der Unterordner images/ zusammen mit der richtigen Struktur hochgeladen.

⚠️ Laden Sie den Ordner hoch, nicht nur index.html: sonst werden die Bilder (die sich in images/ befinden) nicht hochgeladen und die Seite erscheint ohne Fotos.

4. Cloudflare listet alle hochgeladenen Dateien auf (index.html + der images/-Ordner) und schlägt einen fertigen Worker-Namen vor: Sie können ihn so lassen. Klicken Sie auf Bereitstellen.

5. In wenigen Sekunden ist die Landing Page online, unter einer Cloudflare-Adresse wie worker-name.ihre-subdomain.workers.dev. Sie können sie schon mit Besuchen öffnen, um zu prüfen, ob sie richtig aussieht.

💡 Diese .workers.dev-Adresse funktioniert, ist aber nicht Ihre Domain. In Schritt 6 verbinden wir Ihre echte Domain.

Schritt 6 — Domain mit dem Worker verbinden

Jetzt bringen wir die Landing Page unter Ihrer Adresse online. Öffnen Sie auf der Worker-Seite den Tab Domains.

Klicken Sie unter "Custom domains and routes" auf Domain hinzufügen.

💡 Verwenden Sie Domain hinzufügen (Custom Domain), nicht "Route hinzufügen": Die Custom Domain liefert die Landing Page sauber aus, mit sofort funktionierenden Bildern.

Das Fenster "Domain verbinden" öffnet sich mit der Liste Ihrer Domains auf Cloudflare. Wählen Sie die Domain, auf der Sie veröffentlichen möchten.

💡 Tipp: Verbinden Sie die Landing Page mit einer dedizierten Subdomain, z. B. promo.ihredomain.com, statt mit der nackten Domain. So können Sie viele Landing Pages auf derselben Domain veröffentlichen (eine pro Subdomain: promo., sale. usw.), und jede bleibt unabhängig.

Das Fenster "Mit ihredomain.com verbinden" öffnet sich: geben Sie im Feld Subdomain (optional) die gewünschte Subdomain ein (z. B. promo → wird zu promo.ihredomain.com). Lassen Sie es leer, wird die nackte Domain verwendet. Klicken Sie dann auf Domain hinzufügen.

Fertig: Die Domain erscheint in der Liste "Custom domains and routes" mit der Umgebung Production. Innerhalb weniger Minuten (die Zeit für das SSL-Zertifikat) ist Ihre Landing Page live unter Ihrer Adresse.

💡 Die Adresse Ihrer Landing Page ist jetzt die Subdomain (z. B. https://promo.ihredomain.com). Merken Sie sich das: Sie brauchen sie für die Dankeseite (Schritt 7) und zum Testen.

Schritt 7 — Dankeseite

Nach dem Absenden des Formulars muss der Nutzer auf einer "Danke"-Seite landen: Das ist für die Nutzererfahrung nötig und weil RoyLead diese URL als Conversion-Referenz verwendet. Da Sie die Dateien selbst hosten, legen Sie die Seite im selben Ordner ab:

1. Erstellen Sie eine Datei danke.html im Landing-Page-Ordner (eine einfache Seite reicht: "Danke! Wir melden uns in Kürze bei Ihnen").
2. Setzen Sie im Tracker-Block innerhalb von index.html (Schritt 4) thankYouPage auf die echte Adresse auf Ihrer Subdomain:

thankYouPage: "https://promo.ihredomain.com/danke.html"

3. Laden Sie den aktualisierten Ordner erneut hoch zum Worker: klicken Sie auf der Worker-Seite auf New deployment → Upload your static files und ziehen Sie den Ordner erneut hinein (jetzt mit aktualisierter index.html + danke.html).

⚠️ Ohne echte Seite bei thankYouPage landet der Nutzer nach dem Absenden auf einer Adresse, die nicht existiert (404). Setzen Sie immer eine echte eigene Seite ein.

Schritt 8 — Abschließende Prüfung

Fast geschafft. Prüfen wir, ob alles funktioniert:

1. Öffnen Sie die Landing Page unter Ihrer Adresse (z. B. https://promo.ihredomain.com). Zum Testen des Trackings fügen Sie der URL einen Parameter hinzu, z. B. ?fbclid=test123&utm_source=facebook.
2. Prüfen Sie, ob die Bilder erscheinen und das Formular dort auftaucht, wo Sie das <div class="lp-form-container"> platziert haben.
3. Füllen Sie das Testformular aus und senden Sie es ab: Sie sollten auf der Danke-Seite landen.
4. Gehen Sie zu RoyLead → Leads: der Test-Lead sollte dort erscheinen (mit den Kampagnenparametern, falls Sie sie zur URL hinzugefügt haben).

Zu Leads gehen ↗

💡 Kommt der Lead an und sehen Sie die Parameter in Leads, ist die Integration abgeschlossen. Ab jetzt ändern Sie nur die Dateien und laden den Ordner erneut hoch (Schritt 7, Punkt 3), jedes Mal wenn Sie die Landing Page aktualisieren.

Fehlerbehebung

• Die Seite erscheint ohne Bilder → Sie haben nur index.html statt des ganzen Ordners hochgeladen. Laden Sie den kompletten Ordner erneut hoch (Schritt 5).
• Das Formular erscheint nicht → das <div class="lp-form-container"></div> fehlt im HTML, oder der Tracker-Block steht nicht vor </body> (Schritt 4).
• Der Lead kommt nicht an / "nicht autorisiert" → falscher apiKey, oder als IHR_API_KEY belassen (Schritt 4).
• Nach dem Absenden lande ich auf einer 404-Seite → thankYouPage nicht gesetzt oder falsche Adresse (Schritt 7).
• Die Domain öffnet sich nicht → das SSL-Zertifikat kann nach dem Verbinden der Domain einige Minuten dauern (Schritt 6); versuchen Sie es in Kürze erneut.