Umami Analytics auto-hébergé : un guide complet de déploiement gratuit avec Vercel et Supabase

Qu'est-ce que l'analyse

Analyticsest le processus de collecte et d'analyse de données sur la façon dont les visiteurs interagissent avec votre site Web. Ces informations sont cruciales car elles vous permettent de prendre des décisions éclairées pour améliorer votre site Web.

Google Analytics est un excellent choix, mais il pourrait y avoir des problèmes de confidentialité des données ainsi que des problèmes de conformité au RGPD.

Lors du choix d'un outil d'analyse, il est important qu'il :

• est gratuit (open source)
• permet l'auto-hébergement (pas de verrouillage du fournisseur)
• est conforme au RGPD
• est léger et rapide

Umami Analytics coche toutes ces cases.

Umami Analytics : Une solution d'analyse open source

Umami Analytics est un outil simple, rapide et axé sur la confidentialité qui vous permet de suivre l'utilisation du site Web sans compromettre la confidentialité des utilisateurs. Il s'agit d'une alternative open source à Google Analytics. Un gros avantage est qu'Umami Analytics est conforme au RGPD (Règlement Général sur la Protection des Données).

Il existe deux options pour utiliser l'analyse UMAMI

• utilisez les solutions cloud UMAMI (payées avec un plan gratuit)
• Auto-hébergement sur votre serveur

Dans cet article, nous allons explorer l'option d'auto-hébergement. Nous allons utiliser Supabase (plan de niveau gratuit) pour la base de données (postgres) et Vercel (plan de niveau gratuit/hobby) pour l'hébergement d'Umami.

Voyons comment auto-héberger gratuitement les analyses Umami à l'aide de Vercel + Supabase

1. Créer un nouveau projet dans Supabase

• Créez un nouveau compte (si vous n'en avez pas déjà un) avec Supabase et créez un nouveau projet en appuyant sur + Nouveau projet
• Fournissez le nom du projet comme vous le souhaitez (par exemple, your_app_name-analytics)
• N'oubliez pas de stocker le mot de passe quelque part, vous en aurez besoin plus tard.
• Sélectionnez une région la plus proche de l'emplacement du serveur d'hébergement.

2. Configuration initiale pour Supabase

• Sélectionnez le projet, accédez à l'éditeur SQL
• Copiez les scripts SQL fournis dans le dépôt github

• Collez-le sur l'éditeur SQL et cliquez sur exécuter

• Vous pourrez voir les tableaux nouvellement créés sur l'option Table Editor

• Accédez à Paramètres du projet → Base de données → Chaîne de connexion → Copier l'URL de connexion

3. Fork UMAMI sur github

• Forkez le projet https://github.com/umami-software/umami sur votre compte GitHub.

• Modifier le fichier db/postgresql/schema.prisma (ajouter directUrl)
  

  datasource db { provider = "postgresql" url = env("DATABASE_URL") directUrl = env("DIRECT_DATABASE_URL") //add this line relationMode = "prisma" }

  Copier après la connexion

4. Déployer sur Vercel

• Allez sur Dashboard sur Vercel et créez un nouveau projet
• Depuis la page du tableau de bord, cliquez sur Importer le projet puis spécifiez l'URL de votre fork du projet sur GitHub.
• Avant de cliquer sur Déployer, ajoutez les variables d'environnement suivantes

DATABASE_URL = postgres://[user]:[password]@aws-0-[aws-region].pooler.supabase.com:6543/postgres?**pgbouncer=true&connection_limit=1** DIRECT_DATABASE_URL = postgres://[user]:[password]@aws-0-[aws-region].pooler.supabase.com:**5432**/postgres

Important!!

? DATABASE_URL est la même que l'URL de connexion copiée depuis supabase (à l'étape 2) mais vous devez ajouter?pgbouncer=true&connect_timeout=1à la fin de l'URL

? DATABASE_URL est la même que l'URL de connexion copiée depuis la supabase (à l'étape 2) mais vous devez remplacer le port de 6543 par 5432

• Après cela, cliquez sur déployer

5. Résolution de l'erreur « Le schéma de la base de données n'est pas vide »

• À la deuxième étape, nous avons exécuté un script SQL dans Supabase qui a créé quelques tables dans la base de données. Désormais, lorsque le script est exécuté pendant le déploiement, il génère une erreur avec le code d'erreur P3005 indiquant que le schéma de base de données n'est pas vide.
• Pour résoudre ce problème, clonez votre référentiel forké dans votre local et ajoutez les mêmes variables d'environnement que celles mentionnées ci-dessus (à l'étape 4)

• Exécutez maintenant les commandes suivantes (pour installer les dépendances et configurer la connexion à la base de données)
  

  yarn install yarn build-db

  Copier après la connexion

• Ensuite, nous créerions une migration de base en suivant les étapes ci-dessous

1. Si vous disposez d'un dossier prisma/migrations, supprimez, déplacez, renommez ou archivez ce dossier.

2. Run the following command to create a migrations directory inside with your preferred name. This example will use 01_init for the migration name:

   mkdir -p prisma/migrations/01_init

   Copier après la connexion

3. Generate a migration and save it to a file using prisma migrate diff

   npx prisma migrate diff \ --from-empty \ --to-schema-datamodel prisma/schema.prisma \ --script > prisma/migrations/01_init/migration.sql

   Copier après la connexion

4. Run the prisma migrate resolve command for each migration that should be ignored:

   npx prisma migrate resolve --applied 01_init

   Copier après la connexion

   This command adds the target migration to the _prisma_migrations table and marks it as applied. When you run prisma migrate deploy to apply new migrations, Prisma Migrate:

   1. Skips all migrations marked as 'applied', including the baseline migration
   2. Applies any new migrations that come after the baseline migration

• You will be able to successfully deploy the app on Vercel server after this. The URL of your analytics app would be available under project tab of Vercel app.

6. Login to Umami

• The default credentials for login is

username : admin password : umami

• To change the default credentials navigate to settings → users → admin → edit
• Enter your new password and click on save.

7. Configure your website for analytics tracking

• navigate to settings → websites → + Add website

Name : provide any name of your choice Domain : your [website](https://www.invoizly.com) domain (eg. invoizly.com)

• Once website is added navigate to settings → website → your website name → edit → tracking code. Copy the tracking code.

8. Add tracking code to your project

In Next.JS projects to load a third-party script for multiple routes, import next/script and include the script directly in your layout component:

import Script from 'next/script' export default function Layout({ children, }: { children: React.ReactNode }) { return (    {children}