Опубликовать HTML-лендинг на Cloudflare Workers

Шаг 1 — Что нужно подготовить

Прежде чем начать, соберите три вещи:

• Домен — купленный где угодно (Namecheap, GoDaddy и т. д.). Ему не обязательно уже быть на Cloudflare: мы перенесём его туда на Шаге 2.
• Ваш HTML-лендинг — в одной папке на компьютере. Обычно она содержит:
  • файл index.html (саму страницу)
  • папку images/ с изображениями
• Аккаунт RoyLead, в который вы вошли.

💡 Ещё нет лендинга? Создайте его с помощью AI за считаные минуты: Создать HTML-лендинг с Claude или ChatGPT ↗. Возвращайтесь сюда с готовой папкой.

💡 Весь код отслеживания RoyLead идёт внутрь index.html (увидим это на Шаге 4): отдельный файл конфигурации не нужен.

💡 Держите все файлы в одной папке: именно её мы загрузим на Cloudflare на Шаге 5. Если изображения лежат в подпапке images/, убедитесь, что в HTML на них ссылаются с правильным путём (например, images/photo.jpg).

Шаг 2 — Подготовьте домен (два дела)

Ваш домен должен быть готов на двух фронтах. Это два отдельных гайда — сделайте оба, затем возвращайтесь сюда:

1. На Cloudflare — домен должен управляться Cloudflare (NS-серверы переключены), чтобы можно было разместить на нём лендинг. → Добавить домен в Cloudflare ↗
2. В RoyLead — домен должен быть добавлен и подтверждён в RoyLead, чтобы лиды и конверсии засчитывались правильно. → Как подключить новый домен ↗

💡 Эти два шага хорошо стыкуются: TXT-запись для подтверждения, которую просит RoyLead, добавляется прямо в DNS Cloudflare, где вы теперь и управляете доменом. В типе сайта выберите HTML / Custom.

💡 Если домен уже активен на Cloudflare и подтверждён в RoyLead, переходите сразу к Шагу 3.

Возвращайтесь сюда, когда домен станет Active на Cloudflare и подтверждённым в RoyLead.

Шаг 3 — Создайте лендинг в RoyLead и получите ключи

Здесь мы получаем два значения, которые понадобятся трекеру: Landing Page ID и ваш API Key.

