Как на JavaScript реализовать код счетчика посещений, который передает параметры экрана в URL запроса к серверу статистики?
Реализация счётчика посещений на JavaScript, который передаёт параметры экрана в URL запроса к серверу статистики, — это классическая задача веб-аналитики. Ниже представлен подробный разбор подхода.
## Основная идея
Когда пользователь открывает страницу, JavaScript собирает данные об экране устройства (разрешение, глубина цвета, пиксельное соотношение) и отправляет их на сервер статистики в виде GET-запроса с параметрами в URL.
## Пример реализации
javascript
(function() {
// Собираем параметры экрана
var params = {
sw: window.screen.width, // ширина экрана
sh: window.screen.height, // высота экрана
cd: window.screen.colorDepth, // глубина цвета
dpr: window.devicePixelRatio || 1, // пиксельное соотношение
ww: window.innerWidth, // ширина окна браузера
wh: window.innerHeight, // высота окна браузера
url: encodeURIComponent(window.location.href), // текущий URL
ref: encodeURIComponent(document.referrer), // реферер
ts: Date.now() // временная метка (против кэша)
};
// Формируем строку параметров
var query = Object.keys(params)
.map(function(key) {
return key + ‘=’ + params[key];
})
.join(‘&’);
// URL сервера статистики
var statUrl = ‘https://stats.example.com/hit?’ + query;
// Метод 1: через Image (наиболее совместимый)
var img = new Image();
img.src = statUrl;
// Метод 2: через fetch (современный подход)
// fetch(statUrl, { method: ‘GET’, keepalive: true });
// Метод 3: через XMLHttpRequest
// var xhr = new XMLHttpRequest();
// xhr.open(‘GET’, statUrl, true);
// xhr.send();
})();
## Почему используется Image()
Запрос через `new Image()` — самый распространённый способ для счётчиков посещений. Преимущества:
— Работает во всех браузерах, включая старые.
— Не блокирует рендеринг страницы.
— Не требует обработки CORS, так как браузер не читает ответ.
— Сервер может вернуть прозрачный пиксель (1×1 GIF) — отсюда термин «пиксель отслеживания».
## Что передаётся в параметрах
| Параметр | Описание |
|—|—|
| sw, sh | Физическое разрешение экрана |
| cd | Глубина цвета (обычно 24 или 32 бита) |
| dpr | Device Pixel Ratio (для Retina-дисплеев) |
| ww, wh | Размер окна браузера (viewport) |
| url | Адрес текущей страницы |
| ref | Источник перехода |
| ts | Временная метка для предотвращения кэширования |
## Защита от дублирования
Чтобы не считать повторные визиты в рамках одной сессии, можно использовать `sessionStorage`:
javascript
if (!sessionStorage.getItem(‘counted’)) {
sessionStorage.setItem(‘counted’, ‘1’);
// отправляем запрос
}
## Важные замечания
— Всегда используйте `encodeURIComponent()` для строковых значений, чтобы избежать поломки URL.
— Параметр `ts` (timestamp) предотвращает кэширование запроса браузером или прокси.
— На сервере статистики необходимо настроить CORS-заголовки, если используется `fetch` или `XHR`.
— Для соблюдения GDPR уведомляйте пользователей о сборе данных.
Такой счётчик легко интегрируется в любой сайт: достаточно добавить скрипт перед закрывающим тегом «.