Реализация NPS-опроса на сайте: пошаговое руководство

Реализация NPS-опроса на сайте

Пользователи уходят, а вы не знаете почему? NPS-опрос (Net Promoter Score) — стандарт измерения лояльности, но его внедрение часто делают неправильно: показывают всем подряд, без сегментации, не связывают с конкретными событиями. Результат — низкая конверсия ответов и мусорные данные, которые не помогают бизнесу.

За 5 лет мы внедрили NPS более чем в 50 проектах — от SaaS до интернет-магазинов. В одном из проектов правильная настройка триггеров увеличила конверсию ответов на 30%, а обработка критиков в реальном времени снизила отток на 15%. В другом проекте мгновенные уведомления о критиках сократили уход клиентов на 25%. Наш опыт гарантирует чистые данные и actionable инсайты.

Правильная сегментация и частота показа — залог высокого NPS и релевантных данных. Например, для интернет-магазина мы настраиваем показ после каждой покупки для новых клиентов, а для B2B SaaS — после завершения триала или первого контакта с поддержкой.

Свяжитесь с нами, чтобы получить консультацию по внедрению NPS и оценить потенциальную экономию на ретеншн.

Как типичные ошибки убивают ценность NPS

Первая ошибка — показывать опрос всем пользователям без разбора. Новички (менее 7 дней) ещё не сформировали впечатление, а пользователи с открытыми тикетами поддержки заведомо недовольны. Итог — смещённые данные.

Вторая — редкое или слишком частое появление. Если опрос показывать раз в полгода, вы пропускаете смену настроений. Если каждый день — пользователи блокируют виджет adblock-ом. Оптимум: раз в 90 дней, привязанный к ключевому действию.

Третья — игнорирование сегментации. Критики (0-6) и промоутеры (9-10) требуют разного подхода. Критику нужно немедленно ответить и решить проблему; промоутера — поблагодарить и предложить программу лояльности.

Какие данные собирать вместе с оценкой?

Помимо оценки (0-10) и комментария, мы сохраняем: ID пользователя или session_id, событие-триггер (order_completed, trial_ended), URL страницы, IP-адрес и временную метку. Это позволяет сегментировать результаты и выявить проблемные точки интерфейса. В бэкенде это выглядит так:

// database/migrations/create_nps_responses_table.php
Schema::create('nps_responses', function (Blueprint $table) {
    $table->id();
    $table->foreignId('user_id')->nullable()->constrained()->nullOnDelete();
    $table->string('session_id')->nullable();
    $table->tinyInteger('score')->unsigned(); // 0-10
    $table->text('comment')->nullable();
    $table->string('trigger_event')->nullable(); // 'order_completed', 'trial_ended'
    $table->string('page_url')->nullable();
    $table->ipAddress('ip')->nullable();
    $table->timestamps();
});

// NpsController
public function store(Request $request): JsonResponse {
    $validated = $request->validate([
        'score' => 'required|integer|min:0|max:10',
        'comment' => 'nullable|string|max:1000',
        'trigger_event' => 'nullable|string|max:100',
    ]);

    $response = NpsResponse::create([
        ...$validated,
        'user_id' => auth()->id(),
        'session_id' => $request->session()->getId(),
        'page_url' => $request->input('page_url'),
        'ip' => $request->ip(),
    ]);

    // Сохраняем в сессии чтобы не показывать снова
    $request->session()->put('nps_submitted_at', now()->timestamp);

    // Алерт в Slack если критик оставил комментарий
    if ($validated['score'] <= 6 && !empty($validated['comment'])) {
        SlackNotification::send('#feedback', "NPS {$validated['score']}: {$validated['comment']}");
    }

    return response()->json(['success' => true]);
}

Когда и кому показывать: условия триггеров

Время показа — 60% успеха. Мы используем три категории триггеров:

Backend: модель и API

// database/migrations/create_nps_responses_table.php
Schema::create('nps_responses', function (Blueprint $table) {
    $table->id();
    $table->foreignId('user_id')->nullable()->constrained()->nullOnDelete();
    $table->string('session_id')->nullable();
    $table->tinyInteger('score')->unsigned(); // 0-10
    $table->text('comment')->nullable();
    $table->string('trigger_event')->nullable(); // 'order_completed', 'trial_ended'
    $table->string('page_url')->nullable();
    $table->ipAddress('ip')->nullable();
    $table->timestamps();
});

// NpsController
public function store(Request $request): JsonResponse {
    $validated = $request->validate([
        'score' => 'required|integer|min:0|max:10',
        'comment' => 'nullable|string|max:1000',
        'trigger_event' => 'nullable|string|max:100',
    ]);

    $response = NpsResponse::create([
        ...$validated,
        'user_id' => auth()->id(),
        'session_id' => $request->session()->getId(),
        'page_url' => $request->input('page_url'),
        'ip' => $request->ip(),
    ]);

    // Сохраняем в сессии чтобы не показывать снова
    $request->session()->put('nps_submitted_at', now()->timestamp);

    // Алерт в Slack если критик оставил комментарий
    if ($validated['score'] <= 6 && !empty($validated['comment'])) {
        SlackNotification::send('#feedback', "NPS {$validated['score']}: {$validated['comment']}");
    }

    return response()->json(['success' => true]);
}

