# Verwendung von Umami für lokale Analysen

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

## Einleitung

Eines der Dinge, die mich über mein aktuelles Setup verärgerte war, Google Analytics verwenden zu müssen, um Besucherdaten zu erhalten, was wenig es davon gibt.??).. Also wollte ich etwas finden, das ich selbst finden konnte.-.host, das Daten an Google oder andere Dritte weitergegeben hat. [Umami](https://umami.is/) das ist eine einfache self-- hosted web analytics Lösung , die ,. , es ist eine große Alternative zu Google Analytics und ist , ( ,relativ , ) , einfach einzurichten

[TOC]

## Installation

Installation ist PRETTY einfach, aber nahm ein faires Stück von Fiddling, um wirklich los zu bekommen

### Docker-Komposition

Da ich Umami zu meinem aktuellen Docker hinzufügen wollte, musste ich einen neuen Service zu meinem `docker-compose.yml` Ich habe das Folgende zum unteren Teil der Datei hinzugefügt.

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


```

Diese Docker-Datei enthält die folgende Setup-Datei:

1. Ein neuer Dienst namens `umami` die die `ghcr.io/umami-software/umami:postgresql-latest` picture-Service Dieser Dienst wird verwendet, um den Umami Analytics Service zu betreiben.
2. Ein neuer Dienst namens `db` die die `postgres:16-alpine` image-.. Dieser Dienst wird verwendet, um die Postgres Datenbank auszuführen, mit der Umami seine Daten speichert...
   Hinweis für diesen Dienst I'-m hat ihn in ein Verzeichnis auf meinem Server gemappt, so dass die Daten zwischen den Neustarts bestehen bleiben.

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

Sie brauchen diesen Direktor zu existieren und durch den Docker Benutzer auf Ihrem Server beschreibbar sein....mehr als ein Linux-Experte, also ist 777... wahrscheinlich hier Overkill

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

3. Ein neuer Dienst namens `cloudflaredumami` die die `cloudflare/cloudflared:latest` Bild: . Dieser Dienst wird verwendet, um den Umami-Dienst durch Cloudflare zu tunneln, damit er aus dem Internet abgerufen werden kann.

### Env-Datei

Um dies zu unterstützen, habe ich auch meine `.env` Datei zum Einschließen der folgenden:

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

Dadurch wird die Konfiguration für den Docker erstellt. `<>` elemets müssen offensichtlich durch Ihre eigenen Werte ersetzt werden `cloudflaredumami` Service wird verwendet, um den Umami-Dienst durch Cloudflare zu tunneln, damit er vom Internet aus zugänglich gemacht werden kann... It...'.s POSSIBLE zur Verwendung eines BASIS-_.PATHs, aber für Umami braucht es lästigerweise einen Wiederaufbau, um die Basispfade zu ändern, so dass IM'.ve ihn als Root-Pfad für jetzt verlassen hat.

### Cloudflare Tunnel

Um den Cloudflare-Tunnel für diese Einstellung einzurichten, die als Pfad für die js-Datei dient, die für Analysen verwendet wird.

![Cloudflare Tunnel](umamisetup.png)

Dies stellt den Tunnel zum Umami-Service auf und erlaubt es, aus dem Internet zuzugreifen. `umami` Service in der Docker-- compose Datei, wie es ' auf dem gleichen Netzwerk wie die cloudflared Tunnel it' ist ein gültiger Name

### Umami Setup auf der Seite

Um den Pfad für das Skript zu aktivieren `getinfo` in meinem Setup oben.). IM.SK1.ve hat einen Config-Eintrag zu meinen Appsettings hinzugefügt.

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

Sie können diese auch zu Ihrer Datei hinzufügen und sie als Umgebungsvariablen an die Docker-Datei übergeben.

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

Sie richten die WebsiteId im Dashboard von Umami ein, wenn Sie die Site einrichten..Beachten Sie den Standardnamen und das Passwort für den Umami-Dienst ist `admin` und `umami`Sie müssen diese nach dem Setup ändern.
![Umami Dashboard](umamiaddwebsite.png)

Mit den zugehörigen Einstellungen cs-Datei

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

Auch dies verwendet meine POCO-Konfig-Sache[Hierher](/blog/addingidentityfreegoogleauth#configuring-google-auth-with-poco)Um die Einstellungen einzurichten, müssen Sie die Einstellungen einstellen.
Stellen Sie es in meinem Programm ein

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

Und schließlich in meinem `BaseController.cs` `OnGet` Methode I'®ve hinzugefügt, um den Pfad für das Analyse-Skript zu setzen

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

Dies setzt den Pfad für das Analyse-Skript, das in der Layoutdatei verwendet werden soll.

### Layout-Datei

Schließlich wurde meiner Layout-Datei das folgende hinzugefügt, um das Analyse-Skript einzufügen.

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

Dies schließt das Skript in der Seite ein und setzt die Website-ID für den Analysedienst.

## Sich von der Analytik ausschließen

Um Ihre eigenen Besuche von den Analysedaten auszuschließen, können Sie die folgende lokale Speicherung in Ihrem Browser hinzufügen.

In Chrome-dev-Tools (.Ctrl.+.Shift.+.I auf Windows-) können Sie die folgenden hinzufügen, um die Konsole

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

## Schlußfolgerung

Dies war ein bisschen von einem faff, um einzurichten, aber I'-m glücklich mit dem Ergebnis - .- Ich habe jetzt einen self---hosted Analytics-Dienst, der nicht übergibt Daten an Google oder eine andere dritte Partei -.- es ist ein wenig von einem Schmerz zu richten, aber sobald es getan hat '-s ziemlich einfach zu bedienen .-I'-m zufrieden mit dem Resultat und würde es jedem empfehlen, für eine selbst suchen --hostete Analyse-Lösung -.-