Реализация 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% успеха. Мы используем три категории триггеров:
| Тип триггера | Примеры событий | Задержка показа |
|---|---|---|
| Событийный | Завершение заказа, окончание триала, первое использование функции | Сразу через 2-3 сек |
| Временной | Через 14-30 дней после регистрации, ежеквартально | Зависит от цикла |
| Сегментный | Исключить новичков (<7 дней), пользователей с открытыми тикетами | — |
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 раза быстрее конкурентов.
| Метрика | Фокус | Вопрос | Шкала |
|---|---|---|---|
| NPS | Лояльность | "Порекомендуете?" | 0-10 |
| CSAT | Удовлетворенность | "Довольны услугой?" | 1-5 |
| CES | Легкость | "Было легко?" | 1-7 |
Пример расчёта NPS
Если 50% промоутеров (9-10) и 20% критиков (0-6), то NPS = 50 - 20 = 30. Нейтральные (7-8) не учитываются.Процесс внедрения
- Аналитика: определяем ключевые события и сегменты пользователей.
- Проектирование: разрабатываем триггеры и дизайн виджета.
- Реализация: пишем API, миграции, компоненты.
- Тестирование: проверяем условия показа, корректность сбора данных.
- Деплой: выкатываем в прод и настраиваем мониторинг.
Что входит в работу
- Модель данных и API (Laravel 11, PHP 8.3+)
- Компонент виджета (React 18, Next.js или Vue 3)
- Условия показа с сегментацией
- Интеграция с Slack / Telegram для алертов по критикам
- SQL-скрипт для аналитики и дашборд (опционально)
- Документация по триггерам и поддержке
Сроки и экономия
Виджет NPS с базовой аналитикой — от 3 до 4 рабочих дней. Своевременное выявление критиков снижает отток на 20-40%. Для оценки вашего проекта свяжитесь с нами — мы подготовим индивидуальное предложение. Закажите внедрение NPS и начните собирать чистые данные о лояльности уже через неделю.
Источник: Wikipedia: Net Promoter