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

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

Типичная ситуация: компания вкладывает бюджет в разработку квиза, но после запуска конверсия не превышает 5%. Посетители бросают опрос на третьем вопросе, расчёт результата выдаёт очевидный ответ, а данные не попадают в CRM. Всё потому, что квиз делали «на коленке»: без продуманной логики, без захвата лидов и без аналитики. Мы решаем эту проблему, используя продвинутый движок с четырьмя типами квизов и интеграцией с популярными CRM. Наш опыт — разработка более 50 квизов для разных ниш, от подбора тарифа до типирования личности. Гарантируем: после внедрения ваш квиз будет конвертировать не хуже, чем персонализированная лендинговая страница.

По данным CXL, персонализированные интерактивные опросы увеличивают время на сайте в 2 раза и повышают конверсию на 30%.

Как выбрать тип квиза под задачи бизнеса?

Ветвящиеся квизы конвертируют на 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, }); } 

Как мы создаём квиз: пошаговый процесс

1. Аналитика и сбор требований — определяем цель, целевую аудиторию и сценарии.
2. Проектирование логики — выбираем тип квиза, составляем дерево вопросов и правил расчёта.
3. Дизайн интерфейса — создаём прототип в Figma с адаптивной вёрсткой и анимацией.
4. Разработка движка и компонентов — реализуем на React с опциональным использованием TypeScript.
5. Интеграция с CRM — настраиваем передачу лидов через REST API или вебхуки.
6. Тестирование и Q/A — проверяем все сценарии, корректность расчёта, юзабилити.
7. Запуск и аналитика — разворачиваем на продакшене, настраиваем события.
8. Пост-запускная поддержка — мониторинг, правки, оптимизация.

Что входит в разработку?

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

Преимущества разработки квиза в нашей команде

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

Разработка квиза окупается за 1–2 месяца за счёт роста конверсии лидогенерации. Один из наших клиентов увеличил количество квалифицированных лидов на 60% всего за 3 недели после запуска. Экономия бюджета — до 40% по сравнению с разработкой с нуля без готового движка.

Сроки разработки

Стоимость рассчитывается индивидуально после согласования ТЗ. Закажите консультацию инженера — получите оценку вашего проекта.