Разработка опросника на сайте 1С-Битрикс

Разработка опросника на сайте 1С-Битрикс

Опросник — инструмент сбора обратной связи и исследования аудитории. В отличие от квиза, он не продаёт и не квалифицирует лидов — он изучает: что думают клиенты о продукте, почему ушли, как оценивают сервис. Для бизнеса это ценные данные для принятия решений. Битрикс не имеет готового инструмента для опросов приличного уровня — встроенный модуль iblock можно использовать для хранения, но логику опроса нужно писать с нуля.

Типы опросников

NPS (Net Promoter Score) — «Насколько вы готовы рекомендовать нас?» Шкала 0–10, открытый вопрос на объяснение. Самый простой в реализации.

CSAT (Customer Satisfaction) — оценка конкретного взаимодействия (покупка, звонок поддержки). Короткий: 1 вопрос + опциональный комментарий.

Полноценный опросник — несколько страниц вопросов, разные типы (шкала, множественный выбор, открытый ответ, матрица), ветвление.

Структура данных

Хранение через HL-блоки:

// Опросник
class SurveyTable extends \Bitrix\Main\ORM\Data\DataManager
{
    public static function getTableName(): string { return 'b_hl_surveys'; }

    public static function getMap(): array
    {
        return [
            new IntegerField('ID', ['primary' => true, 'autocomplete' => true]),
            new StringField('TITLE'),
            new StringField('SLUG'),
            new StringField('TYPE'),           // nps | csat | full
            new TextField('QUESTIONS_JSON'),   // Конфигурация вопросов
            new StringField('TRIGGER'),        // page_load | exit_intent | scroll_50 | after_order
            new IntegerField('SHOW_DELAY'),    // Задержка показа в секундах
            new BooleanField('IS_ACTIVE', ['values' => [false, true]]),
            new DatetimeField('DATE_FROM'),
            new DatetimeField('DATE_TO'),
        ];
    }
}

// Ответы
class SurveyResponseTable extends \Bitrix\Main\ORM\Data\DataManager
{
    public static function getTableName(): string { return 'b_hl_survey_responses'; }

    public static function getMap(): array
    {
        return [
            new IntegerField('ID', ['primary' => true, 'autocomplete' => true]),
            new IntegerField('SURVEY_ID'),
            new IntegerField('USER_ID'),       // NULL — анонимный
            new StringField('SESSION_ID'),
            new StringField('USER_IP'),
            new TextField('ANSWERS_JSON'),     // {question_id: answer}
            new IntegerField('COMPLETION_SEC'), // Время прохождения
            new DatetimeField('CREATED_AT'),
        ];
    }
}

NPS-опросник: простой случай

NPS проще всего — одна страница, одно действие:

// /local/components/local/survey.nps/template.php
?>
<div class="nps-widget" id="nps-widget" style="display:none;">
    <div class="nps-container">
        <button class="nps-close" onclick="NPS.dismiss()">×</button>
        <p class="nps-question">
            Насколько вы готовы рекомендовать нас своим знакомым?
        </p>
        <div class="nps-scale">
            <?php for ($i = 0; $i <= 10; $i++): ?>
                <button class="nps-score" data-score="<?= $i ?>"><?= $i ?></button>
            <?php endfor; ?>
        </div>
        <div class="nps-labels">
            <span>Точно не буду рекомендовать</span>
            <span>Обязательно порекомендую</span>
        </div>
        <div class="nps-comment" style="display:none;">
            <textarea placeholder="Расскажите подробнее..." id="nps-comment-text"></textarea>
            <button onclick="NPS.submit()">Отправить</button>
        </div>
    </div>
</div>

<script>
const NPS = {
    surveyId: <?= (int)$arResult['SURVEY']['ID'] ?>,
    selectedScore: null,

    init() {
        // Показать через delay
        setTimeout(() => {
            if (!this.wasShown()) {
                document.getElementById('nps-widget').style.display = 'flex';
                this.markShown();
            }
        }, <?= (int)$arResult['SURVEY']['SHOW_DELAY'] * 1000 ?>);

        document.querySelectorAll('.nps-score').forEach(btn => {
            btn.addEventListener('click', e => {
                this.selectScore(parseInt(e.target.dataset.score));
            });
        });
    },

    selectScore(score) {
        this.selectedScore = score;
        document.querySelectorAll('.nps-score').forEach(b => b.classList.remove('selected'));
        document.querySelector(`[data-score="${score}"]`).classList.add('selected');
        document.querySelector('.nps-comment').style.display = 'block';
    },

    async submit() {
        if (this.selectedScore === null) return;

        await fetch('/local/ajax/survey_submit.php', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                survey_id: this.surveyId,
                answers: {
                    nps_score: this.selectedScore,
                    comment:   document.getElementById('nps-comment-text').value,
                },
                sessid: BX.bitrix_sessid(),
            }),
        });

        document.getElementById('nps-widget').innerHTML =
            '<p class="nps-thanks">Спасибо за ваш отзыв!</p>';
        setTimeout(() => document.getElementById('nps-widget').style.display = 'none', 3000);
    },

    dismiss() {
        document.getElementById('nps-widget').style.display = 'none';
        this.markShown();
    },

    wasShown() {
        return !!localStorage.getItem('nps_shown_' + this.surveyId);
    },

    markShown() {
        localStorage.setItem('nps_shown_' + this.surveyId, Date.now());
    },
};

NPS.init();
</script>

Триггеры показа

Опросник должен появляться в нужный момент, а не сразу при загрузке:

const SurveyTriggers = {
    exitIntent(callback) {
        document.addEventListener('mouseleave', e => {
            if (e.clientY <= 0) callback();
        }, {once: true});
    },

    scrollDepth(percent, callback) {
        const listener = () => {
            const scrolled = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
            if (scrolled >= percent) {
                window.removeEventListener('scroll', listener);
                callback();
            }
        };
        window.addEventListener('scroll', listener);
    },

    afterOrder(callback) {
        // Показать, если текущий URL — страница успешного оформления заказа
        if (window.location.href.includes('/order/success/')) {
            setTimeout(callback, 2000);
        }
    },
};

Аналитика ответов

Для NPS — автоматически считать категории:

class NpsAnalytics
{
    public static function calculate(int $surveyId): array
    {
        $responses = SurveyResponseTable::getList([
            'filter' => ['SURVEY_ID' => $surveyId],
            'select' => ['ANSWERS_JSON'],
        ])->fetchAll();

        $detractors = 0; // 0–6
        $passives   = 0; // 7–8
        $promoters  = 0; // 9–10
        $total      = 0;

        foreach ($responses as $r) {
            $answers = json_decode($r['ANSWERS_JSON'], true);
            $score   = (int)($answers['nps_score'] ?? -1);
            if ($score < 0) continue;
            $total++;

            if ($score <= 6) $detractors++;
            elseif ($score <= 8) $passives++;
            else $promoters++;
        }

        if ($total === 0) return ['nps' => 0, 'total' => 0];

        $nps = round(($promoters / $total - $detractors / $total) * 100);

        return [
            'nps'        => $nps,
            'total'      => $total,
            'promoters'  => $promoters,
            'passives'   => $passives,
            'detractors' => $detractors,
        ];
    }
}

Защита от повторных ответов

• Cookie/localStorage: не показывать повторно на том же устройстве (30 дней).
• По user_id: если пользователь авторизован — проверить, нет ли уже записи в b_hl_survey_responses с этим USER_ID и SURVEY_ID.
• По email: если требуется анонимная, но без повторов — запросить email перед опросом и проверить.

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