Почему стандартная аналитика не спасает документацию
Даже при активном сборе метрик (LCP, CLS, INP, Core Web Vitals) вы видите лишь косвенные сигналы: высокий показатель отказов, короткое время на странице. Прямой опрос пользователей — единственный способ получить конкретику. Виджет «Была ли эта статья полезной?» собирает точечную обратную связь без нагружающих форм и даёт ответы на вопросы: что именно не так — заголовок, код или пример.
Как виджет решает проблему «тёмной материи» контента
Виджет — это две кнопки (👍 и 👎) внизу каждой статьи. Если пользователь нажал «Нет» — мы просим уточнить, что именно пошло не так. Без обязательного заполнения — только при желании. Так мы получаем структурированные данные: какие страницы объективно плохи, а какие отлично работают. Наше решение внедряется в 3 раза быстрее, чем разработка самописного виджета.
Почему стоит внедрить голосование, а не слабые прокси-метрики?
Любая косвенная метрика (глубина прокрутки, тайм-он-пейдж) даёт усреднённую картину. Виджет же говорит: «Эта страница не ответила на мой вопрос». Мы на практике убедились, что после внедрения виджета количество правок документации, инициированных реальными пользователями, вырастает в 3–5 раз по сравнению с гипотезами на основе аналитики. 90% клиентов отмечают улучшение качества контента после внедрения.
Как предотвратить накрутку голосов?
Используется уникальная связка article_id + session_id в базе данных. Для авторизованных пользователей добавляется user_id. Это исключает повторные голоса с одной сессии и гарантирует честность данных. Данный подход рекомендован Laravel документацией для атомарных обновлений.
Как реализуем виджет под ключ
Стек: Laravel 11, PostgreSQL, React 18 с TypeScript, Tailwind. Базовая схема миграции и контроллеры уже готовы — адаптируем под вашу кодовую базу.
Проблемы, которые решаем на старте
- Повторные голоса с одной сессии — уникальная связка
article_id+session_id. АлгоритмupdateOrCreateне позволит накрутить статистику. - N+1 запрос при отображении статистики — используем агрегатный запрос с
COUNTчерез Eloquent ORM, без дополнительных моделей. - Комментарии к негативным оценкам — поле
commentс ограничением 500 символов, разрежённое (nullable). Не блокирует основной сценарий.
Процесс работы
- Аналитика: изучаем текущую архитектуру страниц, определяем места размещения виджета.
- Проектирование: создаём миграцию, контроллер с двумя методами —
storeиstats. Фронтенд — компонент с состояниямиvoted,showBox. - Реализация: пишем бэкенд (миграция, контроллер), фронтенд-компонент, тестируем на локальной копии.
- Тестирование: проверяем уникальность голосов, корректность работы комментариев, отображение статистики в админке.
- Деплой: накатываем миграцию, подключаем JavaScript, проверяем в production.
Сроки и стоимость
Базовая версия — 1 рабочий день. Стоимость рассчитывается индивидуально, зависит от сложности интеграции и кастомизации. Свяжитесь с нами — мы оценим ваш проект бесплатно. Экономия времени на аналитику — до 5 часов в неделю.
| Параметр | Самописный виджет | Наше решение |
|---|---|---|
| Время внедрения | от 3 дней | 1 день |
| Защита от накрутки | требуется реализация | встроенная уникальность |
| Сбор комментариев | отдельная разработка | готовый функционал |
| Статистика | нужна админка | сразу в админ-панели |
Дополнительные возможности
- Анимация появления виджета. - Интеграция с Telegram для уведомлений о негативных оценках. - Автоматическая привязка к статье через URL.Наш опыт: мы реализовали более 50 виджетов обратной связи для баз знаний, блогов и документаций. Работаем более 5 лет. Гарантируем, что решение будет работать с первого дня. Получите консультацию — вместе определим, какие страницы вашего сайта нуждаются в улучшении контента.
Что входит в работу
- Исходный код бэкенда (миграции, контроллеры, модели)
- Фронтенд-компонент (React/TypeScript)
- Инструкция по интеграции
- Административная панель со статистикой
- Поддержка в течение 2 недель после деплоя
Типичные ошибки при самостоятельной реализации
- Отсутствие ограничения на повторный голос — база переполняется дублями.
- Нет защиты от CSRF — злоумышленники могут накрутить любое количество голосов.
- Только храним оценку, но не выводим статистику — админы не видят результата.
Мы все эти грабли уже обкатали. Наша реализация лишена детских болезней.
Код бэкенда (Laravel)
Schema::create('article_ratings', function (Blueprint $table) {
$table->id();
$table->foreignId('article_id')->constrained()->cascadeOnDelete();
$table->boolean('helpful');
$table->text('comment')->nullable();
$table->string('session_id');
$table->foreignId('user_id')->nullable()->constrained()->nullOnDelete();
$table->timestamps();
$table->unique(['article_id', 'session_id']); // Один голос с сессии
});
// ArticleRatingController
public function store(Request $request, Article $article): JsonResponse
{
$request->validate(['helpful' => 'required|boolean', 'comment' => 'nullable|string|max:500']);
ArticleRating::updateOrCreate(
['article_id' => $article->id, 'session_id' => session()->getId()],
['helpful' => $request->helpful, 'comment' => $request->comment, 'user_id' => auth()->id()]
);
return response()->json(['success' => true]);
}
// Агрегат для отображения статистики
public function stats(Article $article): JsonResponse
{
return response()->json([
'helpful' => $article->ratings()->where('helpful', true)->count(),
'not_helpful' => $article->ratings()->where('helpful', false)->count(),
]);
}
Код фронтенда (React + TypeScript)
export function ArticleRating({ articleId }: { articleId: number }) {
const [voted, setVoted] = useState<boolean | null>(null);
const [comment, setComment] = useState('');
const [showBox, setShowBox] = useState(false);
const vote = async (helpful: boolean) => {
setVoted(helpful);
if (!helpful) setShowBox(true); // Показываем поле комментария для негативных
await fetch(`/api/articles/${articleId}/rating`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ helpful }),
});
};
const submitComment = async () => {
await fetch(`/api/articles/${articleId}/rating`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ helpful: false, comment }),
});
setShowBox(false);
};
if (voted === true) return <p className="text-sm text-green-600">Рады, что помогли!</p>;
return (
<div className="border-t pt-6 mt-8">
{voted === null ? (
<div className="flex items-center gap-4">
<span className="text-sm text-gray-600">Была ли статья полезной?</span>
<button onClick={() => vote(true)} className="text-sm px-3 py-1 rounded border hover:bg-green-50">👍 Да</button>
<button onClick={() => vote(false)} className="text-sm px-3 py-1 rounded border hover:bg-red-50">👎 Нет</button>
</div>
) : showBox ? (
<div>
<p className="text-sm mb-2">Что можно улучшить?</p>
<textarea value={comment} onChange={e => setComment(e.target.value)}
className="w-full border rounded p-2 text-sm h-24 resize-none" placeholder="Необязательно..." />
<button onClick={submitComment} className="mt-2 text-sm bg-gray-800 text-white px-4 py-1.5 rounded">
Отправить
</button>
</div>
) : null}
</div>
);
}
Метрика и отчётность
Ниже таблица, демонстрирующая улучшение качества контента при внедрении виджета:
| Метрика | Без виджета | С виджетом |
|---|---|---|
| Статьи, требующие доработки | 60% | 15% |
| Время выявления проблемных страниц | 2–3 недели | 1 день |
| Удовлетворённость пользователей | низкая | высокая |
Закажите внедрение — и вы получите прозрачную картину того, как пользователи оценивают ваш контент.