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

Qu'est-ce que l'analyse

Analytics est 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 internet.

Google Analytics est un excellent choix, mais il pourrait y avoir des problèmes de confidentialité des données ainsi que 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 plus 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

• utiliser les solutions cloud UMAMI (payées avec un forfait 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 héberger Umami.

Plongeons-nous dans la façon d'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, il sera nécessaire 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 aux 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"
  }
  

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
  

• 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
   

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
   

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

   npx prisma migrate resolve --applied 01_init
   

   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 (
        <html lang="en" className="dark">
      <body className={cn(`${inter.className} antialiased`)}>
          <Navbar />
        {children}
        <Footer />
      </body>
      <Script 
          defer 
          src="https://[your-analytics-app].vercel.app/script.js" 
          data-website-id="xxxx-xxx-xxxx-xxxx-xxxxx" 
        />
    </>
  )
}

After adding the Sript in your root layout, deploy your app and visit your web page. you will be able to track the visits on your analytics dashboard page.

Conclusion

Hope with help of this article you will be able to set up analytics for your application quickly and easily, without relying on third-party services. Since Vercel and Supabase both provides generous free tier, you can run your analytics for free in the initial days while being GDPR compliant.

About Invoizly

Invoizly is all about making invoicing easy and free. With Invoizly, you can quickly create high-quality, customizable invoices that look professional. It’s designed to be super user-friendly, so you can focus on your business instead of getting bogged down in paperwork.

Cover image by Marissa Grootes on Unsplash

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!