Сайты с ИИ2026-08-188 минНатали Анарбаева

Как сделать просмотры на сайте: счётчик без накрутки

Как сделать просмотры на сайте: счётчик без накрутки

Просмотры на сайте нельзя честно «сделать» одной цифрой в HTML. Их нужно измерять по заранее выбранному правилу. Для внутреннего анализа подключите Яндекс Метрику или другой сервис аналитики. Если число должно быть видно читателям, добавьте отдельный серверный счётчик и подпишите, что именно он считает: все загрузки, уникальные браузеры или просмотры за день.

Сначала определите, что называется просмотром

Один человек может открыть страницу несколько раз, обновить её и зайти с телефона. Поисковый робот тоже загружает страницу. Поэтому «просмотры», «визиты» и «посетители» дают разные числа. В Яндекс Метрике просмотром считается загрузка страницы, а обновления, AJAX-обновления и ручная отправка hit также могут добавлять просмотры. Это определение приводит официальная справка Яндекс Метрики.

  • Все загрузки: каждое открытие и обновление страницы увеличивает число. Метрика проста, но легко раздувается повторами.
  • Уникальный браузер за день: повтор с тем же идентификатором и на ту же страницу в выбранный день не прибавляется. Это практичный вариант для публичного счётчика.
  • Посетители: аналитическая оценка людей или браузеров за период. Не показывайте её как точное число реальных людей.
  • Визиты: группы действий за сеанс. Это полезно для анализа источников и поведения, но не равно счётчику конкретной статьи.

Правило честной подписи: сначала зафиксируйте алгоритм подсчёта, затем назовите число. Если считаете уникальный браузер за день, так и напишите рядом со счётчиком.

Понимания, как это устроено, уже достаточно, чтобы начать. На бесплатном эфире сайт собирают за один вечер и показывают, как его выложить.

Посмотреть, как собрать

Когда достаточно Метрики, а когда нужен публичный счётчик

Яндекс Метрика подходит владельцу сайта: она показывает страницы, источники, устройства, визиты и другие срезы. Код счётчика на странице отправляет данные в сервис, после чего отчёты строятся на стороне Метрики. Общую схему сбора и обработки объясняет официальная документация Яндекса.

Публичный счётчик решает другую задачу: возвращает одно число вашему интерфейсу. Он нужен, если читатель должен видеть популярность статьи или записи. Не вытаскивайте для этого секретный ключ аналитики в браузер. Создайте свой серверный endpoint, который принимает событие, применяет правила фильтрации и отдаёт только безопасный итог.

Если сайт пока статический и у него нет сервера или внешней функции, начните с Метрики и не показывайте число публично. Подключать базу и API только ради декоративной цифры часто сложнее, чем сама страница. Общая граница между формой в интерфейсе и серверной доставкой разобрана в статье как сделать сайт с формой.

По теме: Как сделать сайт-портфолио: структура и проверка в 2026

Схема честного публичного счётчика

Надёжная схема состоит из браузерного события, серверной проверки, хранилища и отдельного чтения итога. Браузер не должен присылать готовое новое значение, иначе любой посетитель сможет написать произвольное число.

  1. Страница загружается и отправляет на ваш endpoint идентификатор страницы, например article-42.
  2. Сервер проверяет, что страница существует, запрос пришёл с допустимого сайта, а формат данных корректен.
  3. Сервер создаёт или читает анонимный идентификатор браузера. Не используйте email, телефон или другие данные ради простого счётчика.
  4. Правило дедупликации проверяет пару «страница + идентификатор + период». Если такая запись уже есть, итог не увеличивается.
  5. После записи сервер возвращает текущее число, а страница выводит его рядом с точной подписью.
  6. Отдельная задача очищает старые технические записи, но не меняет агрегированный итог без зафиксированного правила.
POST /api/views
{ "page": "article-42" }

server:
  validate page and origin
  reject known bot or abusive rate
  visitor = anonymous_cookie()
  key = page + visitor + current_day
  if key is new: increment public_total
  return public_total

Это безопасный пример архитектуры, а не готовый код для любого стека. Для базы добавьте уникальное ограничение на ключ дедупликации. Тогда два одновременных запроса не увеличат число дважды, даже если оба успели проверить отсутствие записи до сохранения.

Как не считать обновления дважды

Самый понятный компромисс для публичной цифры состоит в подсчёте одного просмотра от одного анонимного браузера на страницу за календарный день. Обновление страницы не меняет итог, а возвращение на следующий день добавляет новый просмотр. Подпись должна отражать это правило.

  • Храните анонимный идентификатор в cookie с разумным сроком, а не в параметре URL.
  • Не полагайтесь только на localStorage: пользователь может запретить его или очистить данные браузера.
  • Проверяйте повтор на сервере. Проверка только в JavaScript обходится повторным запросом к API.
  • Не используйте IP-адрес как единственный идентификатор: один адрес может принадлежать многим людям, а у одного человека адрес меняется.
  • Обрабатывайте запись атомарно с уникальным ключом, чтобы параллельные запросы не создали дубль.

Абсолютно точного числа людей такой счётчик не даёт. Человек может очистить cookie, сменить браузер или устройство. Это ограничение нужно принять и не называть оценку «уникальными людьми».

Один собранный сайт учит больше десяти инструкций, потому что ошибки видны сразу. На бесплатном эфире по вайбкодингу показывают, как описать идею словами и получить работающую страницу, а участникам достаётся гайд.

Собрать сайт с ИИ

Как уменьшить влияние ботов

