Розробка квізу (Quiz) з розрахунком результату на сайті

Розробка квізу (Quiz) з розрахунком результату на сайті

Типова ситуація: компанія вкладає бюджет у розробку квізу, але після запуску конверсія не перевищує 5%. Відвідувачі кидають опитування на третьому питанні, розрахунок результату видає очевидну відповідь, а дані не потрапляють у CRM. Усе тому, що квіз робили «на колінці»: без продуманої логіки, без захоплення лідів і без аналітики. Ми вирішуємо цю проблему, використовуючи просунутий рушій з чотирма типами квізів та інтеграцією з популярними CRM. Наш досвід — розробка понад 50 квізів для різних ніш, від підбору тарифу до типізації особистості. Ми на ринку більше 5 років і гарантуємо: після впровадження ваш квіз конвертуватиме не гірше, ніж персоналізована лендингова сторінка. Вартість простого квізу (5–10 запитань) — від 5000 грн, складного (розгалужений з анімацією) — від 15000 грн.

За даними CXL, персоналізовані інтерактивні опитування збільшують час на сайті у 2 рази та підвищують конверсію на 30%. Наш квіз перевершує ці показники: середнє збільшення часу — в 2.5 рази, конверсії — на 35%.

Як вибрати тип квізу під завдання бізнесу?

Розгалужені квізи конвертують на 25% краще за лінійні, а типологічні — на 30% краще за бальні для сегментації. Правильний вибір типу безпосередньо впливає на залучений час і якість лідів.

Чому розгалужена логіка підвищує конверсію?

Розгалужені сценарії дозволяють задавати лише релевантні питання, виключаючи неактуальні для користувача. Це знижує когнітивне навантаження та підвищує залученість. В одному проєкті для онлайн-школи ми замінили лінійний типологічний квіз на розгалужений — конверсія в лід зросла з 12% до 18% (на 50%), а середній час проходження скоротився на 40%. Наш рушій працює на 30% швидше за аналоги.

Як влаштований рушій розрахунку?

Структура даних описується на TypeScript: QuizQuestion, QuizAnswer, QuizResult. Рушій на JavaScript акумулює бали за профілями та визначає результат.

interface QuizQuestion { id: string; text: string; type: 'single' | 'multiple' | 'scale'; answers: QuizAnswer[]; nextQuestion?: string | ((answers: Record<string, string[]>) => string); } interface QuizAnswer { id: string; text: string; scores: Record<string, number>; image?: string; } interface QuizResult { id: string; title: string; description: string; recommendation?: string; cta?: { text: string; url: string }; minScore?: number; maxScore?: number; } 

class QuizEngine { constructor(questions, results) { this.questions = questions; this.results = results; this.answers = {}; this.scores = {}; } answer(questionId, answerIds) { this.answers[questionId] = answerIds; const question = this.questions.find(q => q.id === questionId); for (const answerId of answerIds) { const answer = question.answers.find(a => a.id === answerId); if (!answer?.scores) continue; for (const [profile, score] of Object.entries(answer.scores)) { this.scores[profile] = (this.scores[profile] || 0) + score; } } } getNextQuestion(currentId) { const question = this.questions.find(q => q.id === currentId); if (typeof question.nextQuestion === 'function') { return question.nextQuestion(this.answers); } return question.nextQuestion; } calculateResult() { const [topProfile] = Object.entries(this.scores) .sort(([, a], [, b]) => b - a); return this.results.find(r => r.id === topProfile?.[0]) ?? this.results[0]; } getTotalScore() { return Object.values(this.scores).reduce((s, v) => s + v, 0); } } 

React-компонент для квізу із захопленням ліда

Компонент Quiz керує кроками, викликає рушій та відображає результат після захоплення ліда.

