Как самостоятельно разместить аналитику своего сайта с помощью Umami

Когда мы говорим об аналитике веб-сайта, первое, что приходит на ум, это Google Analytics. Однако все мы знаем, что Google Analytics собирает всю информацию о ваших пользователях, поэтому нет никакой конфиденциальности или контроля над данными.

Google Analytics собирает так много различных метрик, которые даже нам не нужны, и самое главное, что для понимания этих метрик вам понадобится докторская степень 😁, шутки шутками, но, честно говоря, понять метрики google analytics не так-то просто.

В последнее время я искал аналитическое решение для своего портфельного сайта, и некоторые люди предлагали google analytics, но я хотел получить полный контроль над аналитикой сайта и понятные метрики с простой дружественной панелью управления. Поэтому я начал искать альтернативы google analytics и нашел несколько интересных вариантов, таких как plausible.io и umami.is.

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

Итак, в этой статье я расскажу о том, как самостоятельно разместить свой собственный веб-аналитический сервер Umami на Heroku.

Давайте начнем.

Форк репозитория umami

Посетите сайт https://github.com/umami-software/umami и форкните репозиторий.

Создайте или войдите в учетную запись Heroku

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

Создайте и настройте приложение Heroku

После входа в систему перейдите в панель управления и нажмите на New > Create new app.

Теперь дайте имя вашему приложению, я дал website-analytics-umami. Затем нажмите на кнопку create app, чтобы создать ваше приложение.

Подключите ваше приложение Heroku к форкнутому репозиторию umami

На панели управления нажмите на имя приложения, которое вы только что создали. Я нажму на website-analytics-umami.

Теперь перейдите на вкладку deploy и нажмите на кнопку Connect to GitHub.

После нажатия кнопки Connect to GitHub вам нужно будет авторизовать Heroku для доступа к вашим репозиториям github.

Найдите репозиторий, к которому вы хотите подключиться, это umami, а затем нажмите на кнопку connect, чтобы подключить ваше приложение Heroku к репозиторию umami.

Включите автоматическое развертывание

После подключения репозитория прокрутите вниз до раздела Automatic deploys и нажмите на Enable Automatic deploys.
Heroku будет автоматически развертывать приложение, если вы внесете какие-либо новые изменения в этот репозиторий.

Настройка базы данных

Как я уже говорил, umami является самостоятельным хостингом, поэтому вам придется настроить базу данных для хранения данных аналитики.

Перейдите на вкладку Resource и прокрутите вниз до раздела Add-ons, затем найдите postgres.

Выберите опцию Heroku Postgres. После выбора вы увидите модальное окно, как показано ниже.
Выберите бесплатный тарифный план и нажмите на форму отправки заказа, чтобы добавить это дополнение в ваше приложение.

Umami требует переменную env DATABASE_URL для работы с базой данных.
Перейдите на вкладку настроек и прокрутите вниз до раздела Config Vars, и вы увидите, что Heroku автоматически создал env-переменную DATABASE_URL, поэтому вам не придется задавать ее вручную.

Umami требует еще одну env-переменную HASH_SALT, и вы можете добавить ее из раздела Config Vars.

Теперь все готово, давайте перейдем к следующей части — развертыванию вашего приложения.

Развертывание Umami

Вы включили автоматическое развертывание вашего приложения, но для первого раза вам придется развернуть его вручную.

Перейдите на вкладку deploy и прокрутите вниз до раздела Manual deploy, затем нажмите на кнопку Deploy Branch и подождите некоторое время, чтобы завершить развертывание.

После развертывания приложения вы увидите зеленую галочку Deploy to Heroku и сообщение Your app was successfully deployed..

Нажмите на кнопку View, чтобы открыть развернутое приложение.

Настройте Umami

Если вы откроете приложение, вы увидите экран входа в систему, как показано здесь. По умолчанию Umami создает одного пользователя-администратора с именем пользователя admin и паролем umami.

На панели управления перейдите к настройкам и нажмите на кнопку Добавить сайт.

Дайте имя вашему сайту и добавьте домен, который вы хотите отслеживать. Вы также можете включить опцию share URL, если хотите поделиться аналитикой с кем-то.

Чтобы отслеживать статистику для вашего сайта, вам нужно получить код отслеживания и поместить его в раздел <head> вашего сайта.

<head>
...
<script async defer data-website-id="006299fc-774a-4eda-be0f-8556e629930a" src="https://app-name.herokuapp.com/umami.js"></script>
</head>

Поздравляем 🥳, если вы следили за всем этим до сих пор, то вы успешно установили свой собственный Website Analytics.

Просмотр аналитики

Теперь в разделе сайта нажмите на сайт, который вы добавили для просмотра аналитики. Я нажму на сайт моего портфолио.

Вы будете перенаправлены на приборную панель, где вы увидите все доступные метрики аналитики для вашего сайта.

Пример:

Резюме

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

Вот и все по этой теме. Спасибо за прочтение.

Полезные ссылки

• Umami
• Особенности Umami
• Запуск на heroku
• Живая демонстрация
• Отслеживание событий с помощью umami

Hashnode также использует umami для предоставления расширенной аналитики для блогов.

Связаться со мной

LinkedIn | Twitter