Інструкція по роботі з лендингами

Стек

• Чистий статичний сайт: HTML + CSS + ванільний JS. Жодних рантайм-фреймворків, жодного build-кроку — відкривається як є.
• Шрифти й зображення — self-hosted у public/ (бренд Kukurudza).
• Дизайн-токени (кольори, шрифти, відступи) — CSS-змінні у src/styles/tokens.css.
• Контент — у src/content/content.uk.js (об'єкт window.KZ): єдине джерело копірайту + конфіг. Видимий текст продубльовано в index.html (статичний рендер).

Структура файлів

hN/
├─ index.html                  ← розмітка сторінки (видимий текст тут)
├─ src/
│  ├─ styles/
│  │  ├─ tokens.css            ← кольори / шрифти / радіуси / відступи
│  │  └─ main.css              ← усі стилі компонентів
│  ├─ content/
│  │  └─ content.uk.js         ← window.KZ: config + копірайт (джерело правди)
│  └─ js/
│     ├─ tracking.js           ← dataLayer-події (page_view, cta_click…)
│     ├─ form.js               ← сабміт форми → lead_id → CRM
│     ├─ ui.js                 ← reveal-анімації, sticky CTA, count-up
│     └─ main.js               ← ініціалізація (+ quiz.js у H4, segment.js у H5, countdown.js у H3)
└─ public/                     ← img / fonts / video (бренд-асети)

Запуск локально

Будь-який статичний сервер. Найпростіше — Python (порт довільний):

# з розпакованої теки сайту
python3 -m http.server 8123
# → відкрити http://127.0.0.1:8123

Сайт треба відкривати через сервер (http://), а не подвійним кліком по файлу (file://) — інакше JS-модулі й шляхи до асетів можуть не завантажитись.

Деплой

Швидко (тимчасове демо) — Cloudflare Quick Tunnel

# 1) підняти локальний сервер
python3 -m http.server 8123 --directory ./hN
# 2) прокинути тунель (ОКРЕМИЙ HOME, щоб не читався чужий ~/.cloudflared/config.yml)
HOME=/tmp/cf-hN cloudflared tunnel --url http://127.0.0.1:8123 --no-autoupdate
# → у виводі зʼявиться публічний https://*.trycloudflare.com

⚠️ Ізольований HOME обовʼязковий. Без нього cloudflared може підхопити конфіг сусіднього тунелю й віддавати 404 замість сайту. Quick-тунелі ефемерні — живуть, поки крутиться процес.

Постійно (прод) — Cloudflare Pages

• Залити теку сайту як статичний проєкт (drag-and-drop або wrangler pages deploy ./hN).
• Або named-tunnel на власний домен (напр. targetolog.corny.online) — потрібен CLOUDFLARE_API_TOKEN.
• Сторінки під платний трафік — лишити <meta name="robots" content="noindex, follow">.

Конфіг перед запуском у трафік

Відкрити src/content/content.uk.js → об'єкт config і підставити реальні значення замість заглушок:

config: {
  variantId: "v1_price_qualifier",   // НЕ чіпати — ідентифікатор A/B-варіанта
  gtmId: "GTM-XXXXXXX",              // ← реальний GTM-контейнер
  crmEndpoint: "",                  // ← URL, куди POST-иться заявка (порожньо = симуляція успіху)
  ...
}

• gtmId — поки заглушка, GTM не вантажиться (події пишуться лише в dataLayer). Підставити справжній контейнер, щоб події пішли в GA4.
• crmEndpoint — поки порожній, форма симулює успіх (нічого не надсилає). Вказати ендпоінт прийому заявки.
• Телефон / Telegram / соцмережі також у config — змінювати там.

Трекінг подій (dataLayer)

Кожна сторінка пушить події у window.dataLayer; до кожної авто-підмішується variant_id, audience_segment, traffic_source (з UTM). GTM передає їх у GA4.

Перевірка: відкрити консоль → window.dataLayer або GTM Preview. form_submit має віддавати lead_id, який далі звʼязує заявку→оплату в CRM (головна метрика тесту).

Definition of Done (чек-лист)

1. Контент — лише з наявних сторінок (Task 4 §2), нічого не вигадано.
2. CTA — кожна кнопка має cta_id і веде до форми/Telegram; жодних «мертвих» елементів.
3. Трекінг — усі події в dataLayer з правильними id; перевірено в GTM Preview.
4. Техякість — 0 JS-помилок, INP < 200 мс, без оманливо-клікабельних елементів (анти-dead-click), mobile-first (зокрема in-app браузери Instagram/Facebook).
5. Дизайн — кольори/шрифти/кнопки відповідають kukurudza.com.
6. noindex виставлено; UTM зчитуються у traffic_source.