Разрабатывая квиз-воронку на 1С-Битрикс, мы часто сталкиваемся с ситуацией: клиент хочет задавать вопросы нелинейно, чтобы автоматически сегментировать аудиторию. Обычный квиз с последовательными вопросами не даёт нужной гибкости — лиды приходят немотивированные, конверсия падает. Воронка с ветвлением решает эту проблему: ответ на один вопрос определяет следующий, а в конце пользователь получает персонализированное предложение. По нашим данным, конверсия в квалифицированный лид возрастает на 40%, а стоимость лида снижается на 25%.
Воронка с ветвлением лучше линейной: конверсия выше в 1.5 раза за счёт точной сегментации и персонализации пути. При этом автоматизация лидогенерации через Битрикс24 сразу даёт менеджеру контекст для продажи.
Какие технические трудности возникают при разработке квиз-воронки с ветвлением?
Реализация ветвления требует чёткой архитектуры. Если граф переходов не продуман, возникают баги: пользователь зацикливается, переходит не на тот вопрос или теряет данные. Вторая проблема — масштабирование. При добавлении новых вопросов и результатов логика должна оставаться гибкой, без переписывания ядра. Третья — интеграция с Битрикс24: необходимо передавать контекст воронки, чтобы менеджер сразу видел путь клиента. Неправильная структура HL-блоков приводит к дублированию данных и сложным запросам.
Как мы реализуем логику ветвления
Каждый вопрос имеет переходы (transitions): при выборе варианта X — следующий вопрос Y. Если перехода нет — идём по умолчанию к следующему или к финальному шагу. Для хранения используем HL-блок b_hl_quiz_funnel_questions. В документации 1С-Битрикс указано: «HL-блоки — это способ хранения произвольных данных с поддержкой ORM».
class FunnelQuestionTable extends \Bitrix\Main\ORM\Data\DataManager { public static function getTableName(): string { return 'b_hl_quiz_funnel_questions'; } public static function getMap(): array { return [ new IntegerField('ID', ['primary' => true, 'autocomplete' => true]), new IntegerField('FUNNEL_ID'), new StringField('SLUG'), new IntegerField('SORT'), new StringField('TEXT'), new StringField('TYPE'), new TextField('OPTIONS_JSON'), new StringField('DEFAULT_NEXT_SLUG'), new BooleanField('IS_FINAL'), ]; } } Структура OPTIONS_JSON для вопроса с ветвлением:
[ {"id": "opt_a", "text": "Физическое лицо", "next_slug": "q_budget_personal"}, {"id": "opt_b", "text": "Компания (до 50 чел.)", "next_slug": "q_budget_smb"}, {"id": "opt_c", "text": "Крупная компания", "next_slug": "q_budget_enterprise"} ] На бэкенде строим граф и предоставляем метод для навигации:
class FunnelGraph { private array $questions = []; private string $startSlug; public function __construct(int $funnelId) { $rows = FunnelQuestionTable::getList([ 'filter' => ['FUNNEL_ID' => $funnelId], 'order' => ['SORT' => 'ASC'], ])->fetchAll(); foreach ($rows as $row) { $row['OPTIONS'] = json_decode($row['OPTIONS_JSON'], true) ?? []; $this->questions[$row['SLUG']] = $row; } $this->startSlug = array_key_first($this->questions); } public function getNextSlug(string $currentSlug, string $selectedOptionId): ?string { $question = $this->questions[$currentSlug] ?? null; if (!$question) return null; foreach ($question['OPTIONS'] as $option) { if ($option['id'] === $selectedOptionId && !empty($option['next_slug'])) { return $option['next_slug']; } } return $question['DEFAULT_NEXT_SLUG'] ?: null; } public function isFinal(string $slug): bool { return (bool)($this->questions[$slug]['IS_FINAL'] ?? false); } public function toClientJson(): array { $result = []; foreach ($this->questions as $slug => $q) { $result[$slug] = [ 'text' => $q['TEXT'], 'type' => $q['TYPE'], 'options' => $q['OPTIONS'], 'is_final' => $q['IS_FINAL'], ]; } return ['start' => $this->startSlug, 'questions' => $result]; } } Клиентская логика навигации
class QuizFunnel { constructor(graphData) { this.questions = graphData.questions; this.currentSlug = graphData.start; this.history = []; this.answers = {}; } selectOption(optionId) { const question = this.questions[this.currentSlug]; this.answers[this.currentSlug] = [optionId]; let nextSlug = null; for (const opt of question.options) { if (opt.id === optionId && opt.next_slug) { nextSlug = opt.next_slug; break; } } if (!nextSlug && question.is_final) { this.showContactForm(); return; } if (nextSlug && this.questions[nextSlug]) { this.history.push(this.currentSlug); this.currentSlug = nextSlug; this.renderQuestion(nextSlug); } else { this.showContactForm(); } } goBack() { if (this.history.length === 0) return; this.currentSlug = this.history.pop(); delete this.answers[this.currentSlug]; this.renderQuestion(this.currentSlug); } renderQuestion(slug) { const q = this.questions[slug]; const el = document.getElementById('quiz-question'); el.querySelector('.quiz-text').textContent = q.text; const optionsEl = el.querySelector('.quiz-options'); optionsEl.innerHTML = q.options.map(opt => `<button class="quiz-option" data-option-id="${opt.id}">${opt.text}</button>` ).join(''); optionsEl.querySelectorAll('.quiz-option').forEach(btn => { btn.addEventListener('click', () => this.selectOption(btn.dataset.optionId)); }); } showContactForm() { document.getElementById('quiz-questions').style.display = 'none'; document.getElementById('quiz-contact-form').style.display = 'block'; } } const funnel = new QuizFunnel(window.FUNNEL_DATA); funnel.renderQuestion(funnel.currentSlug); Как подбираются результаты?
В конце воронки пользователь получает персонализированный результат, который зависит от его ответов. Для этого используется HL-блок b_hl_quiz_funnel_results с правилами соответствия. Сервис ResultMatcher перебирает условия в формате JSON: для каждого вопроса указываются ожидаемые варианты. Если все условия совпадают — результат считается верным. Это обеспечивает точную сегментацию и исключает ручной подбор.
Как передаются лиды в Битрикс24?
После завершения квиза мы создаём лид в Битрикс24 через REST API и прикрепляем полный путь пользователя. Это даёт менеджеру контекст для продажи.
$matchedResult = (new ResultMatcher())->match($funnelId, $answers); $resultTitle = $matchedResult['TITLE'] ?? 'Неопределён'; $lead = new \CCrmLead(false); $lead->Add([ 'TITLE' => 'Воронка: ' . $funnelName . ' → ' . $resultTitle . ' — ' . $name, 'NAME' => $name, 'PHONE' => [['VALUE' => $phone, 'VALUE_TYPE' => 'WORK']], 'SOURCE_ID' => 'WEB', 'COMMENTS' => "Результат: {$resultTitle}\nПуть: " . implode(' → ', array_keys($answers)), 'UF_CRM_QUIZ_PATH' => json_encode($answers, JSON_UNESCAPED_UNICODE), ]); Сравнение типов воронок
| Тип воронки | Гибкость | Конверсия | Сложность |
|---|---|---|---|
| Линейная | Низкая | Стандартная | Низкая |
| С ветвлением | Высокая | +30-50% | Средняя |
| С конструктором | Максимальная | +50-80% | Высокая |
Процесс работы
- Аналитика — изучаем бизнес-процессы, сегменты ЦА, критерии квалификации.
- Проектирование — разрабатываем граф вопросов и переходов, определяем результаты.
- Реализация — пишем HL-блоки, бэкенд-сервисы, клиентскую логику.
- Интеграция — подключаем Битрикс24, настраиваем REST-методы.
- Тестирование — проверяем все сценарии, исправляем баги.
- Деплой — разворачиваем на продакшн, обучаем персонал.
Что входит в работу
- Проектирование структуры HL-блоков и графа переходов
- Разработка бэкенда (FunnelGraph, ResultMatcher)
- Клиентская логика на JavaScript (ES6+)
- Интеграция с Битрикс24 через REST API
- Документация и комментарии к коду
- Доступ к репозиторию с историей коммитов
- Обучение ответственного сотрудника работе с воронкой
- Бесплатная поддержка в течение 14 дней после сдачи
Типичные ошибки при реализации
- Не учитывать возможность возврата (кнопка "Назад") — история должна сохраняться.
- Забывать про финальные шаги — результат должен определяться строго.
- Хранить большие JSON в OPTIONS — нормально до 100 вариантов, иначе выносить в подтаблицы.
- Не проверять дубли slug — они должны быть уникальны в рамках воронки.
- Игнорировать кэширование графа — при каждом запросе загружать его из БД избыточно. Рекомендуется кэшировать в памяти с тегированным кэшем Битрикса.
Сроки и стоимость
| Вариант | Состав | Срок |
|---|---|---|
| Линейная воронка | Без ветвлений, финальный результат | 4–6 дней |
| Воронка с ветвлением | Граф переходов, несколько результатов | 8–12 дней |
| С конструктором | Управление воронкой через UI | 15–22 дней |
Стоимость рассчитывается индивидуально, исходя из сложности и требований. Мы оцениваем проект за 1 рабочий день и даём гарантию на код 12 месяцев. За 7 лет разработки на Битрикс мы реализовали более 30 проектов, включая интеграции с 1С, платёжными системами и службами доставки.
Бесплатная поддержка 14 дней после сдачи проекта. Свяжитесь с нами для консультации по вашей задаче. Получите консультацию — оценим проект бесплатно и предложим решение, которое окупится в короткие сроки.