Installation du SDK

QuickMonitoring explore votre site de manière externe — aucun code n'est requis pour les scans QA, la surveillance de disponibilité ou les tests visuels. Mais pour débloquer les analyses, les enregistrements de session, le monitoring des utilisateurs réels, les feature flags et les expériences A/B, vous devez installer le SDK sur le site de votre client.

Sans le SDK, les Phases 5 et 6 ne sont pas disponibles.

---

Installer le SDK

HTML Snippet

Ajoutez ce code avant la balise fermante </head> sur chaque page. Remplacez YOUR_SITE_ID par votre identifiant de site réel.

<!-- QuickMonitoring Tracker -->
<script>
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'qm.start': new Date().getTime(),event:'qm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://cdn.quickmonitoring.com/tracker.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','_qm','YOUR_SITE_ID');
</script>

C'est la méthode d'installation la plus rapide. Compatible avec tout site statique, WordPress, Webflow ou HTML personnalisé.

NPM

Installez le package :

npm install @quickmonitoring/sdk

Initialisez-le au point d'entrée de votre application :

import { QMTracker } from '@quickmonitoring/sdk';

QMTracker.init({ siteId: 'YOUR_SITE_ID' });

Appelez init() une seule fois, le plus tôt possible dans le cycle de vie de votre application. Le tracker est un singleton — l'appeler plusieurs fois n'a aucun effet.

React

Créez un fichier utilitaire pour gérer l'initialisation de manière sécurisée (évite les problèmes SSR) :

// src/lib/qm.ts
import { QMTracker } from '@quickmonitoring/sdk';

export function initQM() {
  if (typeof window !== 'undefined') {
    QMTracker.init({ siteId: 'YOUR_SITE_ID' });
  }
}

Appelez ensuite initQM() à la racine de votre application — généralement dans src/App.tsx ou src/index.tsx :

// src/App.tsx
import { useEffect } from 'react';
import { initQM } from './lib/qm';

export default function App() {
  useEffect(() => {
    initQM();
  }, []);

  return <YourApp />;
}

Next.js

Pour Next.js App Router, chargez le script du tracker via le composant intégré <Script> avec strategy="afterInteractive". Cela diffère le chargement jusqu'à ce que la page soit interactive, ce qui évite de bloquer le rendu initial.

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://cdn.quickmonitoring.com/tracker.js?id=YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Remplacez YOUR_SITE_ID par votre identifiant de site réel. La stratégie afterInteractive garantit que le tracker se charge sans affecter vos Core Web Vitals.

---

Trouver votre identifiant de site

Votre identifiant de site est unique pour chaque site que vous avez ajouté dans QuickMonitoring.

1. Rendez-vous sur app.quickmonitoring.com
2. Cliquez sur Sites dans la barre latérale
3. Cliquez sur votre site
4. Accédez à Paramètres
5. Copiez le Site ID en haut de la page des paramètres

Il ressemble à un UUID : a1b2c3d4-e5f6-7890-abcd-ef1234567890. Utilisez cette chaîne exacte — ne l'entourez pas de guillemets supplémentaires dans le snippet HTML (elle est déjà une chaîne dans la fermeture JS).

---

Vérifier l'installation

Après avoir déployé le SDK, confirmez qu'il se charge correctement :

1. Ouvrez votre site dans un navigateur
2. Ouvrez les DevTools → onglet Network
3. Filtrez par cdn.quickmonitoring.com
4. Rechargez la page
5. Vous devriez voir une requête vers tracker.js avec un statut 200

Si la requête apparaît, tout est bon. Les données commenceront à s'afficher dans votre tableau de bord QuickMonitoring dans les quelques minutes suivant le trafic des utilisateurs réels.

Vous pouvez également vérifier l'onglet Network pour les requêtes vers api.quickmonitoring.com — ce sont les soumissions d'événements envoyées par le tracker.

---

Ce que le SDK débloque

L'installation du SDK active les fonctionnalités suivantes :

Phase 5 — Analytics

• Suivi d'événements personnalisés (clics, soumissions de formulaires, conversions)
• Analyse des entonnoirs — identifiez où les utilisateurs abandonnent
• Analyse des cohortes — regroupez les utilisateurs par comportement ou par date
• Courbes de rétention — mesurez la fréquence de retour des utilisateurs
• Heatmaps — visualisez les clics, les taps et la profondeur de défilement
• Tableaux de bord SQL personnalisés — interrogez vos données d'événements brutes

Phase 6 — Feature Flags et expériences

• Feature flags — déployez des fonctionnalités auprès d'utilisateurs spécifiques ou en pourcentage
• Expériences A/B — testez des variantes et mesurez la significativité statistique
• Enregistrements de session — rejouez les sessions utilisateurs réelles pour déboguer les problèmes UX
• Real User Monitoring (RUM) — Core Web Vitals mesurés depuis de vrais navigateurs, pas en conditions de laboratoire
• Suivi des événements LLM — si votre application utilise l'IA, suivez les prompts, les completions, la latence et les coûts

Aucun de ces éléments ne nécessite de modification côté serveur. Le SDK gère la collecte ; QuickMonitoring s'occupe du stockage, de l'analyse et de l'affichage.