Разработка квиз-воронки на 1С-Битрикс

Разработка квиз-воронки на 1С-Битрикс

Квиз-воронка — следующий уровень после обычного квиза. Вопросы показываются не линейно: ответ на один вопрос определяет, какой вопрос задать следующим. Разные пути — разные результаты и разные предложения в конце. Это позволяет точечно квалифицировать лидов: кто-то получит предложение на начальный продукт, кто-то — на премиум, кто-то — отправляется на другую страницу. Технически основная сложность — реализовать логику ветвления.

Логика ветвления: структура данных

Каждый вопрос имеет переходы (transitions): при выборе варианта X — следующий вопрос Y. Если перехода нет — идти по умолчанию к следующему по порядку или к финальному шагу.

HL-блок вопросов с ветвлением:

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'),              // single | multiple | scale | input
            new TextField('OPTIONS_JSON'),        // [{id, text, next_slug?, result_id?}]
            new StringField('DEFAULT_NEXT_SLUG'), // Следующий вопрос по умолчанию
            new BooleanField('IS_FINAL', ['values' => [false, true]]),
        ];
    }
}

Структура 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 = []; // slug => question
    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;
        }

        // Стартовый вопрос — первый по SORT
        $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      = {}; // slug => [optionIds]
    }

    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); // Данные из PHP
funnel.renderQuestion(funnel.currentSlug);

Результаты и предложения

В конце воронки пользователь получает не просто «спасибо», а персонализированный результат. Результат определяется по пути: какие ответы дал пользователь.

HL-блок результатов воронки:

class FunnelResultTable extends \Bitrix\Main\ORM\Data\DataManager
{
    public static function getTableName(): string { return 'b_hl_quiz_funnel_results'; }

    public static function getMap(): array
    {
        return [
            new IntegerField('ID', ['primary' => true, 'autocomplete' => true]),
            new IntegerField('FUNNEL_ID'),
            new StringField('TITLE'),
            new TextField('DESCRIPTION'),
            new StringField('CTA_TEXT'),
            new StringField('CTA_URL'),
            new TextField('CONDITIONS_JSON'), // Правила: [{question_slug, option_ids}]
        ];
    }
}

Сервис подбора результата по ответам:

class ResultMatcher
{
    public function match(int $funnelId, array $answers): ?array
    {
        $results = FunnelResultTable::getList([
            'filter' => ['FUNNEL_ID' => $funnelId],
        ])->fetchAll();

        foreach ($results as $result) {
            $conditions = json_decode($result['CONDITIONS_JSON'], true) ?? [];
            if ($this->checkConditions($conditions, $answers)) {
                return $result;
            }
        }

        return null; // Нет совпадения — показать результат по умолчанию
    }

    private function checkConditions(array $conditions, array $answers): bool
    {
        foreach ($conditions as $condition) {
            $slug      = $condition['question_slug'];
            $required  = $condition['option_ids'];
            $given     = $answers[$slug] ?? [];

            if (empty(array_intersect($required, $given))) {
                return false;
            }
        }
        return true;
    }
}

Лид с контекстом воронки

В Битрикс24 создаём лид и прикладываем полный путь пользователя:

$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),
]);

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