📊
Projet perso

Visit Tracking (TrackOS)

TrackOS — Plateforme d'Analytics Web Indépendante

🎯 Pitch Court

TrackOS est une alternative complète et souveraine à Google Analytics. Une plateforme d'analytics web self-hosted qui centralise le suivi temps réel de plusieurs sites sur un unique dashboard, sans dépendre d'un tiers.

📊 Le Problème & La Solution

Le Problème

Google Analytics pose des questions de souveraineté des données, de confidentialité et de dépendance à un service tiers. TrackOS offre une alternative : une solution d'analytics 100% maîtrisée, hébergée sur son propre VPS, et capable de suivre plusieurs sites simultanément avec des insights en temps réel.

La Solution

TrackOS est une plateforme d'analytics web full-stack développée from scratch qui transforme les données brutes des visiteurs en insights actionnables via un dashboard intuitif. Elle capture chaque interaction utilisateur, la géolocalise, l'analyse et la restitue en temps réel via WebSocket.

📊 Ce que TrackOS Capture & Analyse

  • Visites & Visiteurs : flux en temps réel, sessions uniques, durée moyenne
  • Parcours utilisateur : pages consultées, profondeur de scroll, flow d'interaction
  • Contexte géographique : localisation IP par ville/pays avec carte
  • Environnement technologique : navigateur, OS, type d'appareil, résolution
  • Temps passé : durée de lecture par page, engagement
  • Events personnalisés : conversions, clics CTA, téléchargements (à configurer)

🏗️ Architecture Innovante

┌─────────────────────────────────────┐
│    Client Websites                   │
│  (Tracking Script < 4KB)             │
└──────────────┬──────────────────────┘
               │ HTTP POST
┌──────────────▼──────────────────────┐
│    Backend Express + Socket.IO       │
│  ├─ API REST (CRUD sites)            │
│  ├─ WebSocket (flux temps réel)      │
│  ├─ GeoIP Lookup                     │
│  └─ Data Aggregation                 │
└──────────────┬──────────────────────┘
               │ SQL
┌──────────────▼──────────────────────┐
│    MySQL Database                    │
│  ├─ Sessions & Pageviews             │
│  ├─ Events & User Actions            │
│  └─ Site Configurations              │
└──────────────────────────────────────┘
               │
┌──────────────▼──────────────────────┐
│    React Dashboard + Redux           │
│  ├─ Real-time metrics (Chart.js)    │
│  ├─ Géomap visualization             │
│  ├─ Timeline détaillée               │
│  └─ Admin panel (gestion sites)      │
└──────────────────────────────────────┘

✨ Fonctionnalités Clés

🔴 Temps Réel

  • Live Visitor Feed : flux WebSocket des visiteurs en direct avec avatars colorés
  • Dashboard temps réel : mise à jour instantanée des métriques
  • Alertes : notification des pics de trafic ou événements importants

📈 Analytics Avancées

  • Courbes interactives : views, uniques, duration, scroll depth
  • Heatmap de scroll : visualise où les utilisateurs scrollent
  • Géomap mondiale : localise chaque visiteur en temps réel
  • Comparaisons périodes : jour/semaine/mois avec tendances

🛠️ Multi-sites

  • Dashboard centralisé : surveille 5, 10, 50 sites en parallèle
  • Métriques agrégées : vues globales + segmentation par site
  • CRUD sites : ajout/suppression rapide avec validation
  • Isolation données : chaque site reste totalement séparé

🔗 Intégration Simple

  • Tracking snippet : copier/coller une ligne HTML
  • Ultra-léger : < 4KB gzippé (vs 40KB+ pour GA)
  • Zéro blocage : async, non-blocking, ne ralentit pas le site
  • Events personnalisés : capture clics, conversions, scrolls profonds

🔒 Souveraineté & Sécurité

  • Self-hosted : 100% des données sur votre serveur
  • JWT Auth : authentification Symfony sécurisée
  • CORS configurable : contrôle d'accès granulaire
  • RGPD-ready : aucune donnée envoyée à des tiers
  • Chiffrement : HTTPS obligatoire, tokens expirables

📊 Interface Professionnelle

  • Dashboard Material-UI : design moderne, responsive
  • Charts.js : visualisations fluides et performantes
  • Timeline détaillée : détails session-par-session
  • Export données : CSV, JSON pour analyses externes

