# Utilisation de Umami pour l'analyse locale

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

## Introduction

L’une des choses qui m’ont embarrassée au sujet de ma configuration actuelle était d’avoir à utiliser Google Analytics pour obtenir les données sur les visiteurs (que peu y a-t-il de ce genre ??). Alors j’ai voulu trouver quelque chose que je pouvais faire moi-même-hôte qui ne passe pas les données à Google ou à tout autre tiersM SK4 J’ai trouvé [Umami](https://umami.is/) qui est une simple solution d’analyse Web personnalisée. Il s’agit d’une grande alternative à Google Analytics et est relativement facile à installer.

[TOC]

## Installation

L’installation est PRETTY simple, mais il a fallu un peu de fiddling pour vraiment aller de l’avant.

### Docker Compose

Comme je voulais ajouter Umami à mon docker actuel-compose setup, j'avais besoin d'ajouter un nouveau service à mon `docker-compose.yml` file. J’ai ajouté ce qui suit à la base du fichier

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


```

Ce docker-compose.yml contient la configuration suivante

1. Un nouveau service appelé `umami` qui utilise le `ghcr.io/umami-software/umami:postgresql-latest` image. Ce service est utilisé pour exploiter le service d'analyse Umami.
2. Un nouveau service appelé `db` qui utilise le `postgres:16-alpine` image. Ce service sert à exploiter la base de données Postgres que Umami utilise pour stocker ses données.
   Note pour ce service I'm l’a mapped à un répertoire sur mon serveur afin que les données soient maintenues entre restarts.

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

Vous ' aurez besoin de ce répertoire pour exister et être rédigable par l'utilisateur du docker sur votre serveur.

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

3. Un nouveau service appelé `cloudflaredumami` qui utilise le `cloudflare/cloudflared:latest` image. Ce service est utilisé pour tunneler le service Umami par Cloudflare afin qu'il puisse être consulté à partir de l'Internet.

### Env File

Pour le soutenir, j’ai également mis à jour mon `.env` pour inclure les éléments suivants:

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

Ceci établit la configuration du docker compose (the `<>` Les qualifications doivent évidemment être remplacées par vos propres valeurs). `cloudflaredumami` service est utilisé pour tunneler le service Umami par Cloudflare afin de lui permettre d’accéder à partir de l’Internet. Il est possible d’utiliser un PATH BASE _ mais pour Umami il faut malheureusement reconstruire pour changer le chemin de base, c’est pourquoi je l’ai laissé en tant que chemin root pour l’instant.

### Tunnel Cloudflare

Pour mettre en place le tunnel cloudflare pour ce (qui sert de cheminement pour le fichier js utilisé pour l'analyse - getinfoM SK2js) J'ai utilisé le site webMSC4

![Tunnel Cloudflare](umamisetup.png)

Cela établit le tunnel au service Umami et lui permet d’accéder à partir de l’Internet. `umami` service dans le docker-composer le fichier (en tant qu'il est sur le même réseau que le tunnel éclairé par la nuage ilMSC3est un nom valideM SK4

### Mise en place de Umami dans la page

Pour ouvrir le chemin du script (appelé `getinfo` dans ma configuration ci-dessus) I' j’ai ajouté une entrée de configuration à mes appsettings

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

Vous pouvez aussi les ajouter à votre fichier .env et les transmettre en tant que variables environnementales au 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}
```

Vous configurez l'ID du site Web dans le tableau de bord d'Umami lorsque vous configurez le site. M SK1Noter que le nom d'utilisateur et le mot de passe par défaut pour le service Umami sont `admin` et `umami`, vous devez les changer après la mise en place
![Le tableau de bord Umami](umamiaddwebsite.png)

Avec les paramètres associés cs file:

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

Encore une fois cela utilise mon POCO stuff de configuration ([ici](/blog/addingidentityfreegoogleauth#configuring-google-auth-with-poco)) pour configurer les réglages.
Établissez-le dans mon programme.cs:

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

Et enfin, dans mon `BaseController.cs` `OnGet` méthode I' j’ai ajouté ce qui suit pour fixer le chemin du script d’analyse:

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

Ceci définit le chemin du script d'analyse à utiliser dans le fichier de layout.

### Fichier de layout

Finalement, j’ai ajouté ce qui suit à mon fichier de layout pour y inclure le script d’analyse.

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

Cela inclut le script de la page et fixe l'ID du site Web pour le service d'analyse.

## En excluant vous-même de l'analyse

Pour exclure vos propres visites des données d'analyse, vous pouvez ajouter le stockage local suivant dans votre navigateur:

Dans les outils dev de Chrome (Ctrl+ShiftM SK2I sur windows ) vous pouvez ajouter ce qui suit à la console

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

## Conclusion

C’est un peu de faff à mettre en place mais je'je suis satisfait du résultat.Je dispose maintenant d’un service d’analyse autonomeM SK2 qui ne passe pas les données à Google ou à n’importe quel autre tiers.