Реализация 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