1. В меню перейдите в Landing Pages и нажмите Подключить HTML-лендинг.
2. Заполните Название (например, "Летняя акция") и URL (путь, который будет на вашем домене, например, https://вашдомен.com/promo), выберите домен и сохраните.
3. В списке рядом с лендингом нажмите на иконку копирования возле его ID, чтобы скопировать Landing Page ID. Отложите его.

4. Перейдите в Настройки → API Key и скопируйте ключ иконкой копирования рядом (или нажмите Regenerate API Key, чтобы сгенерировать новый).

🔒 API Key идентифицирует ваш аккаунт: не делитесь им. Если перегенерируете его, придётся обновить его на всех лендингах, которые его используют.

К концу этого шага у вас на руках две вещи: Landing Page ID и API Key. Оба понадобятся на Шаге 4.

Шаг 4 — Вставьте трекер в `index.html`

Это единственный кусок «кода», но это просто копипаст. Откройте index.html в текстовом редакторе (подойдут VS Code, Notepad++, даже обычный «Блокнот»).

1. Там, где нужна форма → вставьте это в то место страницы, где должна появиться форма (можно и в нескольких местах):

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

Форму рисует и стилизует сам трекер: вы просто размещаете контейнер там, где вам удобно.

2. Прямо перед </body> → вставьте блок трекера и заполните его данными с Шага 3:

<!-- RoyLead Tracker -->
<script>
  window.RoyLeadConfig = {
    captureUrl: "https://capture.roylead.com",
    apiKey: "ВАШ_API_KEY",
    landingPageId: "ID_ВАШЕГО_ЛЕНДИНГА",
    thankYouPage: "https://вашдомен.com/путь/spasibo"
  };
</script>
<script src="https://capture.roylead.com/tracker.js"></script>

3. Сохраните файл.

⚠️ На что обратить внимание: замените ВАШ_API_KEY на ключ с Шага 3, ID_ВАШЕГО_ЛЕНДИНГА — на ID, скопированный из списка, и не забудьте про запятую в конце каждой строки внутри фигурных скобок (кроме последней).

💡 Если в вашем index.html уже есть другие скрипты (баннер cookie, пиксели и т. д.), не проблема: важно, чтобы блок RoyLead Tracker находился перед </body>. Страницу, указанную в thankYouPage, мы подготовим на Шаге 7.

Шаг 5 — Создайте Worker и загрузите файлы на Cloudflare

Теперь размещаем файлы онлайн на вашем аккаунте Cloudflare. Никакого терминала, никакого GitHub: вы просто загружаете папку.

1. На dash.cloudflare.com в левом меню откройте Compute (Workers) и нажмите Create.
2. На экране «Ship something new» выберите последний вариант: Upload your static files.

3. Откроется экран «Upload and deploy». В окне нажмите folder (или перетащите папку) и выберите всю папку целиком вашего лендинга — так index.html и подпапка images/ загрузятся вместе, с правильной структурой.

⚠️ Загружайте именно папку, а не только index.html: иначе изображения (которые лежат в images/) не загрузятся, и страница будет отображаться без фото.

4. Cloudflare перечислит все загруженные файлы (index.html + папку images/) и предложит готовое имя Worker: можно оставить как есть. Нажмите Deploy.

5. Через несколько секунд лендинг будет онлайн по адресу Cloudflare вида worker-name.your-subdomain.workers.dev. Уже сейчас можно открыть его через Visit, чтобы проверить, всё ли отображается правильно.

💡 Этот адрес .workers.dev работает, но это не ваш домен. На Шаге 6 подключим ваш реальный домен.

Шаг 6 — Подключите свой домен к Worker

Теперь сделаем так, чтобы лендинг отдавался по вашему адресу. На странице Worker откройте вкладку Domains.

В разделе «Custom domains and routes» нажмите Add domain.

💡 Используйте именно Add domain (пользовательский домен), а не «Add route»: пользовательский домен отдаёт лендинг корректно, с изображениями, работающими сразу.

Откроется окно «Connect domain» со списком ваших доменов на Cloudflare. Выберите домен, на котором хотите публиковать.

💡 Совет: подключайте лендинг к отдельному поддомену, например promo.вашдомен.com, а не к «голому» домену. Так вы сможете публиковать много лендингов на одном домене (по одному на поддомен: promo., sale. и т. д.), и каждый останется независимым.

Откроется окно «Connect to yourdomain.com»: в поле Subdomain (optional) введите нужный поддомен (например, promo → станет promo.вашдомен.com). Если оставить поле пустым, будет использован «голый» домен. Затем нажмите Add domain.

Готово: домен появится в списке «Custom domains and routes» со средой Production. Через несколько минут (время на SSL-сертификат) ваш лендинг будет опубликован на вашем адресе.

💡 Адрес вашего лендинга теперь — этот поддомен (например, https://promo.вашдомен.com). Запомните его: он понадобится для страницы благодарности (Шаг 7) и для тестирования.

Шаг 7 — Страница благодарности

После отправки формы пользователь обязательно должен попасть на страницу «Спасибо»: это нужно и для опыта пользователя, и потому что RoyLead использует этот URL как признак конверсии. Так как файлы хостите вы сами, страницу нужно положить в ту же папку:

1. Создайте файл spasibo.html в папке лендинга (достаточно простой страницы: «Спасибо! Мы скоро с вами свяжемся»).
2. В блоке трекера внутри index.html (Шаг 4) укажите в thankYouPage реальный адрес на вашем поддомене:

thankYouPage: "https://promo.вашдомен.com/spasibo.html"

3. Заново загрузите обновлённую папку в Worker: на странице Worker нажмите New deployment → Upload your static files и снова перетащите папку (теперь с обновлённым index.html + spasibo.html).

⚠️ Без реальной страницы в thankYouPage после отправки формы пользователь попадёт на несуществующий адрес (404). Всегда указывайте реальную свою страницу.

Шаг 8 — Финальная проверка

Почти готово. Проверим, что всё работает:

1. Откройте лендинг по своему адресу (например, https://promo.вашдомен.com). Чтобы протестировать отслеживание, добавьте к URL параметр, например ?fbclid=test123&utm_source=facebook.
2. Проверьте, что изображения отображаются и форма появляется там, где вы разместили <div class="lp-form-container">.
3. Заполните и отправьте тестовую форму: вы должны попасть на страницу благодарности.
4. Перейдите в RoyLead → Leads: тестовый лид должен появиться там (с параметрами кампании, если вы добавили их в URL).

Перейти в Leads ↗

💡 Если лид пришёл и вы видите параметры в Leads — интеграция завершена. Дальше достаточно менять файлы и заново загружать папку (Шаг 7, пункт 3) каждый раз при обновлении лендинга.

Решение проблем

• Страница отображается без изображений → вы загрузили только index.html вместо всей папки. Заново загрузите всю папку целиком (Шаг 5).
• Форма не появляется → в HTML отсутствует <div class="lp-form-container"></div>, либо блок трекера расположен не перед </body> (Шаг 4).
• Лид не приходит / «not authorized» → неверный apiKey, или он остался как ВАШ_API_KEY (Шаг 4).
• После отправки формы вижу страницу 404 → thankYouPage не задан или указан неверный адрес (Шаг 7).
• Домен не открывается → SSL-сертификату может понадобиться несколько минут после подключения домена (Шаг 6); попробуйте снова чуть позже.