Using Umami voor Lokale Analytics (Nederlands (Dutch))

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 Het is een eenvoudige webanalytics-oplossing.

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.

  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 :

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

    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.

chmod 777 /mnt/umami/postgres

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:

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

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.

 "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.

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

  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

Met de geassocieerde instellings cs-file:

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

Nogmaals, dit gebruikt mijn POCO-config dingen (Hier.) om de instellings op te zetten. Stel het op in mijn programma.cs:

builder.Configure<AnalyticsSettings>();

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

   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.

<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

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.