Реалізація 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(); $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(); $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