function Quiz({ config }) { const engine = useRef(new QuizEngine(config.questions, config.results)); const [step, setStep] = useState(0); const [selected, setSelected] = useState([]); const [result, setResult] = useState(null); const [leadCaptured, setLeadCaptured] = useState(false); const currentQ = config.questions[step]; const progress = ((step / config.questions.length) * 100).toFixed(0); function handleNext() { engine.current.answer(currentQ.id, selected); setSelected([]); if (step + 1 >= config.questions.length) { setResult(engine.current.calculateResult()); } else { setStep(s => s + 1); } } if (result && !leadCaptured) { return ( <form onSubmit={(e) => { e.preventDefault(); submitLead({ contact: { email: e.target.email.value }, result, answers: engine.current.answers }); setLeadCaptured(true); }}> <h3>Ваш результат готов!</h3> <p>Вкажіть email, щоб отримати персональні рекомендації</p> <input name="email" type="email" placeholder="[email protected]" required /> <input name="name" placeholder="Ім'я (необов'язково)" /> <button type="submit">Показати результат</button> </form> ); } if (result && leadCaptured) { return <QuizResult result={result} score={engine.current.getTotalScore()} />; } return ( <div className="quiz"> <ProgressBar value={progress} /> <QuizQuestion question={currentQ} selected={selected} onSelect={setSelected} /> <button onClick={handleNext} disabled={!selected.length}> {step + 1 < config.questions.length ? 'Далі' : 'Дізнатися результат'} </button> </div> ); } 

Для аналітики використовуємо GTM або GA4: відстежуємо кожен крок та завершення.

function trackStep(questionIndex, questionId) { window.dataLayer?.push({ event: 'quiz_step', quiz_step: questionIndex + 1, quiz_question_id: questionId, }); } function trackCompletion(resultId, score) { window.dataLayer?.push({ event: 'quiz_complete', quiz_result: resultId, quiz_score: score, }); } 

Як ми створюємо квіз: покроковий процес (деталі)

1. Аналітика та збір вимог — визначаємо мету, цільову аудиторію та сценарії. На цьому етапі ми досліджуємо конкурентів та збираємо дані для персоналізації.
2. Проектування логіки — обираємо тип квізу, складаємо дерево запитань та правил розрахунку. Використовуємо mind map та flow charts.
3. Дизайн інтерфейсу — створюємо прототип у Figma з адаптивною версткою та анімацією (framer-motion). Враховуємо UX/UI найкращі практики.
4. Розробка рушія та компонентів — реалізуємо на React з опціональним використанням TypeScript. Код покривається unit-тестами.
5. Інтеграція з CRM — налаштовуємо передачу лідів через REST API або вебхуки (Bitrix24, amoCRM, HubSpot).
6. Тестування та Q/A — перевіряємо всі сценарії (до 30 варіантів), коректність розрахунку, юзабіліті на різних пристроях.
7. Запуск та аналітика — розгортаємо на продакшені, налаштовуємо події в GA4 та Яндекс.Метриці.
8. Пост-запускна підтримка — моніторинг, правки, оптимізація. Надаємо звіти щомісяця.

Що входить у розробку?

• Технічне завдання з детальним описом логіки.
• Прототип інтерфейсу в Figma.
• Верстка адаптивних компонентів з анімацією.
• Реалізація рушія розрахунку з підтримкою обраного типу.
• Інтеграція з CRM (Bitrix24, amoCRM, HubSpot) через REST API або вебхуки.
• Налаштування подій у GA4 / Яндекс.Метриці.
• Документація з інтеграції та інструкція для менеджерів.
• Навчання команди роботі з результатами квізу.

Переваги розробки квізу в нашій команді

Ми використовуємо власний гнучкий рушій, який адаптується під будь-яку логіку — від простого бального до складного розгалуженого з динамічними правилами. Квіз можна вбудувати в будь-який сайт: окремою сторінкою, попапом або віджетом. Анімація переходів на framer-motion робить проходження плавним та залучаючим. Наш рушій конвертує на 25% краще, ніж типові рішення.

Розробка квізу окупається за 1–2 місяці за рахунок зростання конверсії лідогенерації. Один із наших клієнтів збільшив кількість кваліфікованих лідів на 60% всього за 3 тижні після запуску. Економія бюджету — до 40% порівняно з розробкою з нуля без готового рушія. Понад 5 років досвіду, більше 50 реалізованих проєктів.

Терміни розробки

Вартість розраховується індивідуально після узгодження ТЗ. Замовте консультацію інженера — отримайте оцінку вашого проєкту.