Installation du SDK

Le SDK s’installe par une balise <script>, sans outil de build. Il expose l’objet global window.belvdr.

Balise `<script>`

À coller dans le <head> de ton application, avec la clé publique du projet (le code des Réglages du projet la contient déjà) :

<script src="https://api.belvdr.com/sdk/v0.1.0/belvdr.min.js"></script>
<script>
  belvdr.init('pk_…', { apiHost: 'https://api.belvdr.com' })
  belvdr.startSession()
</script>

apiHost est l’adresse de l’API publique, https://api.belvdr.com : le SDK y envoie les enregistrements et en charge le script.

Version figée ou `latest`

L’API sert le script du SDK sous deux adresses :

Adresse	Script servi	Cache du navigateur
`/sdk/v<version>/belvdr.min.js`	cette version du SDK, qui ne change jamais	gardé un an, sans requête
`/sdk/latest/belvdr.min.js`	la version courante, qui suit les mises à jour	5 minutes, puis revalidé (304 s’il n’a pas changé)

La version courante du SDK est la 0.1.0. Le code des Réglages pointe vers l’adresse figée, https://api.belvdr.com/sdk/v0.1.0/belvdr.min.js : ton site garde le même SDK tant que tu ne changes pas ce numéro. Pour suivre les mises à jour sans intervenir, remplace v0.1.0 par latest :

<script src="https://api.belvdr.com/sdk/latest/belvdr.min.js"></script>
<script>
  belvdr.init('pk_…', { apiHost: 'https://api.belvdr.com' })
  belvdr.startSession()
</script>

L’API ne sert que la version courante du SDK (et latest) : après une nouvelle version, l’ancienne adresse figée répond 404. Un site figé sur une version doit alors mettre son code à jour ; latest suit sans intervention. La source map est servie à côté du script (belvdr.min.js.map).

Démarrer après le consentement

init() ne fait que configurer le SDK : rien n’est écrit dans le navigateur (ni cookie, ni localStorage) et rien n’est enregistré avant startSession(). Appelle-la quand le visiteur a donné son consentement, puis à chaque chargement de page tant qu’il est valable :

<script>
  belvdr.init('pk_…', { apiHost: 'https://api.belvdr.com' })

  if (localStorage.getItem('consentement') === 'oui') belvdr.startSession()

  document.querySelector('#accepter').addEventListener('click', () => {
    localStorage.setItem('consentement', 'oui')
    belvdr.startSession()
  })
  document.querySelector('#refuser').addEventListener('click', () => {
    localStorage.removeItem('consentement')
    belvdr.stopSession() // arrête l'enregistrement dans tous les onglets
  })
</script>

Le stockage du consentement est celui de ton application (ici localStorage, à adapter à ton bandeau). Le détail de startSession() et stopSession() est dans Cycle de vie d’une session.

Options d’`init()`

init(publicKey, options) prend la clé publique du projet et un objet d’options :

Option	Par défaut	Effet
`apiHost`	—	Adresse de l’API publique : `https://api.belvdr.com`. Obligatoire.
`maskConsole`	`false`	Remplace les arguments des messages de console par `***` (Console).
`captureNetwork`	`true`	Enregistre les requêtes et les ressources de la page (Réseau).
`maskNetworkUrl`	—	Réécrit ou ignore l’URL d’une requête avant son enregistrement (Réseau).
`captureErrorBodies`	`false`	Enregistre les corps des requêtes en erreur (Réseau).
`maskNetworkBody`	—	Réécrit ou exclut un corps avant son enregistrement (Réseau).

Packages npm

import { init, startSession } from '@belvdr/browser'

init('pk_…', { apiHost: 'https://api.belvdr.com' })
startSession() // après le consentement