# Att använda Umami för lokal analys

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

## Inleiding

En av de saker som gjorde mig irriterad över min nuvarande uppsättning var att behöva använda Google Analytics för att få besökarnasdata. ( vad lite finns det där med. [Umami](https://umami.is/) som är en enkel

[TOC]

## Installation

Installationen är väldigt enkel men det krävdes en hel del fiddling för att komma igång.

### Docker Komponera

Eftersom jag ville lägga till Umami till min nuvarande docker-kompositionsställning behövde jag lägga till en ny tjänst till min `docker-compose.yml` file. Jag lade följande till botten av filen

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


```

Den här dockern-komposeer.yml-lêern innehåller följande konfigurationen

1. En ny tjänst som heter `umami` som använder `ghcr.io/umami-software/umami:postgresql-latest` image. Den här tjänsten används för att köra Umami Analytics service
2. En ny tjänst som heter `db` som använder `postgres:16-alpine` image. Den här servicen används för att köra Postgres-databasen som Umami använder för att lagra data
   Beteckning för den här tjänsten I'm kartlade den till ett katalog på min server så att datan förblir kvar mellan restarts

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

Du' kommer behöva att den här regissören existerar och ska kunna skrivas av byckeranvändaren på din server. ( är återigen inte en linuxexpert, så det är troligt att 777 är överkill här.

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

3. En ny tjänst som heter `cloudflaredumami` som använder `cloudflare/cloudflared:latest` image. Den här servicen används för att tunnella Umami-tjänsterna genom Cloudflare för att låta dem få tillgång till dem från internet

### Env-Datei

För att stödja detta har jag också uppdaterat min `.env` att inkludera följande:

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

Detta konfigurerar konfigurationen för dockern compose (the `<>` elemets behöver uppenbarligen ersättas med era egna värden). `cloudflaredumami` service används för att tunnela Umami-tjänsterna genom Cloudflare för att låta dem få tillgång till dem från internet.

### Cloudflare tunnel

För att sätta upp cloudflaretunneln för den här ( som fungerar som vägen för js- pliken som används för analytik | - | getinfo

![Cloudflare tunnel](umamisetup.png)

Detta konfigurerar tunneln till Umami-tjänsterna och låter den få tillgång till det från internet. `umami` service i dockern.

### Umami Setup på sidan

För att aktivera vägen för skriptet ( som kallas `getinfo` i min uppsättning ovanför) Jag' har lagt till en konfigurationsinskrywing till mina appsettings

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

Du kan också lägga till dessa i din .env-Datei och skicka in dem som miljövariabler till dockern

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

Du konfigurerar WebsiteId i Umami-dashboarden när du konfigurerar sidan. (Antag att den standard användarnamen och lösenordet för Umami service är `admin` och `umami`, måste du ändra dessa efter konfigurationen
![Umami-dashboard](umamiaddwebsite.png)

Med den associerade inställningarna cs file:

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

Återigen använder detta min POCO konfigurationsgrej ([här](/blog/addingidentityfreegoogleauth#configuring-google-auth-with-poco)) för att sätta upp inställningarna.
Konfigurera den i mitt program

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

Och slutligen i mitt `BaseController.cs` `OnGet` metod I' har lagt till följande för att definiera vägen för det analytiska skriptet

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

Detta ställer vägen för det analytiska skriptet som ska användas i layoutdatet.

### Layout-Datei

Till slut har jag lagt till följande i layoutfilet för att inkludera analytiska skriptet

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

Detta innefattar skriptet på sidan och sätter webbsidors ID för analysdiensten.

## Välja dig själv från analytik

För att avlägsna dina egna besök från analytiska data kan du lägga till följande platsvara i din browser:

I Chrome dev-verktyg (Ctrl+Shift +I på windowsM SK3 kan du lägga till följande till konsolenMSC4

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

## Slutsatsen

Det var lite fet att sätta upp men jag är glad med resultatet.. Jag har nu en självarbetande analystjänst som inte skickar data till Google eller någon annan tredje parten. . Det är lite svårt att sätta ihop, men när det gjorts så är det ganska enkelt att använda.