Власний продукт · Квіз-воронка з підпискою
Квіз-воронка на п'ять мов, від першого кліку до підписки
Споживчий продукт, який я запустив із партнерами: платний трафік заходить у квіз із дев'ятнадцяти екранів і виходить оплаченою підпискою. Усе між ними спроєктовано й написано мною під конверсію: рушій квізу, пейвол, оплата, генерація звіту, три шари аналітики та п'ять мовних версій. Бренд і виручка залишаються в партнерів, інженерія показана повністю.
- Квіз-воронка
- Підписка
- Серверні події
- 5 мов
- PostgreSQL
Вхід
Повний лендинг для органіки, короткий пре-лендер для реклами.
Сесія з першого кліку
Кожна відповідь одразу на сервері, разом із кампанією і пристроєм.
Квіз, 19 екранів
Від легких запитань в один тап до дати народження й особистих даних.
Часткове розкриття
Справжнє зведення, розмите зображення, чотири тизери. Платний текст лишається на сервері.
Пейвол, три тарифи
Символічний вхід на тиждень, виділений середній тариф, без таймера.
Тріальний тиждень
Чотири порції цінності за сім днів. Причина не скасовувати підписку.
- Роль
- Співзасновник. Продукт, архітектура і вся розробка. Команду під проєкт, включно з трафіком, збирав я.
- Період
- Запущено у 2024, працює дотепер
- Продукт
- Персональний звіт із тексту й зображення, який продається через квіз і оплачується підпискою.
- Платформа
- Власний веб-стек: попередньо зібрані сторінки, PostgreSQL, платіжний провайдер і пікселі за замінними інтерфейсами.
- Мови
- Англійська, іспанська, німецька, румунська, польська. У кожної мови своя адреса.
- Стан
- У продакшені повністю: воронка, оплата, генерація звіту, порційна видача, аналітика й локалізація. Приймає платний трафік на п'яти ринках.
- Що не розкриваю
- Бренд, нішу й виручку: вони належать партнерам. Архітектуру й рішення показую повністю. Екрани, цифри й живу воронку показую на дзвінку.
Чому воронка влаштована саме так
Зображення продає вхід, текстовий звіт дає цінність, підписка з тижневим входом збирає гроші.
Цю зв'язку я не вигадував за столом. Перед розробкою я розібрав двох працюючих конкурентів поекранно й переглянув близько десятка продуктів через бібліотеку реклами Meta. Картина склалася швидко. Зображення дає дешевий клік, бо ставить конкретне візуальне запитання, на яке хочеться отримати відповідь.
Продавати саме зображення разовим платежем невигідно: один платіж без повторів і найпримхливіша для еквайрингу категорія. Гола підписка теж не тримається, бо другий тиждень нічим виправдати. Робоча середина виявилася такою: зображення відчиняє двері, людина платить за підписку, а цінність першого тижня видається порціями. Ці порції роблять роботу, яку зазвичай робить мобільний застосунок.
Три ролі в одній зв'язці
- Гачок
- Зображення: дешевий клік і конкретна обіцянка
- Продукт
- Персональний текстовий звіт із трьох розділів
- Каса
- Підписка із символічним першим тижнем і порційною видачею
Шлях користувача
Жоден екран не стоїть на своєму місці випадково. Нижче те, що бачить людина від кліку по оголошенню до моменту, коли дістає картку.
Дві точки входу
Органіка й модерація майданчиків заходять на повний лендинг. Реклама веде на короткий пре-лендер: перший екран, доказ, кнопка. Так робить найсильніший із розібраних конкурентів, і це правильно: рекламному трафіку не потрібен довгий лендинг, йому потрібне перше запитання.
Сесія народжується на першому кліку
Не на кроці з поштою й не наприкінці. Ідентифікатор живе в адресі й у куці, кожна відповідь іде на сервер у момент вибору. Покинута воронка не губиться: я бачу, що людина відповіла на сім запитань і пішла на восьмому, з якої кампанії прийшла і з якого пристрою. У конкурентів стан квізу лежить лише в браузері, і таких даних у них не існує.
Дев'ятнадцять екранів, дванадцять запитань
У лічильник прогресу потрапляють лише запитання. Порядок вибудувано як сходи: два нейтральні запитання великими картками в один тап, екран довіри, уподобання, дата народження як точка вкладення, біль, проєкція майбутнього. Особисті дані я прошу лише після чотирьох легких «так».
Пауза перед офером
Між останньою відповіддю і результатом стоїть завантаження з трьома смугами прогресу, і кожна підписана реальним етапом розрахунку. Це не прикраса: пауза створює очікування, у яке потім потрапляє результат.
Момент результату
Замість глухої заглушки людина бачить справжній заголовок зі своїми даними, справжнє зведення, розмите зображення й чотири картки-тизери. Платний текст на клієнт не віддається взагалі, а ескіз під розмиттям навмисно недомальований. Зняти CSS-фільтр в інструментах розробника можна, побачити при цьому нічого. В обох конкурентів платний текст дістається з DOM за десять секунд.
Підсумок цієї частини: воронка знає про кожну людину більше, ніж вона про воронку, а платний контент не існує ніде, крім сервера.
Пейвол і тріальний тиждень
Три тарифи, виділено середній. Кожен елемент тут працює на конверсію, а ризик чарджбеків закрито інструментами на боці платіжного провайдера.
Тарифи
Вхід
Символічна ціна за сім днів
Перекреслена повна ціна
Тиждень
ВиділеноСередня ціна, основний вибір
Перекреслена повна ціна
Місяць
Найкраща ціна за одиницю
Перекреслена повна ціна
Якір, середній тариф і гарантія
Перекреслена повна ціна задає якір, середній тариф виділено, і він стає вибором за замовчуванням, гарантія повернення знімає останнє заперечення. Умова автопродовження стоїть над кнопкою коротко й поруч із гарантією: так її вимагають майданчики і провайдер, і в такій подачі вона не гальмує покупку.
Справжня терміновість замість таймера
Фальшивого зворотного відліку немає. Терміновість тут справжня й оплачувана: черга на генерацію і прискорення за доплату. Це конвертить краще за таймер і не викликає запитань у модерації.
Апсел на піку бажання
Звіт готується двадцять хвилин. За невелику доплату черга скорочується до трьох. Собівартість нульова, а купують охоче: людина щойно заплатила, бажання на піку, і вона хоче результат зараз.
Тиждень порціями
Першого дня приходить зображення, другого, третього і п'ятого решта розділів звіту, кожен листом і окремою сторінкою. Це і є заміна застосунку: у людини є причина не скасовувати підписку на третій день.
Що тут працює на конверсію
Інженерія в цьому кейсі обслуговує продаж. Нижче прийоми, які ведуть людину від оголошення до оплати й далі до другого тижня, і чому кожен із них стоїть на своєму місці.
- 01
Перше запитання замість лендингу
Рекламний трафік потрапляє на пре-лендер і через один екран уже відповідає. Що коротший шлях від кліку до першої дії, то дешевший кожен наступний крок.
- 02
Два легкі «так» на початку
Перші запитання нейтральні, великими картками, в один тап. Людина вмикається в діалог до того, як від неї щось вимагали.
- 03
Дата народження як точка вкладення
До цього кроку людина вже відповіла на кілька запитань і вклалася. Після точки вкладення квіз кидають помітно рідше, тому біль і особисті дані йдуть лише після неї.
- 04
Пауза, яка продає результат
Завантаження з підписаними етапами розрахунку перетворює очікування на цінність: людина бачить, що для неї щось рахують, і результат сприймається дорожчим.
- 05
Розрив цікавості
Часткове розкриття зі справжнім заголовком, справжнім зведенням і розмитим зображенням. Відповідь уже майже видно, і це сильніше за будь-яку обіцянку на лендингу.
- 06
Символічна ціна входу
Рішення про перший платіж маленьке, тому його ухвалюють швидко. Далі працюють підписка й порційна видача.
- 07
Якір, середній тариф, гарантія
Три тарифи з виділеним середнім і перекресленою повною ціною спрямовують вибір, гарантія знімає останній сумнів.
- 08
Справжня терміновість
Не таймер, а черга на генерацію з платним прискоренням. Терміновість, за яку людина готова доплатити, конвертить і приносить гроші водночас.
- 09
Другий тиждень як окремий продаж
Порційна видача дає причину не скасовувати підписку. Утримання тут і є конверсія другого платежу.
- 10
Аналітика за кроками як інструмент продажів
Коли видно, на якому з дев'ятнадцяти екранів тече воронка, лагодиться саме він: креатив, запитання чи офер. Відновлені покинуті сесії показують, де саме.
Оплата й еквайринг
Платіжний шар сховано за інтерфейсом, провайдера можна замінити без правок у воронці. І головне: клієнт ніколи не вирішує, скільки він платить.
Ціна рахується на сервері
Сума і склад замовлення завжди обчислюються на сервері з ідентифікатора оферу. З браузера приходить лише цей ідентифікатор. Будь-яка ціна, що прийшла від клієнта, ігнорується за визначенням.
Потік оплати
Інвойс створюється у провайдера, далі редирект або вбудована форма. Результат повертається вебхуком із перевіркою підпису, статус я додатково звіряю окремим запитом, а повторну доставку вебхука обробляю ідемпотентно. Повні дані картки через наш периметр не проходять.
Еквайринг під високоризикову категорію
Категорія високоризикова, тому еквайринг було погоджено паралельно з розробкою, і в запасі є другий провайдер. На боці провайдера ввімкнено системи зниження чарджбеків, а платіжний контур готовий повністю: оплата, автопродовження, повернення за гарантією і скасування підписки в один клік.
Генерація звіту
Завдання ставиться в чергу в момент оплати, а не після натискання кнопки. З одного набору відповідей запускаються три паралельні задачі.
Текст
Мовна модель отримує не сирі відповіді, а структурований профіль: похідні поля з дати народження, названі якості, тип зв'язку, названу трудність. На виході три фіксовані розділи, завжди однієї форми.
Зображення
Графічна модель отримує опис зовнішності, зібраний із відповідей і похідних полів. Результат проходить постобробку під єдиний візуальний стиль, щоб два звіти не виглядали як два різні продукти.
Збирання
Текст і зображення складаються в лист і в персональну сторінку, і те саме збирання живить порційну видачу протягом тижня.
Стелю часу задано явно. Якщо генерація не вклалася, людина отримує те, що готове, а частина, якої бракує, досилається. Форма відповіді зафіксована, тому модель можна замінити без жодної правки в інтерфейсі.
Три шари аналітики
Рекламні майданчики, блокувальники й Safari гублять події. Я виходжу з цього й не спираюся на жоден шар окремо: у кожного своя роль, і вони не залежать один від одного.
Первинний, власний
Кожна подія лягає у власну базу з ідентифікатором сесії, кроком, індексом кроку, часом і повною атрибуцією: усі п'ять utm-міток, реферер, варіант лендингу, варіант квізу, мова, тип пристрою. Цей шар не залежить ні від блокувальників, ні від майданчиків, і саме за ним рахується юніт-економіка.
Браузерні пікселі
Провайдери стоять за спільним інтерфейсом, ідентифікатори живуть у змінних оточення, у код не зашито жодного. Провайдер без ідентифікатора не завантажується і в мережу не ходить.
Серверні події
Meta Conversions API і TikTok Events API. Подія йде з сервера в момент, коли факт записано в базу, а не коли спрацював браузер.
Майданчики
- Meta PixelОсновна закупівля
- TikTok PixelДругий канал
- Google Ads / GA4Ремаркетинг і наскрізна аналітика
- PostHogПродуктова аналітика, воронка за кроками, записи сесій
Дедуплікація обов'язкова: браузерна й серверна події несуть один event_id, і майданчик склеює їх в одну. Без цього конверсії рахуються двічі, а кампанії навчаються на завищених числах.
Серверний шар закриває діру блокувальників та iOS, але головне в іншому: він передає події, яких у браузері не буває взагалі. Підтверджена оплата приходить вебхуком від провайдера, а не зі сторінки, і майданчик дізнається про неї саме тоді, коли про неї дізнаюся я.
Подія на кожному з дев'ятнадцяти екранів дає воронку за кроками, а не одну цифру конверсії. Просідає перший перехід: проблема в гачку й креативі. Другий: запитання стали особистими надто рано. Передостанній: проблема в офері, а не у квізі. Ці випадки важливо розрізняти, бо без такої аналітики найчастіше лагодять не те.
Карта подій
| Крок воронки | Власна подія | Стандартна подія Meta |
|---|---|---|
| Показ лендингу | landing_view | PageView |
| Старт квізу | quiz_started | ViewContent |
| Кожен крок | step_view | кастомна |
| Відповідь | quiz_answered | кастомна |
| Повернення назад | step_back | кастомна |
| Завершення квізу | quiz_completed | кастомна |
| Пошта | email_submitted | Lead |
| Показ пейволу | buybox_view | ViewContent |
| Початок оплати | checkout_started | InitiateCheckout |
| Оплата | payment_success | Purchase |
| Підписка | subscription_created | Subscribe |
Рушій квізу
У коді немає жодного рядка контенту. Рушій повторно використовуваний, офер це конфігурація, і другий продукт на тому ж рушії не потребує переписувати схему.
Контент живе в JSON
Тексти, запитання, варіанти, зображення, розгалуження та юридичні документи. Правка формулювання не потребує ні збірки, ні деплою.
Екрани через реєстр
Тип кроку обирає компонент через реєстр. Новий тип екрана це один компонент і один рядок у реєстрі.
Відповіді з просторами імен
Спільні поля й поля конкретного оферу розділені заздалегідь. Другий офер додається поруч, а не поверх.
Дерево відповідей збирає сервер
Воно перезбирається з таблиці відповідей, а не приймається знімком від клієнта. Зіпсований або підроблений знімок із браузера не може пошкодити стан.
Персоналізація без коду
Три декларативні механізми. Дзеркала підставляють попередню відповідь у текст. Розгалуження змінює вміст екрана, не змінюючи індекс кроку, тому прямі посилання не ламаються, а аналітика не розходиться. Набори варіантів підставляють різні списки відповідей залежно від попереднього вибору.
П'ять мов як система
Англійська, іспанська, німецька, румунська й польська: двадцять п'ять попередньо зібраних сторінок. Локалізація тут не файл перекладу, а частина архітектури.
Одна мова, одна адреса
Мова завжди в URL. На етапі рендера нічого не вгадується.
Визначення за пріоритетом
Явний вибір у куці, потім Accept-Language, потім гео, потім англійська. Заголовок браузера стоїть вище за геолокацію свідомо: IP каже, де розташований пристрій, а не якою мовою людина читає.
Платний трафік оминає визначення
Іспанська кампанія веде на /es, німецька на /de. Точність стовідсоткова, затримки немає, а модерація бачить мову, що збігається з мовою оголошення.
Явна адреса ніколи не перенаправляється
Усі редиректи тимчасові: постійний кешується браузером і замикає людину в одній мові назавжди.
Перекладено все, а не лише видиме
Гілки дзеркал, тексти згоди, підписи полів, alt зображень, метаописи. Назви місяців беруться із системної локалі, числа приведено до локальних форматів, а відмінки слов'янських мов вирішено окремими формами для різних позицій у реченні.
Юридичний шар і сховище
Згода як факт у базі
На першому кроці квізу стоїть обов'язкова галочка: доки її не позначено, варіанти відповіді не реагують. Факт згоди пишеться в базу з ідентифікатором сесії, часом і атрибуцією. У спорі з еквайром це пряма відповідь на запитання, хто, коли і звідки погоджувався.
Умови й політика з конфігурації
Обидва документи рендеряться з конфігурації, реквізити підставляються з одного місця. Політика чесно описує автоматичну генерацію тексту й зображення, відсутність унікальності результату, строк зберігання, права суб'єкта даних, кнопку скасування й автопродовження. Конкуренти це ігнорують. У Європі це вже не дрібниця.
Один інтерфейс до бази
Жоден обробник маршруту не пише SQL, усе спілкування з базою іде через один інтерфейс. Реалізації замінні: локальна й продакшен-PostgreSQL обираються рядком підключення. Схема створюється при першому запиті, міграції запускати не потрібно.
Розвідка перед будівництвом
Перш ніж писати код, я розібрав двох працюючих конкурентів екран за екраном і проаналізував близько десятка продуктів через бібліотеку реклами Meta: активні креативи, дати запуску, гео, домени призначення.
Розвідка дала більше, ніж структуру воронки. Два бренди виявилися одним оператором: побайтово однакові умови, одна юрособа, один стек. Третій рекламується під назвами сторінок, що не збігаються з брендом, і за іменем бренду в бібліотеці не знаходиться взагалі. А їхні технічні слабкості стали моїм списком того, чого робити не можна.
Що я свідомо не повторив
- Стан квізу лише в браузері
- Запитання зашиті в бандл
- Платний текст у DOM під розмиттям
- Пікселі без згоди
- Очікування без пояснення
Що я вимірюю
Аналітику побудовано навколо семи переходів. Кожен відповідає на своє запитання, і саме тому проблему у воронці видно за хвилини, а не за тиждень.
| Перехід | Про що говорить |
|---|---|
| Лендинг → перша відповідь | Гачок і креатив |
| Перша відповідь → дата народження | Чи не зарано запитання стали особистими |
| Дата народження → кінець квізу | Сходи ескалації |
| Кінець квізу → пошта | Довіра в момент запиту даних |
| Пошта → пейвол | Сила часткового розкриття |
| Пейвол → початок оплати | Офер: головна метрика продукту |
| Оплата → скасування в перші 7 днів | Доставка цінності протягом тижня |
Цифри за цими переходами, як і виручка, залишаються в партнерів. На дзвінку розберу воронку за кроками.
Що показує цей кейс
Платформа інша, ніж у роботах на Shopify. Мислення те саме, і тут воно проходить увесь шлях: від розвідки й оферу до каси й утримання.
Квіз-воронка повністю в одних руках
Від пре-лендера й порядку запитань до часткового розкриття й пейволу.
Комерційна модель, а не лише верстка
Тарифи, тріальний тиждень, апсел і причини за кожним рішенням спроєктовані мною, а не отримані в брифі.
Трекінг без сліпих зон
Первинні події, браузерні пікселі й серверні події з дедуплікацією, за кроками, до оплати включно.
П'ять ринків з однієї кодової бази
Адреси, визначення мови, маршрутизація реклами й граматика вирішені системно.
Команда, зібрана під задачу
Трафік і супутні ролі я наймав і вів сам. Розробка повністю моя.
На Shopify та сама воронка збирається з квіз-секції або застосунку, Selling Plans для підписки, Web Pixel для подій чекауту й того самого серверного шару за ними. Платформа змінює деталі. Мислення не змінюється.
Стек
Фронтенд
- Pre-rendered pages, one URL per language
- Config-driven quiz engine
- Component registry per screen type
Дані
- PostgreSQL
- Single storage interface
- Server-side session and answer tree
Платежі
- Provider behind an interface
- Signed webhooks
- Idempotent order handling
Аналітика
- First-party event store
- Meta Pixel + Conversions API
- TikTok Pixel + Events API
- GA4 and Google Ads
- PostHog
Генерація
- Language model for the report
- Image model for the visual
- Queue with a time ceiling
Володіння
Продуктові рішення ухвалювалися разом із партнерами. Архітектура, дизайн воронки, рушій, аналітика, локалізація і весь код мої, як і розвідка перед стартом.
Попередній кейс
Boxwood Coffee
Адаптація Prestige для обсмажувача спешелті-кави: розуміти, що не треба переробляти.
Передайте вітрину й вважайте питання закритим.
Надішліть задачу й мету. Далі розберуся в коді, доведу роботу до релізу й перевірю сам.
Почати розмову