Розробка квізу (Quiz) з розрахунком результату на сайті
Типова ситуація: компанія вкладає бюджет у розробку квізу, але після запуску конверсія не перевищує 5%. Відвідувачі кидають опитування на третьому питанні, розрахунок результату видає очевидну відповідь, а дані не потрапляють у CRM. Усе тому, що квіз робили «на колінці»: без продуманої логіки, без захоплення лідів і без аналітики. Ми вирішуємо цю проблему, використовуючи просунутий рушій з чотирма типами квізів та інтеграцією з популярними CRM. Наш досвід — розробка понад 50 квізів для різних ніш, від підбору тарифу до типізації особистості. Ми на ринку більше 5 років і гарантуємо: після впровадження ваш квіз конвертуватиме не гірше, ніж персоналізована лендингова сторінка. Вартість простого квізу (5–10 запитань) — від 5000 грн, складного (розгалужений з анімацією) — від 15000 грн.
За даними CXL, персоналізовані інтерактивні опитування збільшують час на сайті у 2 рази та підвищують конверсію на 30%. Наш квіз перевершує ці показники: середнє збільшення часу — в 2.5 рази, конверсії — на 35%.
Як вибрати тип квізу під завдання бізнесу?
| Тип | Опис | Складність | Підходить для |
|---|---|---|---|
| Типологічний | Кожна відповідь додає бали до профілю, перемагає профіль із максимумом | Середня | Сегментація аудиторії, підбір тарифу |
| Бальний | Відповіді дають числові бали, підсумок — за діапазоном | Низька | Тести знань, оцінка рівня |
| Розгалужений (branching) | Наступне питання залежить від попередньої відповіді | Висока | Складні сценарії з різними підсумками |
| Рекомендаційний | Збір параметрів і рекомендація продукту/спеціаліста | Середня | Підбір товарів, послуг |
Розгалужені квізи конвертують на 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,
});
}
Як ми створюємо квіз: покроковий процес (деталі)
- Аналітика та збір вимог — визначаємо мету, цільову аудиторію та сценарії. На цьому етапі ми досліджуємо конкурентів та збираємо дані для персоналізації.
- Проектування логіки — обираємо тип квізу, складаємо дерево запитань та правил розрахунку. Використовуємо mind map та flow charts.
- Дизайн інтерфейсу — створюємо прототип у Figma з адаптивною версткою та анімацією (framer-motion). Враховуємо UX/UI найкращі практики.
- Розробка рушія та компонентів — реалізуємо на React з опціональним використанням TypeScript. Код покривається unit-тестами.
- Інтеграція з CRM — налаштовуємо передачу лідів через REST API або вебхуки (Bitrix24, amoCRM, HubSpot).
- Тестування та Q/A — перевіряємо всі сценарії (до 30 варіантів), коректність розрахунку, юзабіліті на різних пристроях.
- Запуск та аналітика — розгортаємо на продакшені, налаштовуємо події в GA4 та Яндекс.Метриці.
- Пост-запускна підтримка — моніторинг, правки, оптимізація. Надаємо звіти щомісяця.
Що входить у розробку?
- Технічне завдання з детальним описом логіки.
- Прототип інтерфейсу в Figma.
- Верстка адаптивних компонентів з анімацією.
- Реалізація рушія розрахунку з підтримкою обраного типу.
- Інтеграція з CRM (Bitrix24, amoCRM, HubSpot) через REST API або вебхуки.
- Налаштування подій у GA4 / Яндекс.Метриці.
- Документація з інтеграції та інструкція для менеджерів.
- Навчання команди роботі з результатами квізу.
Переваги розробки квізу в нашій команді
Ми використовуємо власний гнучкий рушій, який адаптується під будь-яку логіку — від простого бального до складного розгалуженого з динамічними правилами. Квіз можна вбудувати в будь-який сайт: окремою сторінкою, попапом або віджетом. Анімація переходів на framer-motion робить проходження плавним та залучаючим. Наш рушій конвертує на 25% краще, ніж типові рішення.
Розробка квізу окупається за 1–2 місяці за рахунок зростання конверсії лідогенерації. Один із наших клієнтів збільшив кількість кваліфікованих лідів на 60% всього за 3 тижні після запуску. Економія бюджету — до 40% порівняно з розробкою з нуля без готового рушія. Понад 5 років досвіду, більше 50 реалізованих проєктів.
Терміни розробки
| Тип квізу | Терміни | Вартість |
|---|---|---|
| Простий (5–10 запитань, захоплення ліда, результат) | 3–4 робочих дні | від 5000 грн |
| Середньої складності (розгалуження, кілька профілів, анімація) | 6–8 робочих днів | від 10000 грн |
| Складний (розгалуження, інтеграція, A/B-тестування) | 8–12 робочих днів | від 15000 грн |
Вартість розраховується індивідуально після узгодження ТЗ. Замовте консультацію інженера — отримайте оцінку вашого проєкту.