Back to "Utilizzare Umami per l'analisi locale"

This is a viewer only at the moment see the article on how this works.

To update the preview hit Ctrl-Alt-R (or ⌘-Alt-R on Mac) or Enter to refresh. The Save icon lets you save the markdown file to disk

# Utilizzare Umami per l'analisi locale

<datetime class="hidden">2024-08-08T15:53</datetime>

## Introduzione

Una delle cose che mi annoiava riguardo alla mia installazione attuale era il fatto di dover usare Google Analytics per ottenere i dati dei visitatori (che poco ne c'è ??). Perciò volevo trovare qualcosa che potessi fare io---host che non trasmettesse i dati a Google o ad altri terzi partiti. [Umami](https://umami.is/) che è una semplice soluzione di analisi web personalizzata.

[TOC]

## L'installazione

L'installazione è molto semplice ma ci ha messo un po' di fiddling per andare davvero avanti...

### Docker Compose

Dato che volevo aggiungere Umami al mio docker attuale-compose setup dovevo aggiungere un nuovo servizio. `docker-compose.yml` file. Ho aggiunto il seguente alla parte inferiore del 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

```

Questo docker-compose.yml file contiene la configurazione seguenteM SK2

1. Un nuovo servizio chiamato `umami` che usa il `ghcr.io/umami-software/umami:postgresql-latest` image. Questo servizio è usato per gestire il service di analisi Umami.
2. Un nuovo servizio chiamato `db` che usa il `postgres:16-alpine` image. Questo servizio è usato per far funzionare la Postgres database che Umami usa per immagazzinare i suoi dati.
   Nota per questo servizio I'm l'ha mappato in un directorio sul mio server così che i dati siano persistenti tra i ricostruimenti.

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

Avete bisogno di questo direttore per esistere e essere programmabile dall'utente del docker sul vostro server.

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

3. Un nuovo servizio chiamato `cloudflaredumami` che usa il `cloudflare/cloudflared:latest` image. Questo servizio è usato per tunnelare il servizio Umami attraverso Cloudflare per permetterlo di essere accessibile da internet.

### Env File

Per supportarlo ho anche aggiornato il mio `.env` file per includere il seguente:

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

Questo configura la configurazione del docker compose (the `<>` Gli esempi ovviamente hanno bisogno di essere sostituiti con i vostri valori). `cloudflaredumami` il servizio viene usato per tunnelare il servizio Umami attraverso Cloudflare per permetterne l'accesso da internet. È POSSIbile usare un PATH BASEM SK2 ma per Umami è fastidioso che sia necessario ricostruirlo per cambiare il percorso base quindi l'ho lasciato come percorso principale per ora.

### Tunnel Cloudflare

Per creare il tunnel cloudflare per questo ( che agisce come percorso per il file js usato per l'analisi - getinfoM SK2js) Ho usato il sito webMSC4

![Tunnel Cloudflare](umamisetup.png)

Questo configura il tunnel al servizio Umami e lo permette di essere accessibile da internet. Nota, Ve lo faccio notare. `umami` service in the docker-compose file (as itM SK2s on the same network as the cloudflared tunnel it 'is a valid nameMSC4

### Setup di Umami sulla pagina

Per attivare il percorso per la scrittura chiamata ( `getinfo` nella mia configurazione sopra) Io'ho aggiunto un config entry alle mie appsettings.

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

Si possono anche aggiungere ai vostri file .env e trasferirli come variabili ambientali al docker.

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

Si crea il WebsiteId nel pannello di controllo Umami quando si crea il sito. M SK1 Notate che il nome e la password di base per il servizio Umami sono `admin` e `umami`, dovete cambiare questi dopo l'installazione).
![Dashboard Umami](umamiaddwebsite.png)

Con le configurazioni associate cs file:

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

Di nuovo questo usa i miei programmi di configurazione POCO ([Qui.](/blog/addingidentityfreegoogleauth#configuring-google-auth-with-poco)) per stabilire le configurazioni.
Mettetelo nel mio programma.cs:

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

E alla fine nel mio `BaseController.cs` `OnGet` metodo I'ho aggiunto il seguente per stabilire il percorso del codice analitico:

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

Questo stabilisce il percorso del codice analitico da usare nel file di layout.

### File di Layout

Infine, I'ho aggiunto le cose suivantes al mio file di layout per includere lo script analiticoM SK2

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

Include lo script nella pagina e stabilisce l'id del sito per il servizio di analisi.

## Escludere te stesso dalle analisi.

Per excludere le vostre visite dai dati di analisi potete aggiungere il seguente archivio locale nel vostro browser:

Nell'outils dev di Chrome (Ctrl+ShiftM SK2I su windowsMSC3 si può aggiungere la following to the console :

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

## Conclusione

È stato un po' difficile da montare ma sono felice del risultato... Ho ora un servizio di analisi personalizzato che non passa i dati a Google o ad altri terzi... È un po’ difficile da creare, ma una volta fatto, '.

This is a preview from the server running through my markdig pipeline

ASP.NET Umami

Utilizzare Umami per l'analisi locale

Thursday, 08 August 2024

Introduzione

Una delle cose che mi annoiava riguardo alla mia installazione attuale era il fatto di dover usare Google Analytics per ottenere i dati dei visitatori (che poco ne c'è ??). Perciò volevo trovare qualcosa che potessi fare io---host che non trasmettesse i dati a Google o ad altri terzi partiti. Umami che è una semplice soluzione di analisi web personalizzata.

L'installazione

L'installazione è molto semplice ma ci ha messo un po' di fiddling per andare davvero avanti...

Docker Compose

Dato che volevo aggiungere Umami al mio docker attuale-compose setup dovevo aggiungere un nuovo servizio. docker-compose.yml file. Ho aggiunto il seguente alla parte inferiore del 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

Questo docker-compose.yml file contiene la configurazione seguenteM SK2

Un nuovo servizio chiamato umami che usa il ghcr.io/umami-software/umami:postgresql-latest image. Questo servizio è usato per gestire il service di analisi Umami.
Un nuovo servizio chiamato db che usa il postgres:16-alpine image. Questo servizio è usato per far funzionare la Postgres database che Umami usa per immagazzinare i suoi dati. Nota per questo servizio I'm l'ha mappato in un directorio sul mio server così che i dati siano persistenti tra i ricostruimenti.

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

Avete bisogno di questo direttore per esistere e essere programmabile dall'utente del docker sul vostro server.

chmod 777 /mnt/umami/postgres

Un nuovo servizio chiamato cloudflaredumami che usa il cloudflare/cloudflared:latest image. Questo servizio è usato per tunnelare il servizio Umami attraverso Cloudflare per permetterlo di essere accessibile da internet.

Env File

Per supportarlo ho anche aggiornato il mio .env file per includere il seguente:

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}

Questo configura la configurazione del docker compose (the <> Gli esempi ovviamente hanno bisogno di essere sostituiti con i vostri valori). cloudflaredumami il servizio viene usato per tunnelare il servizio Umami attraverso Cloudflare per permetterne l'accesso da internet. È POSSIbile usare un PATH BASEM SK2 ma per Umami è fastidioso che sia necessario ricostruirlo per cambiare il percorso base quindi l'ho lasciato come percorso principale per ora.

Tunnel Cloudflare

Per creare il tunnel cloudflare per questo ( che agisce come percorso per il file js usato per l'analisi - getinfoM SK2js) Ho usato il sito webMSC4

Tunnel Cloudflare

Questo configura il tunnel al servizio Umami e lo permette di essere accessibile da internet. Nota, Ve lo faccio notare. umami service in the docker-compose file (as itM SK2s on the same network as the cloudflared tunnel it 'is a valid nameMSC4

Setup di Umami sulla pagina

Per attivare il percorso per la scrittura chiamata ( getinfo nella mia configurazione sopra) Io'ho aggiunto un config entry alle mie appsettings.

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

Si possono anche aggiungere ai vostri file .env e trasferirli come variabili ambientali al docker.

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}

Si crea il WebsiteId nel pannello di controllo Umami quando si crea il sito. M SK1 Notate che il nome e la password di base per il servizio Umami sono admin e umami, dovete cambiare questi dopo l'installazione). Dashboard Umami

Con le configurazioni associate cs file:

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

Di nuovo questo usa i miei programmi di configurazione POCO (Qui.) per stabilire le configurazioni. Mettetelo nel mio programma.cs:

builder.Configure<AnalyticsSettings>();

E alla fine nel mio BaseController.cs OnGet metodo I'ho aggiunto il seguente per stabilire il percorso del codice analitico:

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

Questo stabilisce il percorso del codice analitico da usare nel file di layout.

File di Layout

Infine, I'ho aggiunto le cose suivantes al mio file di layout per includere lo script analiticoM SK2

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

Include lo script nella pagina e stabilisce l'id del sito per il servizio di analisi.

Escludere te stesso dalle analisi.

Per excludere le vostre visite dai dati di analisi potete aggiungere il seguente archivio locale nel vostro browser:

Nell'outils dev di Chrome (Ctrl+ShiftM SK2I su windowsMSC3 si può aggiungere la following to the console :

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