Квіз-воронка з розгалуженням на 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),
]);
Порівняння типів воронок
| Тип воронки | Гнучкість | Конверсія | Складність | Вартість |
|---|---|---|---|---|
| Лінійна | Низька | Стандартна | Низька | від 15 000 грн |
| З розгалуженням | Висока | +30-50% | Середня | від 25 000 грн |
| З конструктором | Максимальна | +50-80% | Висока | від 40 000 грн |
Процес роботи
- Аналітика — вивчаємо бізнес-процеси, сегменти ЦА, критерії кваліфікації.
- Проектування — розробляємо граф запитань і переходів, визначаємо результати.
- Реалізація — пишемо HL-блоки, бекенд-сервіси, клієнтську логіку.
- Інтеграція — підключаємо Бітрікс24, налаштовуємо REST-методи.
- Тестування — перевіряємо всі сценарії, виправляємо баги.
- Деплой — розгортаємо на продакшн, навчаємо персонал.
Що входить в роботу
- Розробка під ключ: від проектування до деплою.
- Проектування структури HL-блоків та графа переходів.
- Розробка бекенду (FunnelGraph, ResultMatcher).
- Клієнтська логіка на JavaScript (ES6+).
- Інтеграція з Бітрікс24 через REST API.
- Документація та коментарі до коду.
- Доступ до репозиторію з історією комітів.
- Навчання відповідального співробітника роботі з воронкою.
- Безкоштовна підтримка протягом 14 днів після здачі.
Типові помилки при реалізації
- Не враховувати можливість повернення (кнопка "Назад") — історія повинна зберігатися.
- Забувати про фінальні кроки — результат повинен визначатися строго.
- Зберігати великі JSON в OPTIONS — нормально до 100 варіантів, інакше виносити в підтаблиці.
- Не перевіряти дублі slug — вони повинні бути унікальні в рамках воронки.
- Ігнорувати кешування графа — при кожному запиті завантажувати його з БД надлишково. Рекомендується кешувати в пам'яті з тегованим кешем Бітрікса.
Терміни та вартість
| Варіант | Склад | Термін | Вартість |
|---|---|---|---|
| Лінійна воронка | Без розгалужень, фінальний результат | 4–6 днів | від 15 000 грн |
| Воронка з розгалуженням | Граф переходів, декілька результатів | 8–12 днів | від 25 000 грн |
| З конструктором | Управління воронкою через UI | 15–22 днів | від 40 000 грн |
Вартість розраховується індивідуально, виходячи зі складності та вимог. Ми оцінюємо проект за 1 робочий день і даємо гарантію на код 12 місяців. За 7 років розробки на Бітрікс ми реалізували більше 30 проектів, включаючи інтеграції з 1С, платіжними системами та службами доставки. У середньому клієнти економлять від 5 000 до 15 000 грн на місяць за рахунок автоматизації лідогенерації.
Безкоштовна підтримка 14 днів після здачі проекту. Зв'яжіться з нами для консультації по вашій задачі. Отримайте консультацію — оцінимо проект безкоштовно і запропонуємо рішення, яке окупиться в короткі терміни.