Как на JS реализовать интерактивную карту кликов пользователя по странице для анализа юзабилити?
Карта кликов (click heatmap) — мощный инструмент UX-анализа, позволяющий визуализировать, куда пользователи чаще всего нажимают на странице. Реализовать её на чистом JavaScript можно несколькими способами.
**1. Сбор данных о кликах**
Первый шаг — перехватить все клики на странице и сохранить координаты:
javascript
const clicks = [];
document.addEventListener(‘click’, (e) => {
clicks.push({
x: e.clientX,
y: e.clientY,
xPercent: (e.clientX / window.innerWidth * 100).toFixed(2),
yPercent: (e.clientY / window.innerHeight * 100).toFixed(2),
timestamp: Date.now(),
target: e.target.tagName
});
});
Использование процентных координат важно для адаптивности — один и тот же элемент на разных разрешениях будет иметь разные пиксельные координаты, но одинаковые процентные.
**2. Визуализация через Canvas**
Для отображения тепловой карты создаём полупрозрачный canvas поверх страницы:
javascript
function renderHeatmap(clicks) {
const canvas = document.createElement(‘canvas’);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.cssText = ‘position:fixed;top:0;left:0;pointer-events:none;z-index:9999;opacity:0.7;’;
document.body.appendChild(canvas);
const ctx = canvas.getContext(‘2d’);
clicks.forEach(({ x, y }) => {
const gradient = ctx.createRadialGradient(x, y, 0, x, y, 40);
gradient.addColorStop(0, ‘rgba(255, 0, 0, 0.6)’);
gradient.addColorStop(0.5, ‘rgba(255, 165, 0, 0.3)’);
gradient.addColorStop(1, ‘rgba(0, 0, 255, 0)’);
ctx.fillStyle = gradient;
ctx.fillRect(x — 40, y — 40, 80, 80);
});
}
**3. Отправка данных на сервер**
Для реального анализа данные нужно сохранять:
javascript
function sendClicks() {
fetch(‘/api/clicks’, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify({ clicks, page: location.pathname })
});
}
window.addEventListener(‘beforeunload’, sendClicks);
**4. Агрегация и кластеризация**
При большом количестве кликов полезно группировать точки в радиусе ~20px, суммируя их вес. Это позволяет выявить «горячие зоны» и отобразить их насыщенным цветом.
**5. Готовые библиотеки**
Если не хочется писать с нуля, используйте:
— **heatmap.js** — легковесная библиотека с Canvas-рендерингом
— **Leaflet.heat** — для карт
— **Hotjar** / **Microsoft Clarity** — готовые SaaS-решения
**Советы по юзабилити-анализу:**
— Фиксируйте скролл-позицию, чтобы координаты были абсолютными, а не относительными viewport
— Разделяйте данные по устройствам (mobile/desktop)
— Собирайте минимум 200–500 кликов для статистической значимости
— Сравнивайте карты кликов до и после редизайна
Такой инструмент помогает выявить нефункциональные элементы, на которые пользователи кликают (ожидая реакции), и наоборот — важные кнопки, которые игнорируются.