Разработка квиза (Quiz) с расчётом результата на сайте
Типичная ситуация: компания вкладывает бюджет в разработку квиза, но после запуска конверсия не превышает 5%. Посетители бросают опрос на третьем вопросе, расчёт результата выдаёт очевидный ответ, а данные не попадают в CRM. Всё потому, что квиз делали «на коленке»: без продуманной логики, без захвата лидов и без аналитики. Мы решаем эту проблему, используя продвинутый движок с четырьмя типами квизов и интеграцией с популярными CRM. Наш опыт — разработка более 50 квизов для разных ниш, от подбора тарифа до типирования личности. Гарантируем: после внедрения ваш квиз будет конвертировать не хуже, чем персонализированная лендинговая страница.
По данным CXL, персонализированные интерактивные опросы увеличивают время на сайте в 2 раза и повышают конверсию на 30%.
Как выбрать тип квиза под задачи бизнеса?
| Тип | Описание | Сложность | Подходит для |
|---|---|---|---|
| Типологический | Каждый ответ добавляет очки к профилю, побеждает профиль с максимумом | Средняя | Сегментация аудитории, подбор тарифа |
| Балльный | Ответы дают числовые очки, итог — по диапазону | Низкая | Тесты знаний, оценка уровня |
| Ветвящийся (branching) | Следующий вопрос зависит от предыдущего ответа | Высокая | Сложные сценарии с разными итогами |
| Рекомендательный | Сбор параметров и рекомендация продукта/специалиста | Средняя | Подбор товаров, услуг |
Ветвящиеся квизы конвертируют на 25% лучше линейных, а типологические — на 30% лучше балльных для сегментации. Правильный выбор типа напрямую влияет на engaged time и quality of leads.
Почему ветвящаяся логика повышает конверсию?
Ветвящиеся сценарии позволяют задавать только релевантные вопросы, исключая неактуальные для пользователя. Это снижает когнитивную нагрузку и повышает вовлечённость. В одном проекте для онлайн-школы мы заменили линейный типологический квиз на ветвящийся — конверсия в лид выросла с 12% до 18%, а среднее время прохождения сократилось на 40%.
Как устроен движок расчёта?
Структура данных описывается на 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 управляет шагами, вызывает engine и отображает результат после захвата лида.
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,
});
}
Как мы создаём квиз: пошаговый процесс
- Аналитика и сбор требований — определяем цель, целевую аудиторию и сценарии.
- Проектирование логики — выбираем тип квиза, составляем дерево вопросов и правил расчёта.
- Дизайн интерфейса — создаём прототип в Figma с адаптивной вёрсткой и анимацией.
- Разработка движка и компонентов — реализуем на React с опциональным использованием TypeScript.
- Интеграция с CRM — настраиваем передачу лидов через REST API или вебхуки.
- Тестирование и Q/A — проверяем все сценарии, корректность расчёта, юзабилити.
- Запуск и аналитика — разворачиваем на продакшене, настраиваем события.
- Пост-запускная поддержка — мониторинг, правки, оптимизация.
Что входит в разработку?
- Техническое задание с детальным описанием логики.
- Прототип интерфейса в Figma.
- Вёрстка адаптивных компонентов с анимацией.
- Реализация движка расчёта с поддержкой выбранного типа.
- Интеграция с CRM (Bitrix24, amoCRM, HubSpot) через REST API или вебхуки.
- Настройка событий в GA4 / Яндекс.Метрике.
- Документация по интеграции и инструкция для менеджеров.
- Обучение команды работе с результатами квиза.
Преимущества разработки квиза в нашей команде
Мы используем собственный гибкий движок, который адаптируется под любую логику — от простого балльного до сложного ветвящегося с динамическими правилами. Квиз можно встроить в любой сайт: отдельной страницей, попапом или виджетом. Анимация переходов на framer-motion делает прохождение плавным и вовлекающим.
Разработка квиза окупается за 1–2 месяца за счёт роста конверсии лидогенерации. Один из наших клиентов увеличил количество квалифицированных лидов на 60% всего за 3 недели после запуска. Экономия бюджета — до 40% по сравнению с разработкой с нуля без готового движка.
Сроки разработки
| Тип квиза | Сроки |
|---|---|
| Простой (5–10 вопросов, захват лида, результат) | 3–4 рабочих дня |
| Средней сложности (ветвление, несколько профилей, анимация) | 6–8 рабочих дней |
| Сложный (ветвление, интеграция, A/B-тестирование) | 8–12 рабочих дней |
Стоимость рассчитывается индивидуально после согласования ТЗ. Закажите консультацию инженера — получите оценку вашего проекта.