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 som är en enkel

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

  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

    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.

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:

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

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

 "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

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}

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

Med den associerade inställningarna cs file:

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

Återigen använder detta min POCO konfigurationsgrej (här) för att sätta upp inställningarna. Konfigurera den i mitt program

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

   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

<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

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.