> ## Documentation Index
> Fetch the complete documentation index at: https://docs.scanova.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Installer le SDK navigateur

> Ajoutez le snippet de suivi Scanova à votre site directement en HTML ou via Google Tag Manager. Compatible avec tout site, CMS ou framework front-end.

Le SDK tient dans une seule balise `<script>`. Vous l'installez une fois dans le `<head>` de votre site et il se charge de façon asynchrone, sans effet sur les performances de la page.

## Étape 1 : copier votre snippet depuis le tableau de bord

1. Dans le tableau de bord Scanova, ouvrez **Analyses → Suivi des conversions**
2. Sélectionnez **Configurer le suivi des conversions**
3. Sélectionnez **Configuration du suivi** sur votre site, dans l'onglet **Intégrer le script**
4. Activez les interrupteurs de suivi automatique souhaités
5. Copiez le snippet généré

Le snippet ressemble à ceci, avec votre `site_id` déjà renseigné :

```html theme={null}
<script>
(function(w,d,s,o,f,js,fjs){
  w['ScanovaTrackingObject']=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
  js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];
  js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
})(window,document,'script','scanova','https://cdn.scanova.io/ct/js/qcg.min.js');

scanova('init', 'YOUR_SITE_ID', {
  autoPageview: true,
  autoClicks: true,
  autoForms: true,
  autoScroll: true
});
</script>
```

## Option A : installer directement dans le HTML (recommandé)

Collez le snippet dans la balise `<head>` de votre site, **avant la fermeture `</head>`** :

```html theme={null}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Your Page</title>

  <!-- Scanova Conversion Tracking -->
  <script>
  (function(w,d,s,o,f,js,fjs){
    w['ScanovaTrackingObject']=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];
    js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
  })(window,document,'script','scanova','https://cdn.scanova.io/ct/js/qcg.min.js');

  scanova('init', 'YOUR_SITE_ID', {
    autoPageview: true,
    autoClicks: true,
    autoForms: true,
    autoScroll: true
  });
  </script>
</head>
<body>
  <!-- your content -->
</body>
</html>
```

**Où le coller sur les plateformes courantes :**

| Plateforme        | Où ajouter le snippet                                               |
| ----------------- | ------------------------------------------------------------------- |
| WordPress         | Appearance → Theme Editor → `header.php`, avant `</head>`           |
| Shopify           | Online Store → Themes → Edit Code → `theme.liquid`, avant `</head>` |
| Webflow           | Project Settings → Custom Code → Head Code                          |
| Squarespace       | Settings → Advanced → Code Injection → Header                       |
| Wix               | Settings → Custom Code → Add Code → Head                            |
| HTML personnalisé | Directement dans le `<head>` de votre modèle HTML                   |

## Option B : Google Tag Manager

Utilisez GTM si vous gérez toutes vos balises depuis la console GTM et ne pouvez pas modifier directement le HTML de votre site.

1. Ouvrez votre conteneur GTM
2. Cliquez sur **Tags → New**
3. Choisissez **Custom HTML** comme type de balise
4. Collez le snippet Scanova complet
5. Réglez le déclencheur sur **All Pages**
6. Nommez la balise (par exemple « Scanova Conversion Tracking ») puis cliquez sur **Save**
7. Faites **Submit** puis **Publish** pour publier le conteneur

<Warning>
  N'installez pas le snippet à la fois directement dans le HTML et via GTM sur la même page. Le SDK se chargerait deux fois et enverrait des événements en double.
</Warning>

**Conseils GTM :**

* Faites se déclencher la balise le plus tôt possible : utilisez les déclencheurs « DOM Ready » ou « Page View », pas « Window Loaded »
* Si votre site est une single-page app (SPA), lisez le [guide SPA et frameworks](/fr/conversion-tracking/browser/spa-frameworks) avant de configurer vos déclencheurs GTM

## Étape 2 : vérifier l'installation

Après avoir déployé votre snippet :

1. Ouvrez votre site dans un navigateur
2. Ouvrez les DevTools, onglet **Network**
3. Filtrez sur `/ct`
4. Rechargez la page

Vous devriez voir une requête `POST` vers `https://t.scanova.io/ct` renvoyant `200`.

Pour une liste de vérification complète, voir [Vérifier et déboguer](/fr/conversion-tracking/browser/verify).

## Étapes suivantes

<CardGroup cols={2}>
  <Card title="Configuration du SDK" icon="sliders" href="/fr/conversion-tracking/browser/sdk-configuration">
    Toutes les options d'init et ce que contrôle chaque interrupteur.
  </Card>

  <Card title="Événements personnalisés" icon="sparkles" href="/fr/conversion-tracking/browser/custom-events">
    Suivre des actions précises depuis votre code JavaScript.
  </Card>

  <Card title="Frameworks SPA" icon="react" href="/fr/conversion-tracking/browser/spa-frameworks">
    Configuration pour React, Next.js et Vue.
  </Card>

  <Card title="Vérifier et déboguer" icon="bug" href="/fr/conversion-tracking/browser/verify">
    Confirmer que les événements sont bien reçus.
  </Card>
</CardGroup>
