# Using Umami for Local Analytics

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

## Esitys

Yksi niistä asioista, jotka annoivat minua nykyisestä järjestelystäni oli se, että minun piti käyttää Google Analyticsia vierailijatietojen saamiseksi. [Umami](https://umami.is/) , joka on yksinkertainen

[TOC]

## Asetus

Asetus on hyvin yksinkertainen, mutta siihen tarvittiin melko paljon säveliä...

### Docker Compose

Koska halusin lisätä Umamiin nykyiseen dokkeriini-komposiointijärjestelmään, minun oli lisättävä uusi palvelu `docker-compose.yml` liite. liitin seuraavat liitteet liitteen pohjaan

```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


```

Tämä docker-compose.yml-tietokanta sisältää seuraavan järjestelyn:

1. Uusi palvelu kutsuttiin `umami` jossa käytetään `ghcr.io/umami-software/umami:postgresql-latest` kuva. Tätä palvelua käytetään Umami-analyysipalvelun käyttöönottoon
2. Uusi palvelu kutsuttiin `db` jossa käytetään `postgres:16-alpine` image. Tätä palvelua käytetään Umamin käyttämän Postgres-tietokannan hallinnoimiseen.
   Huomautus tästä palvelusta I'm kartoittaa sen luetteloon serverissäni niin, että tiedot säilyvät uudelleenkäynnin jälkeen.

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

Teidän on välttämätöntä, että tämä johtaja on olemassa ja että sen käyttäjä voi kirjoittaa sitä serverissänne.

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

3. Uusi palvelu kutsuttiin `cloudflaredumami` jossa käytetään `cloudflare/cloudflared:latest` image. Tätä palvelua käytetään Umami-palvelun tunnelaamiseen Cloudflaren kautta, jotta sitä voidaan käyttää internetistä.

### Env-tietokanta

Tämän tukemiseksi olen myös ajantasaistanut `.env` asiakirjaan, johon sisältyy seuraavaa:

```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}
```

Tämä vahvistaa Docker-konfiguraation compose (the `<>` On selvää, että pätevyysvaatimukset korvataan omilla arvoillaan). `cloudflaredumami` palvelua käytetään Umami-palvelun tunnelointiin Cloudflaren kautta, jotta sitä voidaan käyttää Internetistä.

### Cloudflare-tunneli

(, joka toimii analyyttiseen analysointiin käytettävien js-fiilien tienä, on otettava käyttöön cloudflare tunneli.

![Cloudflare-tunneli](umamisetup.png)

Tämä asettaa tunnelin Umami-palveluun ja mahdollistaa sen pääsyn internetistä. `umami` ns. cloudflared tunnelin kanssa samaan verkkoon kuin kuormitettu tunneli.

### Umami-järjestelmä sivussa

(pyynnön lähtökohdan aktivointi `getinfo` omassa kokoonpanossani edellä) Olen lisännyt config-merkinnän ohjelmiini

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

Voitte myös lisätä ne .env-tietokantaan ja siirtää ne ympäristövaihtoehtoina dokkeriin

```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}
```

Otetaan huomioon, että Umami-palvelun default username and password is `admin` ja `umami`, ne on muutettava käyttöönottonsa jälkeen
![Umami Dashboard](umamiaddwebsite.png)

Asiaan liittyvien Settings cs file:

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

Jälleen kerran tämä käyttää POCO config-asiat ([täällä](/blog/addingidentityfreegoogleauth#configuring-google-auth-with-poco)) Settings
Otetaan se käyttöön omassa ohjelmassani.cs:

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

Ja viimeinkin minun `BaseController.cs` `OnGet` menetelmä I'on lisännyt seuraavat kohdat analysointi skriptin etenemissuunnitelman vahvistamiseksi

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

Tämä asettaa etenemispisteen analyyttiselle skriptille, jota käytetään layout-asiakirjassa.

### Laadinta

Lopuksi totean, että olen lisännyt seuraavat seikat layout-asiakirjaani, jotta siihen sisällytettäisiin analyyttinen skriptti.

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

Siihen sisältyy sivun skriptti ja asetetaan analyyttisen palvelun verkkosivustotunnus.

## Poistakaa itsenne analyyseista

Jotta omien vierailujenne jättäminen analyyttisten tietojen ulkopuolelle voidaan, voit lisätä seuraavat paikalliset tallennot matkailullanne:

Chromen dev-työkaluissa (Ctrl+ShiftM SK2I ottamalla ohjelmia otetaan käyttöön

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

## Päätelmät

Tämä oli hieman hankalaa perustaa, mutta olen tyytyväinen tulokseen.. Minulla on nyt itsenäinen analysointipalvelu, joka ei anna tietoja Googlelle tai muille kolmansien osapuolten tahoille.