Assistant d'installation : une installation vérifiée, étape par étape

L'assistant d'installation vit dans l'onglet Deployment du Builder, une fois votre bannière déployée. Il fait plus que vous tendre un snippet : chaque étape est vérifiée sur votre site réel. L'assistant ne dit pas « collez ce code » — il va chercher votre page et constate que c'est fait, puis prouve que la bannière est respectée par un scan de refus, et se termine sur la surveillance continue plutôt que sur un « c'est fini ».

Étape 1 — Ajouter le snippet pour votre plateforme

La carte d'intégration propose le snippet en trois déclinaisons : HTML / No-code, Webflow et Next.js. Toutes contiennent les deux mêmes parties, dans cet ordre :

Un stub Consent Mode inline qui enregistre des valeurs par défaut denied pour tous les signaux Google.
Le chargeur FlowConsent qui affiche la bannière et applique le choix du visiteur.

index.html

html

<script>
// FlowConsent Loader - PLACER AVANT tout autre script dans le <head>
window.dataLayer=window.dataLayer||[];
function gtag(){dataLayer.push(arguments);}
gtag('consent','default',{
  'ad_storage':'denied',
  'analytics_storage':'denied',
  'ad_user_data':'denied',
  'ad_personalization':'denied',
  'wait_for_update':500
});
gtag('set','url_passthrough',true);
gtag('set','ads_data_redaction',true);
</script>
<!-- FlowConsent CMP -->
<script src="https://VOTRE-CODE-LICENCE.consent.flowconsent.com/cookie-manager.js?code=VOTRE_CODE_LICENCE"></script>

Les spécificités par plateforme, telles qu'affichées dans l'assistant :

Webflow — collez le snippet dans Site settings → Custom code → Head code, puis publiez. Retirez tout Measurement ID Google Analytics de Site settings → Apps & Integrations : Webflow l'injecte au-dessus de votre code personnalisé, sa config gtag s'exécuterait donc avant les valeurs par défaut de consentement et aucune CMP ne pourrait la contrôler.
Next.js — l'assistant génère une version app/layout.tsx utilisant <Script strategy="beforeInteractive"> pour le stub et le chargeur. Pour la navigation côté client, activez aussi le mode SPA dans l'onglet Settings — voir le guide d'intégration Next.js.

Étape 2 — Vérifier votre installation

Saisissez l'URL de votre page et cliquez sur Vérifier. FlowConsent va chercher la page depuis ses serveurs et contrôle, dans le HTML réel :

la page est joignable (avec le statut HTTP sinon) ;
le chargeur FlowConsent est présent avec votre code licence — si un chargeur est trouvé avec un code différent, l'assistant vous dit lequel ;
le stub Consent Mode est présent — s'il manque, vous n'avez probablement collé que le second bloc <script> ;
si un tag Google est sur la page, le stub s'exécute avant lui — sinon ses cookies ne peuvent pas être contrôlés, et l'assistant affiche l'URL du tag fautif.

Étape 3 — Lancer un scan de refus

Une bannière installée ne prouve rien en soi : ce qui compte, c'est ce qui s'exécute quand un visiteur refuse. Cette étape charge votre page dans un vrai navigateur avec le consentement refusé et liste tout ce qui part quand même. Elle utilise le profil rapide — un verdict en 30 à 60 secondes environ — et affiche le même badge de verdict que la page Conformité (Conforme, Avertissements ou Violations), plus le nombre de violations.

L'audit exhaustif, les suggestions de pages et l'historique des scans vivent sur la page Conformité.

Étape 4 — Activer la surveillance hebdomadaire

La dernière étape ne clôt pas l'installation — elle la maintient prouvée. Cliquez sur Surveiller cette page chaque semaine : le même scan de refus se relance chaque semaine et vous alerte en cas de régression (un tag ajouté par une équipe marketing, un réglage de site builder réactivé). Dès qu'un moniteur existe pour la page, l'assistant l'affiche comme actif.

Côté serveur (optionnel)

La moitié des traitements soumis au consentement se joue côté serveur — GA4 Measurement Protocol, synchro CRM, analytics maison. L'assistant couvre aussi ce parcours.

Lire le contrat de consentement avec le SDK serveur

L'assistant génère un snippet readConsent() avec le configHash courant de votre bannière déjà injecté. Un consentement donné avant une modification de la bannière est invalide — le hash amène votre serveur à le traiter comme nécessitant un re-consentement :

handler.js

import { readConsent } from '@flowconsent/server-sdk'
 
export async function handler(request) {
  const consent = readConsent(request, {
    // Hash de la config publiée : un choix antérieur à un
    // changement de bannière est invalide (re-consentement).
    expectedConfigHash: 'VOTRE_CONFIG_HASH_COURANT',
  })
  if (consent.can('analytics')) {
    // GA4 Measurement Protocol, analytics maison…
  }
  if (consent.can('marketing')) {
    // synchro CRM, audiences…
  }
}

Voir le guide du SDK serveur pour l'API complète.

Webhook de consentement, testé par un vrai événement signé

Ajoutez l'URL d'un endpoint et l'assistant crée un webhook de consentement avec un secret de signature au format whsec_….

Cliquez ensuite sur Envoyer un test signé : FlowConsent livre un véritable événement consent.test signé à votre endpoint et rend le constat — livré, avec le statut HTTP et le temps de réponse, ou le détail de l'échec. Votre intégration est confirmée par une livraison réelle, pas par une coche verte sur parole.