на головну
Таск 4

Build-spec 5 лендингів

Task 4 — Build Spec: 5 лендингів для Claude Code

Проєкт: Kukurudza — Landing Optimization Спирається на: Task 1 (UX/копірайтинг + Clarity), Task 2 (GA-воронка), Task 3 (5 гіпотез) Мета: збір лідів / заявок на курс «Таргетолог» Дата: 26.06.2026

0. Як користуватися цим документом (для Claude Code)

1. Спільні технічні вимоги (для всіх 5 лендингів)

1.1 Тип і мета

1.2 Технічна якість (висновки Task 1–2 — не повторювати помилок)

1.3 Трекінг подій (GTM / dataLayer) — ОБОВʼЯЗКОВО з самого старту

Критично. На короткому лендінгу /kurs-targetolog/ трекінг подій зламаний (0 кліків при 200 заявках, Task 2) — через це воронку всередині сторінки виміряти неможливо. Жоден лендинг не йде в трафік без перевіреного трекінгу.

Кожна сторінка пушить у dataLayer такі події (GTM передає в GA4):

Подія Параметри Коли спрацьовує
page_view variant_id, traffic_source, audience_segment Завантаження сторінки
scroll_depth depth (25/50/75/100), variant_id Досягнення глибини скролу
block_view block_id, variant_id Блок зʼявився у viewport (IntersectionObserver)
cta_click cta_id, cta_position (hero/sticky/section/price/quiz), variant_id Клік по будь-якій CTA
offer_view variant_id Перегляд блоку з ціною (де ціна є)
quiz_step_view step_n, variant_id Показ кроку квіза (лише H4)
quiz_step_complete step_n, answer, variant_id Завершення кроку квіза (лише H4)
form_start variant_id, audience_segment Перший фокус у полі форми
form_submit lead_id, variant_id, audience_segment Успішна відправка заявки

Правила: - variant_id присутній у КОЖНІЙ події (значення — у §3 кожного лендинга). - audience_segment за замовчуванням default; для H5 = сегмент із URL-параметра ?segment= (див. §3 H5). - traffic_source із UTM (utm_source/utm_campaign). - Іменування block_id і cta_id — точно як у §3 відповідного лендинга.

1.4 Форма заявки і звʼязка з CRM

1.5 Дизайн-система

Окремої брендбук-документації в наданих файлах немає, тому дизайн НЕ вигадуємо — успадковуємо з наявного сайту kukurudza.com.

Що відомо і обовʼязкове до перевикористання: - Бренд: Kukurudza (Кукурудза), освітній продукт. Логотип-вордмарк «kukurudza». - Джерело стилів: забрати кольори, типографіку, стиль кнопок і відступи з чинної теми сайту (/wp-content/themes/kukuruza/kukuruza2/), щоб нові лендинги візуально відповідали бренду. Точні HEX і шрифти — витягнути з CSS наявних сторінок, не підбирати «на око». - Соц-іконки: Telegram, Instagram (instagram.com/kukurudza.blog), YouTube (@kukurudza_blog) — як на наявних сторінках. - Адаптивність: mobile-first, брейкпойнти за чинною темою; обовʼязкова перевірка в in-app браузерах (Instagram/Facebook), бо звідти йде платний трафік. - Якщо якогось токена немає в джерелі — лишити CSS-змінну з TODO-коментарем, а не вписувати випадкове значення.

1.6 Іменування варіантів

Лендинг variant_id audience_segment
H1 v1_price_qualifier default
H2 v2_ultrashort default
H3 v3_proof_first default
H4 v4_quiz default (+ збирається у квізі)
H5 v5_modular_segment {beginner\|practitioner\|owner\|freelancer}

2. Бібліотека контенту (дослівно з наявних сторінок)

Джерело позначено: [S] = короткий лендинг /kurs-targetolog/; [L] = довгий сайт /targeting-course/. Використовувати рядки як є.

HERO_S [S] — Заголовок: «Навчись запускати рекламу професійно» · підзаголовок: «3,5 місяці, щоб розібратись в усьому з куратором» · надзаголовок: «КУРС «ТАРГЕТОЛОГ»» · «залиш заявку серед перших на новий потік».