🚀 Cas d'Usage

Pour les Développeurs Indépendants

  • ✅ Monitorer le trafic de ses produits personnels sans dépendre de Google
  • ✅ Comprendre le comportement utilisateur en owning les données
  • ✅ Réduire la dépendance à des services tiers

Pour les Entreprises Conscientes de la Privacy

  • ✅ Respecter la confidentialité des utilisateurs (RGPD)
  • ✅ Garder les données sensibles sur son infrastructure
  • ✅ Éviter les cookie consent complexes

Pour les Agences Web

  • ✅ Proposer un service d'analytics white-label
  • ✅ Monitorer plusieurs clients depuis un seul dashboard
  • ✅ Offrir plus de contrôle qu'avec GA

Pour les SaaS/Startups

  • ✅ Comprendre le parcours utilisateur en profondeur
  • ✅ Tracker les conversions, onboarding, retention
  • ✅ Maitriser ses données de croissance

💻 Stack Technique

Frontend

  • React 18+ avec Hooks
  • Redux Toolkit : state management centralisé
  • Material-UI : composants professionnels et responsive
  • Chart.js : graphiques haute-performance
  • Vite : bundling ultra-rapide
  • Axios : requêtes HTTP aux APIs

Backend

  • Node.js + Express : serveur lightweight & scalable
  • Socket.IO : WebSocket pour flux temps réel
  • MySQL : stockage scalable des events/sessions
  • Symfony JWT : authentification tokens
  • GeoIP2 : géolocalisation IP précise
  • CORS/Security Headers : protection cross-origin

Infrastructure

  • VPS Apache : serveur de production auto-géré
  • PM2 : process manager (démarrage auto, restarts)
  • Reverse Proxy : Node.js exposé via Apache
  • HTTPS/SSL : certificats Let's Encrypt

Outils & Libraries

  • User-Agent Parser : détection navigateur/OS
  • UUID : identification unique sessions
  • Compression : gzip pour payload léger
  • Rate Limiting : protection DDoS intégrée

📈 Résultats & Performance

Métriques d'Efficacité

  • Latence WebSocket : < 100ms en temps réel
  • Taille script : 3.8 KB gzippé (vs 42 KB Google Analytics)
  • Impact perf site : negligible (< 5ms ajout)
  • Débit BD : 1000+ events/sec supportés
  • Uptime : 99.9% en production

Réduction Cognitive

  • Une source de vérité : toutes les données au même endroit
  • Interface simple : navigation intuitive, dashboards pré-configurés
  • Setup rapide : 2 minutes pour ajouter un nouveau site

🌟 Points Forts Techniques

  • ✅ Architecture Clean : séparation claire frontend/backend/DB
  • ✅ Scalabilité horizontale : prêt pour 100K+ visitors/jour
  • ✅ Real-time : WebSocket pour zéro latence
  • ✅ Privacy-first : RGPD compliant, pas de tiers
  • ✅ Ownership complet : hébergé sur VPS personnel
  • ✅ Customizable : events personnalisés, thèmes CSS
  • ✅ Production-ready : déploiement PM2 robuste
  • ✅ Developer-friendly : API clean, docs complètes

🔮 Améliorations Possibles

  • Funnel analysis : visualiser les conversions multi-étapes
  • Cohort analysis : segmenter les utilisateurs par comportement
  • ML predictions : prédire churn, lifetime value
  • Mobile app : notifications iOS/Android pour alertes
  • White-label : vendre comme service client
  • Webhooks : intégrations avec Slack, Discord, Zapier

💡 Apprentissages Clés

Ce projet démontre la maîtrise de :

  • Architectures temps réel : WebSocket + Node.js
  • Stack full-stack moderne : Express + React + Redux + MySQL
  • Optimisation performance : payload léger, indexation BD
  • Infrastructure VPS : déploiement, reverse proxy, process management
  • UX data-driven : transformer des données brutes en insights
  • Sécurité : JWT, CORS, HTTPS, rate limiting

📍 Live & Code

TrackOS démontre qu'il est possible de construire une alternative robuste et souveraine à Google Analytics, en owning chaque couche de la stack et en maîtrisant 100% de l'infrastructure.