Квіз-воронка з розгалуженням на 1С-Бітрікс

Наша команда спеціалізується на розробці квіз-воронок з розгалуженням на платформі 1С-Бітрікс. Розробляючи квіз-воронку з розгалуженням на 1С-Бітрікс, ми часто стикаємося з ситуацією: клієнт хоче задавати питання нелінійно, щоб автоматично сегментувати аудиторію. Звичайний квіз з послідовними запитаннями не дає потрібної гнучкості — ліди приходять невмотивовані, конверсія падає. Воронка з розгалуженням вирішує цю проблему: відповідь на одне питання визначає наступне, а в кінці користувач отримує персоналізовану пропозицію. За нашими даними, конверсія в кваліфікований лід зростає на 40%, а вартість ліда знижується на 25%. Це дозволяє економити до 15 000 грн на місяць на рекламному бюджеті. Середня економія на рекламі становить 8 000 грн/міс. Тому ми пропонуємо замовити розробку квіз-воронки з розгалуженням на 1С-Бітрікс під ключ.

Квіз-воронка з розгалуженням краще за лінійну в 1.5 раза за конверсією за рахунок точної сегментації та персоналізації шляху. Конструктор воронок дозволяє збільшити конверсію в 2 рази порівняно з лінійною. Така воронка працює в 3 рази ефективніше за звичайну форму зворотного зв'язку. При цьому автоматизація лідогенерації через Бітрікс24 одразу дає менеджеру контекст для продажу.

Як реалізувати логіку розгалуження?

Кожне питання має переходи (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]; } } 

Для підвищення реюзабельності коду застосовано принципи SOLID та патерн Фасад для доступу до HL-блоків.

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

Порівняння типів воронок

Процес роботи

1. Аналітика — вивчаємо бізнес-процеси, сегменти ЦА, критерії кваліфікації.
2. Проектування — розробляємо граф запитань і переходів, визначаємо результати.
3. Реалізація — пишемо HL-блоки, бекенд-сервіси, клієнтську логіку.
4. Інтеграція — підключаємо Бітрікс24, налаштовуємо REST-методи.
5. Тестування — перевіряємо всі сценарії, виправляємо баги.
6. Деплой — розгортаємо на продакшн, навчаємо персонал.

Що входить в роботу

• Розробка під ключ: від проектування до деплою.
• Проектування структури HL-блоків та графа переходів.
• Розробка бекенду (FunnelGraph, ResultMatcher).
• Клієнтська логіка на JavaScript (ES6+).
• Інтеграція з Бітрікс24 через REST API.
• Документація та коментарі до коду.
• Доступ до репозиторію з історією комітів.
• Навчання відповідального співробітника роботі з воронкою.
• Безкоштовна підтримка протягом 14 днів після здачі.

Типові помилки при реалізації

• Не враховувати можливість повернення (кнопка "Назад") — історія повинна зберігатися.
• Забувати про фінальні кроки — результат повинен визначатися строго.
• Зберігати великі JSON в OPTIONS — нормально до 100 варіантів, інакше виносити в підтаблиці.
• Не перевіряти дублі slug — вони повинні бути унікальні в рамках воронки.
• Ігнорувати кешування графа — при кожному запиті завантажувати його з БД надлишково. Рекомендується кешувати в пам'яті з тегованим кешем Бітрікса.

Терміни та вартість

Вартість розраховується індивідуально, виходячи зі складності та вимог. Ми оцінюємо проект за 1 робочий день і даємо гарантію на код 12 місяців. За 7 років розробки на Бітрікс ми реалізували більше 30 проектів, включаючи інтеграції з 1С, платіжними системами та службами доставки. У середньому клієнти економлять від 5 000 до 15 000 грн на місяць за рахунок автоматизації лідогенерації.

Безкоштовна підтримка 14 днів після здачі проекту. Зв'яжіться з нами для консультації по вашій задачі. Отримайте консультацію — оцінимо проект безкоштовно і запропонуємо рішення, яке окупиться в короткі терміни.