HERO_L [L] — Надзаголовок: «Курс-професія» · Заголовок: «таргетолог» · бейджі: «Вчись у зручний час протягом 3-х місяців», «Старт навчання 8 липня».

POSITIONING [L] — «вчимо маркетинг-мисленню, а не просто натискати кнопки в рекламному кабінеті».

PROOF_NUMBERS [S] — три факти довіри: «11 років досвіду в маркетингу»; «7000$ — мінімальна сума, яку витрачаємо на таргет в місяць»; «Х2 — мінімальна окупність наших бюджетів». Особа: «Анна Дахновська, Head of Marketing Kukurudza».

RESULTS_CASES [L] — Заголовок: «Які будуть результати? Покажемо на своїх кейсах». Цифри: «+9300 підписників в блог за місяць»; «+325 заявок на продукт за місяць»; «+47 оплат з однієї рекламної кампанії».

RESUME_SOFT [L] — «що буде у твоєму резюме» → Soft skills: «Вмію бачити закономірності в цифрах та виділяти тенденції; Дотримуюсь дедлайнів; Ефективно планую запуски; Знаходжу стратегічно вигідні рішення; Мислю креативно; Ефективно взаємодію з командою; Працюю з технологіями».

RESUME_HARD [L] — Hard skills: «Вільно запускаю кампанії в Meta ADS; Ефективно розподіляю бюджет; Масштабую результати; Генерую конверсійні креативи; Оптимізую процеси з AI та використовую AI для креативів; Запускаю трафік на автоворонки; Налаштовую відстеження результатів реклами; Базово володію Google-аналітикою; Роблю зрозумілу звітність».

LEARN_LIST [L] — «Ти навчишся: формулювати цілі реклами під задачі бізнесу; будувати структуру кампаній у Meta Ads; розподіляти бюджет і тестувати гіпотези; аналізувати результати і будувати звіти; налаштувувати піксель та відстежувати події; масштабувати те, що працює, і зупиняти те, що зливає гроші».

AFTER_LIST [L] — «Після навчання ти: розумієш повний цикл запуску реклами; вмієш аргументувати свої рішення цифрами; не губишся в показниках і знаєш, на що звертати увагу; можеш працювати таргетологом в агенції чи на фрилансі; або самостійно просувати власний бізнес».

