004 Кейс: Своя аналитика на стеке Docker + Umami + Nginx

Umami - это система веб-аналитики с открытым исходным кодом (Node.js + PostgreSQL/MySQL), ориентированная на приватность и являющаяся простой альтернативой Google Analytics или Yandex Metric. Владелец сайта сможет отслеживать просмотры, посетителей, устройства и географию пользователей, при этом сохраняя полный контроль над данными при самостоятельном размещении (self-hosting). К слову, можно написать небольшой скрипт на Python, который будет через API Umami забирать данные о просмотрах страниц и пересылать их в рабочий Telegram-канал.

Подробно рассмотрю инструменты аналитики и их назначения в другой статье. Здесь отмечу основной факт, что Umami анонимизирует пользователей. Но если мы делаем к примеру SaaS и нужно понимать путь конкретного юзера (Retention, Churn, User Journeys), тут потребуются другие инструменты (например - PostHog, OpenPanel, Amplitude).

Что сделал? Весь стек развернут на одном VPS под управлением Docker. Трафик распределяется через Nginx, который выступает единой точкой входа.

1. Подготовка DNS и SSL.
   • DNS. Создал A-запись для поддомена stats.khakimov.dev (это интерфейс личного кабинета аналитики), направив её на IP сервера.
   • SSL. Использовал Certbot в режиме standalone для выпуска сертификата Let’s Encrypt специально для этого поддомена.
2. Контейнеризация (Docker Compose). Объединил три сервиса в одну сеть.
   • PostgreSQL. База данных, закрытая внутри сети Docker (порты не торчат наружу).
   • Umami App. Node.js приложение, которое общается с базой по внутреннему имени хоста db.
   • Управление секретами - базовый шаг, но зафиксирую. Все пароли и ключи вынесены в файл .env, который добавлен в .gitignore. Это исключает утечку данных при пуше в публичный репозиторий.
3. Настройка шлюза (Nginx Reverse Proxy). Чтобы админка была доступна по HTTPS, прописал правила в nginx.conf.
   • Proxy Pass. Перенаправили запросы с stats.khakimov.dev на внутренний порт контейнера Umami (3000).
   • Контекст посетителя. Добавили проброс заголовков X-Real-IP и X-Forwarded-For. Это критически важно, чтобы Umami видела реальные IP пользователей для геолокации, а не IP самого сервера. Иначе все пользователи считались бы за одного.
4. Интеграция во фронтенд (использую Astro). Внедрение в Astro было сделано максимально «чисто» через Layout.astro.
   • Скрипт подключается только в PROD режиме (import.meta.env.PROD), чтобы не «мусорить» в базе во время разработки.
   • Использованы атрибуты async defer, чтобы аналитика не блокировала рендеринг основного контента и шрифтов.
5. Продвинутый трекинг (Engagment Metrics). Статистики по стандартным визитам мало, поэтому написал кастомный JS-трекер для статей.
   • Scroll Depth: Фиксируем прокрутку (25%, 50%, 75%, 100%). Это позволяет строить воронки дочитываемости.
   • Active Time: Считаем только «чистое» время, когда вкладка активна (visibilityState), отправляя события на 15с, 1м и 3м.
   • Отслеживаем переходы по нужным внешним ссылкам (сейчас это Telegram и Instagram) с помощью data-umami-event атрибутов.

В результате, добавил инструмент, который показывает не просто «цифры», а реальное поведение пользователя: на каком абзаце он закрыл статью и в какую соцсеть ушел дальше.

Ниже приведу основной список компонентов аналитики и покажу несколько скриншотов интерфейса Umami из личного кабинета сайта:

1. Группа Traffic (Трафик) — Базовая статистика. Это фундамент аналитики, отвечающий на вопросы «Сколько?» и «Откуда?»:

   • Overview (Обзор): Сводка главных метрик: посетители, визиты, просмотры, показатель отказов и среднее время на сайте.
   • Events (События): Здесь будут отображаться кастомные трекеры: клики по кнопкам, глубина прокрутки (Scroll Depth) и активность.
   • Sessions (Сессии): Список отдельных визитов. Позволяет увидеть «путь» анонимного пользователя в рамках одного захода.
   • Realtime (В реальном времени): Кто находится на сайте прямо сейчас, какие страницы они смотрят и из каких городов.
   • Compare (Сравнение): Инструмент для сопоставления данных за разные периоды (например, текущая неделя против предыдущей).
   • Breakdown (Разбивка): Детальные отчеты по браузерам, ОС, типам устройств, странам и языкам.

2. Группа Behavior (Поведение) — Глубокий анализ. Здесь анализируется то, как именно люди взаимодействуют с контентом:

   • Goals (Цели): Настройка конкретных KPI (например, «перешел в Telegram» или «оставил заявку»).
   • Funnels (Воронки): Визуализация многошаговых процессов. Например: Главная -> Статья -> Кнопка связи. Показывает, на каком этапе отваливается больше всего людей.
   • Journeys (Пути): Карта переходов пользователя между страницами сайта.
   • Retention (Удержание): Показывает, возвращаются ли пользователи на сайт через день, неделю или месяц после первого визита.

3. Группа Audience (Аудитория) — Сегментация. Позволяет группировать пользователей по признакам:

   • Segments (Сегменты): Возможность выделить группу (например, «Пользователи из РФ на мобильных устройствах») и смотреть статистику только по ним.
   • Cohorts (Когорты): Анализ поведения групп пользователей, объединенных общим временем совершения первого действия.

4. Группа Growth (Рост) — Маркетинг. Инструменты для оценки эффективности продвижения:

   • UTM: Аналитика по рекламным меткам. Позволяет точно узнать, какой пост в Telegram или какая ссылка в соцсетях принесла больше трафика.
   • Revenue (Доход) / Attribution (Атрибуция): Эти вкладки обычно используются в связке с e-commerce или SaaS-продуктами для отслеживания финансовой эффективности каналов привлечения.

Внедрение Umami в связке с Docker и Nginx — это надежный базовый слой, который полностью закрывает мои текущие задачи по аналитике. По мере роста аудитории или трансформации проекта в полноценный SaaS, потребности неизбежно изменятся, и могут потребоваться инструменты другого масштаба.

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