# Використовуючи Умамі для локального аналізу

<!--category-- ASP.NET, Umami -->
<datetime class="hidden">2024-08-08T15:53</datetime>

## Введение

Однією з речей, яка мене дратувала в моєму теперішньому настроїнні було те, що мені довелося використовувати Google Analytics для отримання даних про відвідувачів. (скільки мало всього в цьому є. [Умамі](https://umami.is/) що є простим , власним МSK1 розробленим веб-анализаційним рішенням | . | Це | МSK3 | чудова альтернатива Google Analytics і є МSK4 | відносно ) | легко встановлювати |. |

[TOC]

## Установлення

Установка дуже проста, але знадобилося трохи музики, щоб почати рухатись.

### Докер Compose

Якби я хотів додати Умамі до мого теперішнього докеру, я повинен був додати новий сервіс `docker-compose.yml` файл. Я додав наступне донизу файлу

```yaml
  umami:
    image: ghcr.io/umami-software/umami:postgresql-latest
    env_file: .env
    environment:
      DATABASE_URL: ${DATABASE_URL}
      DATABASE_TYPE: ${DATABASE_TYPE}
      HASH_SALT: ${HASH_SALT}
      APP_SECRET: ${APP_SECRET}
      TRACKER_SCRIPT_NAME: getinfo
      API_COLLECT_ENDPOINT: all
    ports:
      - "3000:3000"
    depends_on:
      - db
    networks:
      - app_network
    restart: always
  db:
    image: postgres:16-alpine
    env_file:
      - .env
    networks:
      - app_network
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER}"]
      interval: 5s
      timeout: 5s
      retries: 5
    volumes:
      - /mnt/umami/postgres:/var/lib/postgresql/data
    restart: always
  cloudflaredumami:
    image: cloudflare/cloudflared:latest
    command: tunnel --no-autoupdate run --token ${CLOUDFLARED_UMAMI_TOKEN}
    env_file:
      - .env
    restart: always
    networks:
      - app_network


```

Цей докер-compose.yml файл містить наступне налаштування

1. Нова служба, яка називається `umami` яка використовує `ghcr.io/umami-software/umami:postgresql-latest` зображення. Цю службу використовують для запуску аналітики Умамі
2. Нова служба, яка називається `db` яка використовує `postgres:16-alpine` зображення. Цю службу використовують для запуску бази даних Postgres, якою користується Umami для зберігання своїх даних
   Зверніть увагу на цю службу I'm відобразив її в папку на моєму сервері, щоб дані зберігалися між рестартом

```yaml
    volumes:
      - /mnt/umami/postgres:/var/lib/postgresql/data
```

Вам ' потрібно, щоб цей директорий існував і був написан комп 'ютерним користувачам на вашому сервері. ( знову ж таки не є експертом з Linux, тож

```shell
chmod 777 /mnt/umami/postgres
```

3. Нова служба, яка називається `cloudflaredumami` яка використовує `cloudflare/cloudflared:latest` зображення. Цю послугу використовують для тунелювання сервісу Умамі через Cloudflare, щоб дати йому доступ з Інтернету

### Файл Env

Щоб підтримати це, я також обновив `.env` файл, що містить наступне:

```shell
CLOUDFLARED_UMAMI_TOKEN=<cloudflaretoken>
DATABASE_TYPE=postgresql
HASH_SALT=<salt>

POSTGRES_DB=postgres
POSTGRES_USER=<postgresuser>
POSTGRES_PASSWORD=<postgrespassword>
UMAMI_SECRET=<umamisecret>

APP_SECRET=${UMAMI_SECRET}
UMAMI_USER=${POSTGRES_USER}
UMAMI_PASS=${POSTGRES_PASSWORD}
DATABASE_URL=postgresql://${UMAMI_USER}:${UMAMI_PASS}@db:5432/${POSTGRES_DB}
```

Це встановлює конфігурацію докера compose (the `<>` Звісно, вам треба замінити свої власні цінності). `cloudflaredumami` послуга використовуєся для тунелювання сервісу Умамі через Cloudflare, щоб дати йому доступ з Інтернету.. Це можливий спосіб використовувати БASE-PATH, але для Умами мушу перебудувати його, щоб змінити базовий шлях, тож я ─ ' ─ покинув його як корінний шлях на даний момент

### Вулкарний тунель

Для створення хмарного тунелю для цього (, який є провідником для js-файлу, що використовується для аналізу

![Вулкарний тунель](umamisetup.png)

Це поєднує тунель з сервісом Умамі і дозволяє доступ до нього з Інтернету. `umami` послуга в докері-подібний до файлу МSK1 так, як він МSK2 знаходиться на тій самій мережі, що хмарний тунель

### Установка Umami на сторінці

Щоб ввімкнути шлях для skriptу (, викликаного `getinfo` в моєму настроїні вище) ЯM SK1 додав запис konfiguracji до моїх настроїв

```json
 "Analytics":{
   "UmamiPath" : "https://umamilocal.mostlylucid.net/getinfo",
   "WebsiteId" : "32c2aa31-b1ac-44c0-b8f3-ff1f50403bee"
 },
```

Ви також можете додати їх до вашого файлу .env і передавати їх як змінні середовища докеру

```shell
ANALYTICS__UMAMIPATH="https://umamilocal.mostlylucid.net/getinfo"
ANALYTICS_WEBSITEID="32c2aa31-b1ac-44c0-b8f3-ff1f50403bee"
```

```yaml
  mostlylucid:
    image: scottgal/mostlylucid:latest
    ports:
      - 8080:8080
    restart: always
    environment:
    ...
      - Analytics__UmamiPath=${ANALYTICS_UMAMIPATH}
      - Analytics__WebsiteId=${ANALYTICS_WEBSITEID}
```

Ви встановлюєте Веб-сайтId на панелі дотиків Умамі, коли встановляєте сайт. M SK1 Зауважте, що по замовчуванню ім 'я і паролі для сервісу Умами `admin` і `umami`, Вам потрібно їх змінити після налаштуванняM SK1
![Дашборд Умамі](umamiaddwebsite.png)

З асоціованими настроями cs file:

```csharp
public class AnalyticsSettings : IConfigSection
{
    public static string Section => "Analytics";
    public string? UmamiPath { get; set; }
}
```

Знову ж таки, це використовує моє програмне забезпечення POCO ([тут](/blog/addingidentityfreegoogleauth#configuring-google-auth-with-poco)) для налаштування настроївM SK1
Установіть його в моєму програмі

```csharp
builder.Configure<AnalyticsSettings>();
```

І нарешті в моєму `BaseController.cs` `OnGet` метод I' я додав наступне, щоб надати шлях для сценаріїв аналітики

```csharp
   public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        if (!Request.IsHtmx())
        {
            ViewBag.UmamiPath = _analyticsSettings.UmamiPath;
            ViewBag.UmamiWebsiteId = _analyticsSettings.WebsiteId;
        }
        base.OnActionExecuting(filterContext);
    }
    
```

Це визначає шлях скрипту для аналізу, який треба використати в файлі розкладу.

### Файл розкладу

Врешті-решт, я додала до мого файлу макету ось що:

```html
<script defer src="@ViewBag.UmamiPath" data-website-id="@ViewBag.UmamiWebsiteId"></script>
```

Це включає в себе скрипт на сторінці і визначає адресу веб-сайту для аналізу.

## Виключити себе від аналітики

Для того, щоб виключити ваші власні візити з даних аналітики, ви можете додати наступне локальное зберігання в своєму браузері:

У програмуванні Chrome devtools (Ctrl+ShiftM SK2I на windows ) ви можете додати наступне до консольіMSC4

```javascript
localStorage.setItem("umami.disabled", 1)
```

## Завершення

Це було трохи незграбно запустити, але я – МСК0 – задоволений результатом. МСК1 – тепер у мене є автоматизована служба аналітики, яка не передає даних до Google чи будь-якої іншої третьої сторони. МSK4 – це нелегко запустити. Але як тільки це – МSK6 – зроблено, МSK7 – досить просто використовувати. ММК8 – я – ' - задоволений результатами і рекомендую його всім, хто шукає автоматизовану аналітику.