Как проверить, стоит ли показывать виджет?

// Middleware или хелпер для проверки
public function shouldShowNps(Request $request): bool
{
    $user = auth()->user();
    if (!$user) return false;

    // Не показывать чаще раза в 90 дней
    $lastShown = $request->session()->get('nps_shown_at');
    if ($lastShown && now()->timestamp - $lastShown < 90 * 86400) {
        return false;
    }

    // Уже ответил
    if ($request->session()->has('nps_submitted_at')) return false;

    // Пользователь зарегистрирован > 14 дней
    return $user->created_at->diffInDays(now()) >= 14;
}

Frontend: виджет на React

// NpsWidget.tsx
export function NpsWidget({ triggerEvent }: { triggerEvent: string }) {
  const [score, setScore] = useState<number | null>(null);
  const [comment, setComment] = useState('');
  const [step, setStep] = useState<'score' | 'comment' | 'done'>('score');

  const submit = async () => {
    await fetch('/api/nps', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ score, comment, trigger_event: triggerEvent }),
    });
    setStep('done');
  };

  const label = score === null ? '' : score <= 6 ? 'Критик' : score <= 8 ? 'Нейтральный' : 'Промоутер';

  return (
    <div className="fixed bottom-6 right-6 w-80 rounded-xl bg-white shadow-xl p-5">
      {step === 'score' && (
        <>
          <p className="font-semibold mb-3">Насколько вероятно, что вы порекомендуете нас?</p>
          <div className="flex gap-1 justify-between mb-2">
            {Array.from({ length: 11 }, (_, i) => (
              <button
                key={i}
                onClick={() => {
                  setScore(i);
                  setStep('comment');
                }}
                className={`w-7 h-7 rounded text-sm ${i <= 6 ? 'bg-red-100' : i <= 8 ? 'bg-yellow-100' : 'bg-green-100'}`}
              >
                {i}
              </button>
            ))}
          </div>
          <div className="flex justify-between text-xs text-gray-400">
            <span>Маловероятно</span><span>Очень вероятно</span>
          </div>
        </>
      )}
      {step === 'comment' && (
        <>
          <p className="font-semibold mb-2">Оценка: {score} ({label}). Что повлияло на вашу оценку?</p>
          <textarea
            value={comment}
            onChange={e => setComment(e.target.value)}
            className="w-full border rounded p-2 text-sm h-20 resize-none"
            placeholder="Необязательно..."
          />
          <button
            onClick={submit}
            className="mt-2 w-full bg-blue-600 text-white rounded py-1.5 text-sm"
          >
            Отправить
          </button>
        </>
      )}
      {step === 'done' && <p className="text-center text-green-600 font-medium">Спасибо за обратную связь!</p>}
    </div>
  );
}

Аналитика NPS: SQL-запрос для расчёта

-- Расчёт NPS за период
SELECT
    COUNT(*) FILTER (WHERE score >= 9)::float / COUNT(*) * 100 AS promoters_pct,
    COUNT(*) FILTER (WHERE score <= 6)::float / COUNT(*) * 100 AS detractors_pct,
    (COUNT(*) FILTER (WHERE score >= 9) - COUNT(*) FILTER (WHERE score <= 6))::float / COUNT(*) * 100 AS nps_score
FROM nps_responses
WHERE created_at >= now() - interval '90 days';

Какой NPS считать хорошим? Сравнение с альтернативами

NPS опрос выгоднее CSAT (удовлетворённость конкретной сделкой) тем, что он измеряет общую лояльность, а не разовое впечатление. И лучше CES (лёгкость взаимодействия) для стратегических решений. NPS — лучший индикатор будущего роста: компании с NPS >50 растут в 2 раза быстрее конкурентов.

Процесс внедрения

1. Аналитика: определяем ключевые события и сегменты пользователей.
2. Проектирование: разрабатываем триггеры и дизайн виджета.
3. Реализация: пишем API, миграции, компоненты.
4. Тестирование: проверяем условия показа, корректность сбора данных.
5. Деплой: выкатываем в прод и настраиваем мониторинг.

Что входит в работу

• Модель данных и API (Laravel 11, PHP 8.3+)
• Компонент виджета (React 18, Next.js или Vue 3)
• Условия показа с сегментацией
• Интеграция с Slack / Telegram для алертов по критикам
• SQL-скрипт для аналитики и дашборд (опционально)
• Документация по триггерам и поддержке

Сроки и экономия

Виджет NPS с базовой аналитикой — от 3 до 4 рабочих дней. Своевременное выявление критиков снижает отток на 20-40%. Для оценки вашего проекта свяжитесь с нами — мы подготовим индивидуальное предложение. Закажите внедрение NPS и начните собирать чистые данные о лояльности уже через неделю.

Источник: Wikipedia: Net Promoter