L'assistant d'installation se trouve dans l'onglet Deployment de l'éditeur (Builder), une fois votre bannière déployée. Il fait plus que vous tendre un extrait de code : 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 l'extrait de code pour votre plateforme
La carte d'intégration propose l'extrait de code 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 (petit script en ligne) qui enregistre des valeurs par défaut
deniedpour tous les signaux Google. - Le chargeur FlowConsent qui affiche la bannière et applique le choix du visiteur.
<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 l'extrait de code 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 configuration 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.tsxutilisant<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 de 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 complet, les suggestions de pages et l'historique des scans se trouvent 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 réactivé dans l'outil de création du site). 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, synchronisation CRM, mesure d'audience maison. L'assistant couvre aussi ce parcours.
Lire le contrat de consentement avec le SDK serveur
L'assistant génère un extrait de code 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 :
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 une URL de réception (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é à cette URL et affiche le résultat : livraison réussie, 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.