Полностью отличить человека от хорошо замаскированного бота нельзя, но явный мусор можно убрать. Яндекс Метрика распознаёт часть роботов по объявленному User-Agent, поведению и другим техническим признакам. В отчётах можно сравнить данные с роботами и без них, что описано в официальной справке по фильтрации роботов.

  1. Не увеличивайте публичный счётчик для известных поисковых роботов и технических проверок по поддерживаемому списку User-Agent.
  2. Добавьте ограничение частоты для одного идентификатора и адреса сети. Это снижает массовые повторы, но не используйте его как единственную защиту.
  3. Требуйте корректный метод, Content-Type и допустимый Origin для браузерного события.
  4. Отмечайте подозрительные всплески отдельно, не удаляя данные без журнала и понятного правила.
  5. Сравнивайте публичный итог с аналитикой без роботов. Резкое расхождение является сигналом для диагностики, а не поводом вручную подогнать цифры.

Файл robots.txt просит добросовестных роботов соблюдать правила обхода, но не защищает API счётчика от накрутки. Проверка и ограничения должны работать на сервере.

По теме: Как сделать подписку на сайт: форма, согласие и подтверждение

Как считать одностраничный сайт без дублей

На обычной HTML-странице аналитика часто отправляет просмотр при загрузке автоматически. На SPA переход может менять адрес без полной перезагрузки, поэтому просмотр отправляют при смене маршрута. Нельзя одновременно оставить автоматическую отправку и добавить ручную на то же событие.

Google Analytics предупреждает: для ручного управления page_view нужно отключить автоматическую отправку, иначе появляются дубли. Это правило приведено в официальном руководстве Google по просмотрам страниц. В Яндекс Метрике виртуальный просмотр можно отправить методом hit; его актуальная сигнатура есть в официальной документации метода.

  • Обычный многостраничный сайт: одно автоматическое событие на загрузку документа.
  • SPA: одно событие после подтверждённой смены маршрута.
  • Модальное окно или переключение вкладки внутри страницы: не считайте просмотром, если URL и самостоятельный контент не изменились.
  • Повторная инициализация аналитического кода: исправьте её до сравнения отчётов.

Как проверить счётчик до запуска

Проверяйте не только красивую цифру, но и запись на сервере, ответ API и аналитику. Набор тестов должен повторять обычные и нежелательные сценарии.

  1. Откройте страницу в чистом тестовом браузере. Итог должен увеличиться по выбранному правилу.
  2. Обновите страницу. Для режима «уникальный браузер за день» число не должно измениться.
  3. Откройте другую страницу. Её счётчик должен работать независимо.
  4. Вернитесь на первую страницу. Итог не должен прибавиться повторно в том же периоде.
  5. Отправьте несколько одновременных запросов с одним тестовым идентификатором. Увеличение должно произойти один раз.
  6. Выполните запрос с User-Agent известного робота и убедитесь, что публичный итог не изменился.
  7. Отключите API или верните ошибку. Страница должна показать нейтральное состояние, а не старое или выдуманное число.

Проверка пройдена, когда публичная подпись совпадает с алгоритмом, повторы не раздувают итог, а сбой API не ломает страницу. После этого сравните динамику с Метрикой без роботов, но не требуйте полного совпадения: системы считают по разным правилам. Общий технический контроль можно дополнить чек-листом безопасного сайта.

По теме: Как сделать сайт цветов: каталог букетов и заказ

Почему число не обновляется или резко растёт

  • Число застыло у всех: проверьте ответ endpoint, запись в базе и ошибки браузерной консоли.
  • Счётчик обновился в базе, но не на странице: возможно, HTML или ответ API кэшируется. Разделите кэш страницы и динамического числа.
  • Каждое обновление прибавляет просмотр: дедупликация выполняется только в браузере или уникальный ключ не работает.
  • SPA считает два события: одновременно включены автоматический и ручной page_view.
  • Ночной рост без заявок и чтения: сравните данные с отчётом роботов и журналом запросов.
  • Метрика показывает меньше: блокировщик, запрет JavaScript или отказ от отслеживания могут мешать аналитическому коду, тогда как серверный счётчик продолжает отвечать.
  • Метрика показывает больше: её просмотр может учитывать обновления и виртуальные hit, а публичный счётчик исключает повторы.

Не исправляйте расхождение ручным изменением итоговой цифры. Сначала запишите определения обеих метрик и найдите сценарий, который учитывается только одной системой.

Частые вопросы

Можно ли сделать счётчик просмотров только на HTML и JavaScript?

Можно показать локальное число, но общий честный итог для всех посетителей требует сервера или внешнего хранилища. Значение внутри HTML одинаково для всех и само не собирает события.

Почему просмотров больше, чем посетителей?

Один посетитель может открыть несколько страниц и обновить их. Просмотры считают загрузки, посетители оценивают отдельные браузеры или людей за период.

Можно ли показать данные Яндекс Метрики всем посетителям?

Не отдавайте секретный доступ к аналитике в код страницы. Для публичного числа создайте серверный запрос, который возвращает только разрешённый агрегат.

Какое число лучше показывать под статьёй?

Для понятной публичной метрики подойдёт число уникальных браузеров за день с накопительным итогом, если подпись объясняет правило. Если цифра не помогает читателю, лучше оставить аналитику только владельцу.

Можно ли полностью убрать накрутку?

Нет. Можно отсечь известные роботы, повторы и всплески, но замаскированный трафик требует постоянного анализа. Поэтому храните журнал и не обещайте абсолютную точность.

Если хотите собрать сайт, который не только выглядит готовым, но и честно измеряет результат, на воркшопе вы пройдёте путь от структуры до работающей страницы и проверки.

Узнать о воркшопе
Разборы, кейсы и фишки вайбкодинга каждую неделю в телеграм-канале «Яков вайбкодит».
Первый проект с ИИ: живой разбор, бесплатно Занять место