# Using Umami voor Lokale Analytics

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

## Inleiding

Eén van de dingen die me boos maakte bij mijn huidige opstelling was dat ik Google Analytics moest gebruiken om visiegegevens te krijgen. (wat er weinig van is. [Umami](https://umami.is/) Het is een eenvoudige webanalytics-oplossing.

[TOC]

## Installatie

De installering is heel simpel, maar het kostte een beetje fluiten om echt te gaan.

### Docker Compose

Omdat ik Umami wilde toevoegen aan mijn huidige docker-compose opstelling, moest ik een nieuw service toevoegen. `docker-compose.yml` file. Ik voegde het volgende toe aan de onderkant van de file.

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


```

Deze docker-compose.yml-lêer bevat de volgende opstelling :

1. Een nieuwe dienst. `umami` Het gebruik van het gebouw maakt er een grotere ruimte voor. `ghcr.io/umami-software/umami:postgresql-latest` image. Deze dienst wordt gebruikt om de Umami analysedienst te runnen.
2. Een nieuwe dienst. `db` Het gebruik van het gebouw maakt er een grotere ruimte voor. `postgres:16-alpine` image. Deze dienst wordt gebruikt om de Postgres-databank te runnen die Umami gebruikt om zijn gegevens op te slaan.
   Nota voor deze dienst I'm heeft het in een gids op mijn server gemapt zodat de gegevens blijven bestaan tussen herstarten.

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

Je zal deze gids nodig hebben om te bestaan en te kunnen worden geschreven door de docker-gebruiker op je server.

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

3. Een nieuwe dienst. `cloudflaredumami` Het gebruik van het gebouw maakt er een grotere ruimte voor. `cloudflare/cloudflared:latest` image. Deze dienst wordt gebruikt om de Umami-dienst via Cloudflare te tunnelen zodat ze vanuit het internet toegang krijgt.

### Env Lêer

Om dit te ondersteunen heb ik ook mijn `.env` file om de volgende te bevatten:

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

Dit instelt de konfiguratie voor de docker compose (the `<>` Qualificaties moeten natuurlijk vervangen door je eigen waarden). De `cloudflaredumami` service wordt gebruikt om de Umami-dienst via Cloudflare te tunnelen, zodat ze vanuit het internet te kunnen worden afgeleëerd.. Het is mogelijk om een BASE-PATH te gebruiken, maar voor Umami heeft het vervelend een herbouw nodig om de basispaad te veranderen, dus ik heb hem nu als rootpaad verlaten.

### Cloudflare Tunnel

Om de cloudflare tunnel te opzetten voor deze (, die het pad is voor de js-lêer die gebruikt wordt voor analyses | - | getinfo | . |js |) | Ik gebruikte website |

![Cloudflare Tunnel](umamisetup.png)

Dit stelt de tunnel in contact met de Umami-dienst en maakt het mogelijk om er vanaf het internet toegang tot te krijgen. `umami` service in de docker.

### Umami Opstelling in pagina

Om de path voor het (-script te aktiveer. `getinfo` in mijn opstelling above) Ik' heb een configuratie-inskrywing toegevoegd aan mijn appsettings.

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

Je kan deze ook toevoegen aan je .env-file en ze als omgevingsvariaties aan de docker geven.

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

Je stelt de WebsiteID op in het Umami dashboard wanneer je de site opzet. M SK1Noteer dat de standaard gebruikernaam en wachtwoord voor de Umami-dienst is. `admin` en `umami`, je moet deze na de opstelling veranderen).
![Umami-dashboard](umamiaddwebsite.png)

Met de geassocieerde instellings cs-file:

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

Nogmaals, dit gebruikt mijn POCO-config dingen ([Hier.](/blog/addingidentityfreegoogleauth#configuring-google-auth-with-poco)) om de instellings op te zetten.
Stel het op in mijn programma.cs:

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

En uiteindelijk in mijn `BaseController.cs` `OnGet` methode I' heb de volgende toegevoegd om de weg te bepalen voor het analysescript:

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

Dit bepaalt de weg voor het analysescript dat in de layoutfile gebruikt moet worden.

### Uitleg Lêer

Uiteindelijk, Ik' heb de volgende aan mijn layout-file toegevoegd om het analysescript in te sluiten.

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

Dit omvat het script in de pagina en stelt de website-id voor de analysedienst.

## Uitsluiten van de analyse

Om je eigen bezoeken uit de analysegegevens te halen, kan je de volgende lokale opslag in je browser toevoegen:

In Chrome dev-tools (Ctrl+ShiftM SK2I op windows ) kan je de volgende aan de console toevoegenMSC4

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

## Conclusie

Dit was een beetje lastig om op te zetten, maar ik ben blij met het resultaat.. Ik heb nu een zelfbediende analysedienst die geen data aan Google of andere derde partijen overgeeft.. Het is een beetje pijnlijk te installeren, maar zodra ' het gedaan heeft, ' vrij gemakkelijk te gebruiken.M SK8 Ik ben blij with the result and would recommend it to anyone looking for a self.