Разработка квиза (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% по сравнению с разработкой с нуля без готового движка.

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

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