Utilisation de Umami pour l'analyse locale (Français (French))

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 qui est une simple solution d’analyse Web personnalisée. Il s’agit d’une grande alternative à Google Analytics et est relativement facile à installer.

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

  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

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

    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.

chmod 777 /mnt/umami/postgres

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:

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

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

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

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}

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

Avec les paramètres associés cs file:

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) pour configurer les réglages. Établissez-le dans mon programme.cs:

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:

   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.

<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

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.