PROGRAM_BLOCKS [L] — заголовок «Програма». Блоки (повний перелік уроків імпортувати з /targeting-course/#program як є): «00 Вхід у професію; 01 Трафік, стратегія та основи маркетингу; 02 Знайомство з інтерфейсом; 03 Підготовка до запуску реклами; 04 Креативи і тексти; 05 Запуск реклами; 06 Аналітика реклами; 07 АІ в роботі таргетолога; 08 Комунікація з клієнтом та карʼєра; NEW Бонус-блок TikTok ADS; NEW Бонус-блок Telegram ADS; Бонусний модуль. Робота з воронками».

TARIFFS [L] — заголовок «Тарифи», «початок 8 липня». Два тарифи: - Робота у групі — 19 900 UAH («кількість місць необмежена»): 89 записаних уроки; 38 файлів для роботи; 9 Live-зустрічей зі спікером; 9 практичних завдань; Доступ до матеріалів на 3 місяці з моменту закінчення курсу; Загальний чат студентів; Сертифікат слухача курсу. - З Куратором — 24 900 UAH («кількість місць обмежена»): усе з тарифу «у групі» + Чат з куратором; Відповіді на питання в чаті; Перевірка практичних завдань куратором; Акаунт для практики та тренувальний бюджет; Іменний сертифікат слухача курсу. - CTA тарифів: «зайняти місце» / «оплатити частинами».

SALARY [L] — «середня зарплата таргетолога в Україні» (за даними work.ua, станом на березень 2026).

SPEAKERS [L] — «Над курсом працювали»: Анна Дахновська (Head of Marketing Kukurudza); Станіслав Кравець (Senior Media Buyer & Creative Strategist); Анастасія Яланська (Creative Director Kukurudza); Каміла Амескан (Head of Design Kukurudza Agency); Євгеній Тесля (Brand Marketing Manager Dominator Play). Біо кожного — імпортувати з /targeting-course/ як є.

TRAINING_PROJECT [L] — «ТРЕНУВАЛЬНИЙ ПРОЄКТ» · «Щоб не тільки дивитись уроки, а й тестувати все на практиці» · «Для студентів, які вчаться з кураторською підтримкою».

REVIEWS [L] — «Про нас постять» (скриншоти-відгуки review-1…3).

FAQ [L] — «Часті питання» (8 шт., дослівно): 01 «На якій платформі буде курс?»; 02 «Буде доступ до матеріалів після екзамену?»; 03 «Де чекати сповіщення про старт?»; 04 «Як перевірятимуть домашні завдання?»; 05 «Що таке «тренувальний проєкт»?»; 06 «Чи є корпоративні тарифи?»; 07 «Якою мовою проходить навчання?»; 08 «Я можу проходити практику на своєму проєкті?». Відповіді — з /targeting-course/ як є.

SEGMENTS [L] — «Кому підійдуть курси таргетолога… Вони для тебе, якщо ти:» - (beginner) «початківець і хочеш зайти в таргет із нуля, але через систему, а не хаотичні відео з інтернету»; - (practitioner) «вже щось запускаєш, але знання не складаються в єдину картину»; - (owner) «власник бізнесу й хочеш зрозуміти, куди йдуть рекламні бюджети та як ними керувати»; - (freelancer) «працюєш із клієнтами й хочеш відчувати впевненість, а не «молюсь, щоб не злити бюджет»».

CONTACT [S][L] — Telegram-бот «@KukurudzaSchool_bot» (CTA «Тицяй сюди — все влаштуємо!» / «Зв'язатися»); телефон «+38 (073) 178 51 41».

LEAD_FORM — форма заявки (поля: імʼя + контакт), кнопка «залишити заявку». Технічні правила — §1.4.

3. Специфікації лендингів

У кожному: block_id і cta_id наведені точно так, як їх треба передавати в трекінг (§1.3).

H1 — «Ціна як кваліфікатор» · variant_id = v1_price_qualifier

Гіпотеза: ранній показ ціни-фільтра підніме якість ліда (заявка→оплата) без обвалу обсягу. Головна метрика успіху: CV заявка→оплата + CPA (НЕ CTR). Гардрейл: CV сеанс→заявка. Довжина: середня. Ціна: Є, показується рано (до фінальної форми).

Структура зверху вниз:

# block_id Контент (§2) CTA (cta_id · текст · позиція)
1 hero HERO_L (надзаголовок «Курс-професія» + «таргетолог» + бейджі старту) cta_hero · «взяти участь» · у hero
2 proof_cases RESULTS_CASES (+9300 / +325 / +47) —
3 program_teaser PROGRAM_BLOCKS — лише назви 12 блоків (без повного списку уроків) cta_program · «дивитись програму» · під блоком (розгортає список)
4 price TARIFFS (19 900 / 24 900 UAH з переліком) — ключовий блок, ціна як фільтр cta_price_group · «зайняти місце» · картка тарифу; cta_price_curator · «зайняти місце» · картка тарифу
5 speakers SPEAKERS (5 спікерів) —
6 lead_form LEAD_FORM + CONTACT cta_submit · «залишити заявку» · у формі
7 faq FAQ (показати 4: 01, 02, 04, 07) —
— sticky_cta — cta_sticky · «взяти участь» · липка кнопка (mobile)

Події трекінгу (§1.3): page_view, scroll_depth, block_view (для всіх block_id вище), cta_click (cta_hero/cta_program/cta_price_group/cta_price_curator/cta_sticky/cta_submit), offer_view (при показі блоку price), form_start, form_submit(+lead_id). Свідомо НЕ включаємо: довгі SEO-тексти, повний перелік уроків, відгуки (щоб лишити середню довжину).

H2 — «Мінімальний односекційний лідоген» · variant_id = v2_ultrashort

Гіпотеза: максимальне скорочення + відсутність ціни підвищать конверсію в заявку (обсяг). Головна метрика успіху: CV сеанс→заявка + CPL. Гардрейл: заявка→оплата не нижче 12.5%. Довжина: один екран. Ціна: немає.

Структура зверху вниз:

# block_id Контент (§2) CTA (cta_id · текст · позиція)
1 hero HERO_S («Навчись запускати рекламу професійно» + «КУРС «ТАРГЕТОЛОГ»» + «залиш заявку серед перших на новий потік») cta_hero · «залишити заявку» · у hero (скрол до форми)
2 proof_inline PROOF_NUMBERS — 3 буліти (11 років / 7000$ / Х2) + особа Анна Дахновська —
3 lead_form LEAD_FORM + CONTACT (одразу під першим екраном) cta_submit · «залишити заявку» · у формі

Події трекінгу (§1.3): page_view, scroll_depth, block_view, cta_click (cta_hero/cta_submit), form_start, form_submit(+lead_id). (offer_view/quiz_* — не використовуються.) Свідомо НЕ включаємо: програму, тарифи/ціну, спікерів, FAQ, SEO-тексти. Нічого, що відкладає дію.

H3 — «Доказ-першим» · variant_id = v3_proof_first

Гіпотеза: той самий контент довгого сайту, але з доказами вгорі, втримає тих, хто зараз відвалюється рано (quick-backs 21.61%), і дасть якісніший лід. Головна метрика успіху: CV заявка→оплата + CV сеанс→оплата. Гардрейли (Clarity): quick-back rate ↓, scroll depth ↑ (база 44.46%). Довжина: довга. Ціна: є, але нижче доказів.

Структура зверху вниз (порядок — головна зміна):

# block_id Контент (§2) CTA (cta_id · текст · позиція)
1 hero HERO_L (мінімальний hero-офер) cta_hero · «взяти участь» · у hero
2 proof_cases RESULTS_CASES (+9300 / +325 / +47) — одразу після hero —
3 social_proof SPEAKERS + REVIEWS —
4 salary SALARY (середня зарплата, work.ua) cta_after_proof · «взяти участь» · під блоком
5 resume RESUME_SOFT + RESUME_HARD («що буде у твоєму резюме») —
6 program PROGRAM_BLOCKS (повний) —
7 price TARIFFS (19 900 / 24 900) cta_price_group · «зайняти місце»; cta_price_curator · «зайняти місце» · картки тарифів
8 lead_form LEAD_FORM + CONTACT cta_submit · «залишити заявку» · у формі
9 faq FAQ (усі 8) —
— sticky_cta — cta_sticky · «взяти участь» · липка (mobile)

Події трекінгу (§1.3): повний набір — page_view, scroll_depth, block_view (усі block_id), cta_click (cta_hero/cta_after_proof/cta_price_group/cta_price_curator/cta_sticky/cta_submit), offer_view (блок price), form_start, form_submit(+lead_id). Суть А/Б проти контролю: контент = довгий сайт, відрізняється лише порядок (докази → програма → ціна, а не позиціонування → програма → докази).

H4 — «Квіз-воронка» · variant_id = v4_quiz

Гіпотеза: багатокроковий квіз дробить «великий крок» (вищий обсяг заявок) і водночас кваліфікує ліда (вища якість). Головна метрика успіху: CV сеанс→заявка ТА CV заявка→оплата разом. Діагностика: покрокова воронка квіза. Довжина: коротка + інтерактивний квіз. Ціна: немає на сторінці (виноситься в розмову).

Структура зверху вниз:

# block_id Контент (§2) CTA (cta_id · текст · позиція)
1 hero HERO_S (заголовок + «КУРС «ТАРГЕТОЛОГ»») cta_hero_quiz_start · «Пройти тест і залишити заявку» · у hero (старт квіза)
2 quiz Квіз 3 кроки (опції — з SEGMENTS, контент наявний): Крок 1 «З чого ти заходиш у таргет?» → опції: новачок з нуля / вже щось запускаю / власник бізнесу / працюю з клієнтами. Крок 2 «Яка твоя ціль?» → опції з LEARN_LIST (напр. «запускати рекламу під задачі бізнесу», «масштабувати те, що працює»). Крок 3 «Контакт» → LEAD_FORM cta_quiz_next · «Далі» · кожен крок; cta_submit · «залишити заявку» · крок 3
3 proof_below PROOF_NUMBERS (для тих, хто скролить замість квіза) cta_below_quiz · «Пройти тест» · під блоком (повертає до квіза)
4 contact CONTACT (Telegram-бот, телефон) cta_telegram · «Зв'язатися» · у блоці

Події трекінгу (§1.3): page_view, scroll_depth, block_view, cta_click (cta_hero_quiz_start/cta_quiz_next/cta_below_quiz/cta_telegram/cta_submit), quiz_step_view (step_n=1/2/3), quiz_step_complete (step_n + answer), form_start, form_submit(+lead_id + відповіді квіза як параметри → в CRM для кваліфікації). Важливо: відповідь Кроку 1 пишеться також у audience_segment ліда (для звʼязки з якістю). Свідомо НЕ включаємо: ціну, тарифи, повну програму, FAQ.

H5 — «Модульний лендинг під сегмент» · variant_id = v5_modular_segment

Гіпотеза: змінний під сегмент hero/офер + легка ротація протидіють вигоранню (стабільніший CPL у часі) і підвищують релевантність. Головна метрика успіху: стабільність CPL і CV сеанс→заявка в динаміці по тижнях/сегментах (тренд + frequency), НЕ разова точка. Довжина: коротко-середня. Ціна: немає на сторінці. Сегмент: з URL ?segment=beginner|practitioner|owner|freelancer → у audience_segment.

Архітектура: один шаблон, у якому hero + перший доказ підмінюються за сегментом (контент сегментів — SEGMENTS). Блоки модульні (легко вмикати/вимикати/міняти порядок без переробки).

Структура зверху вниз:

# block_id Контент (§2) CTA (cta_id · текст · позиція)
1 hero_dynamic HERO_S + рядок-біль під сегмент з SEGMENTS (beginner/practitioner/owner/freelancer — рендериться за ?segment=) cta_hero · «залишити заявку» · у hero
2 proof_matched PROOF_NUMBERS (база) + 1 релевантна цифра з RESULTS_CASES під сегмент —
3 value LEARN_LIST АБО AFTER_LIST (короткий список цінності, модульно) cta_mid · «залишити заявку» · під блоком
4 lead_form LEAD_FORM + CONTACT cta_submit · «залишити заявку» · у формі

Дефолт (без параметра): audience_segment=default, hero = базовий HERO_S без сегментного рядка.

Події трекінгу (§1.3): page_view (+audience_segment із URL), scroll_depth, block_view, cta_click (cta_hero/cta_mid/cta_submit), form_start, form_submit(+lead_id+audience_segment). Вимога модульності: кожен сегментний варіант hero — окремий конфіг (JSON/масив), щоб офер ротувався без зміни верстки. Це і є механізм «перезарядки» проти вигорання.

4. Зведена матриця подій по варіантах

Подія H1 H2 H3 H4 H5
page_view ✅ ✅ ✅ ✅ ✅
scroll_depth ✅ ✅ ✅ ✅ ✅
block_view ✅ ✅ ✅ ✅ ✅
cta_click ✅ ✅ ✅ ✅ ✅
offer_view (ціна) ✅ — ✅ — —
quiz_step_view/complete — — — ✅ —
form_start ✅ ✅ ✅ ✅ ✅
form_submit (+lead_id) ✅ ✅ ✅ ✅ ✅
audience_segment динамічний — — — ✅ (з квіза) ✅ (з URL)

Первинна метрика за гіпотезою (нагадування з Task 3, не CTR): H1 → заявка→оплата/CPA; H2 → сеанс→заявка/CPL; H3 → заявка→оплата + quick-backs↓; H4 → сеанс→заявка + заявка→оплата; H5 → стабільність CPL у часі.

5. Definition of Done (acceptance для Claude Code)

Кожен лендинг вважається готовим, коли:

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

Серія завершена: Task 1 (аналіз) → Task 2 (GA-воронка) → Task 3 (5 гіпотез) → Task 4 (цей spec). Усі 5 лендингів готові до передачі в Claude Code.