Aller au contenu principal

Installation du SDK

Open in QuickMonitoring→ Sites → [Votre site] → Démarrage rapide → SDK

Installez le SDK QuickMonitoring sur votre site pour commencer à collecter des données analytiques, des métriques RUM et activer les feature flags — requis pour toutes les fonctionnalités des Phases 5 et 6.

Ce que vous verrez​

Depuis l'onglet Démarrage rapide → SDK de votre site, QuickMonitoring affiche votre snippet d'installation personnalisé avec votre siteId déjà intégré. Vous pouvez choisir parmi quatre méthodes d'installation :

  • HTML — un tag <script> à coller dans le <head> de votre site
  • npm — installation du paquet @quickmonitoring/tracker
  • React — composant <QMProvider> pour les applications React
  • Next.js — intégration via le layout racine App Router

Une fois le SDK détecté par nos serveurs, la page affiche un indicateur vert SDK actif et indique l'heure du dernier événement reçu.

Comment l'installer​

Option 1 — Snippet HTML (recommandé pour la plupart des sites)​

Collez le snippet suivant dans la balise <head> de toutes vos pages, en remplaçant YOUR_SITE_ID par l'identifiant affiché dans l'interface :

<script>
  (function(w,d,s,o){
    w.QMTracker=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
    var js=d.createElement(s);js.async=1;
    js.src='https://cdn.quickmonitoring.com/tracker.min.js';
    d.head.appendChild(js);
  })(window,document,'script','QMTracker');
  QMTracker('init', { siteId: 'YOUR_SITE_ID' });
</script>

Le script est chargé de manière asynchrone et n'impacte pas la performance de votre page.

Option 2 — npm​

npm install @quickmonitoring/tracker
import QMTracker from '@quickmonitoring/tracker';

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

Appelez init() une seule fois, au chargement de l'application. Les pages vues suivantes sont capturées automatiquement.

Option 3 — React​

import { QMProvider } from '@quickmonitoring/tracker/react';

export default function App({ children }) {
  return (
    <QMProvider siteId="YOUR_SITE_ID">
      {children}
    </QMProvider>
  );
}

Le composant QMProvider initialise le tracker et gère automatiquement les changements de route dans les SPA (Single Page Applications).

Option 4 — Next.js (App Router)​

Dans votre fichier app/layout.tsx :

import { QMProvider } from '@quickmonitoring/tracker/next';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
      <body>
        <QMProvider siteId="YOUR_SITE_ID">
          {children}
        </QMProvider>
      </body>
    </html>
  );
}

L'intégration Next.js détecte automatiquement les navigations App Router et les enregistre comme pages vues distinctes.

Vérifier l'installation​

  1. Ouvrez votre site dans un navigateur.
  2. Revenez dans QuickMonitoring → Démarrage rapide → SDK.
  3. Si l'installation est correcte, vous verrez le statut passer à SDK actif dans les 30 secondes.
  4. Vous pouvez également ouvrir la console du navigateur et taper QMTracker — l'objet doit être défini.

Condition de validation​

Cet achievement est débloqué lorsque : le SDK a envoyé au moins un événement (page vue ou événement personnalisé) depuis votre site, et QuickMonitoring a confirmé la réception de cet événement.

Problèmes courants​

Le statut reste « En attente » après l'installation Vérifiez que le siteId dans le snippet correspond bien à celui affiché dans l'interface. Les identifiants sont sensibles à la casse.

Erreur CORS dans la console du navigateur Le domaine de votre site doit être ajouté à la liste des domaines autorisés dans Paramètres du site → Domaines autorisés. Par défaut, localhost est autorisé pour le développement.

Le SDK se charge mais aucun événement n'apparaît Si votre site utilise un Content Security Policy (CSP), ajoutez https://cdn.quickmonitoring.com et https://api.quickmonitoring.com aux directives script-src et connect-src.

Installations multiples (doublons d'événements) Si le snippet est inclus dans un template partagé et dans une intégration npm, le tracker sera initialisé deux fois. Choisissez une seule méthode d'installation par projet.