Vercel est un hébergeur : l'extrait de code FlowConsent ne se colle pas dans le tableau de bord Vercel, mais dans le <head> du framework que vous déployez (Next.js, Astro, React, site statique), puis vous redéployez. L'installation suit donc le guide de votre framework, en deux étapes. Les deux points propres à Vercel sont les outils de mesure maison (Vercel Web Analytics et Speed Insights) et les domaines de prévisualisation, qui ne sont pas l'endroit où vérifier l'installation.
Avant de commencer
- Un compte sur app.flowconsent.com (offre Free gratuite, sans carte bancaire, jusqu'à 25 000 sessions par mois).
- Une bannière créée puis déployée. Sur l'offre Free, le déploiement passe par votre compte Cloudflare (guide Cloudflare) ; sur Pro et Enterprise, il se fait en un clic.
- Le dépôt Git du projet relié à Vercel, ou la CLI Vercel.
Étape 1 : coller l'extrait de code dans le framework
Copiez l'extrait de code depuis Builder → Déploiement → Intégration (onglets HTML / No-code, Webflow, Next.js), puis suivez le guide de votre framework :
| Framework déployé | Où placer l'extrait de code | Guide |
|---|---|---|
| Next.js | app/layout.tsx ou pages/_document.tsx, plus le mode SPA | Next.js et SPA React |
| Astro | <head> du layout de base, avec is:inline | Installer sur Astro |
| React (Vite, CRA, React Router) | index.html, en haut du <head>, plus le mode SPA | Installer sur React |
| Site statique (HTML) | En haut du <head> de chaque page | Ci-dessous |
Pour un site HTML statique, l'extrait de code se place juste après l'ouverture de <head>, avant tout autre script :
<head>
<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>
<!-- vos autres balises viennent après -->
</head>Étape 2 : redéployer
Poussez la modification sur la branche de production (ou lancez vercel --prod). Vercel reconstruit le site et l'extrait de code est en ligne sur votre domaine de production. Si votre application utilise la navigation côté client (Next.js, React, Astro avec <ClientRouter />), vérifiez que le mode SPA est activé dans l'onglet Réglages du Builder.
Vercel Web Analytics et Speed Insights
Ces deux produits Vercel s'activent dans le tableau de bord du projet et s'intègrent au code via les paquets @vercel/analytics (composant <Analytics />) et @vercel/speed-insights. D'après la documentation officielle de Vercel :
- Web Analytics enregistre pour chaque page vue l'URL, le référent, des paramètres de requête filtrés, une géolocalisation (pays, région, ville), le système, le navigateur et le type d'appareil. Vercel indique ne pas utiliser de cookies tiers : le visiteur est identifié par un hachage calculé à partir de la requête, et la session est supprimée au bout de 24 heures. Les pages vues sont suivies aussi lors des navigations côté client.
- Speed Insights relève les Core Web Vitals de chaque chargement de page, avec la route, le type de réseau, le navigateur, l'appareil et le pays. Vercel décrit ces données comme anonymes et ne permettant pas de reconstituer une navigation ni d'identifier un utilisateur.
Les outils de suivi tiers (Google Analytics, Meta Pixel…) se déclarent quant à eux dans Builder → Services, jamais en dur dans le layout. Avec Google Tag Manager, l'extrait de code se place au-dessus du conteneur GTM (guide Google Consent Mode).
Domaines de prévisualisation
Chaque branche et chaque pull request obtiennent un déploiement de prévisualisation sur une URL générée en *.vercel.app. Deux particularités, documentées par Vercel, faussent les tests :
- Deployment Protection : lorsqu'elle est activée en mode Standard Protection, tous les déploiements sauf les domaines de production exigent une authentification. Un scan externe, comme le scan de refus FlowConsent, ne peut pas y accéder.
- Vercel Toolbar : elle est activée par défaut sur tous les déploiements de prévisualisation, et pas en production. Ce que vous observez en prévisualisation n'est donc pas exactement ce que voient vos visiteurs.
Vérifier l'installation
- Ouvrez le domaine de production en navigation privée : la bannière s'affiche.
- Dans l'onglet Réseau, aucune requête tierce ne part avant Accepter.
- Lancez l'assistant d'installation (Builder → Intégration) : chargeur présent avec le bon code de licence, stub Consent Mode présent et placé avant chaque tag Google.
- Terminez par un scan de refus depuis l'onglet Conformité (vérification de conformité).
Le faire depuis votre agent IA (MCP)
FlowConsent dispose d'un serveur MCP officiel, https://mcp.flowconsent.com, utilisable depuis Claude, ChatGPT ou tout client MCP, avec une connexion OAuth 2.0 à votre compte FlowConsent (pas de clé d'API). L'agent récupère l'extrait de code et les consignes de placement adaptées à votre framework (get_banner_snippet, get_setup_instructions), vérifie l'installation par un vrai scan (verify_consent_compliance) et peut poser une surveillance récurrente (monitor_compliance). Il ne modifie pas votre projet Vercel à votre place.
Donne-moi l'extrait de code de ma bannière pour mon site Next.js hébergé sur Vercel et vérifie qu'il est bien installé sur https://monsite.fr
En savoir plus : serveur MCP et FlowConsent pour les agents IA.
Questions fréquentes
Peut-on ajouter l'extrait de code depuis le tableau de bord Vercel ?
Non. Vercel déploie le code de votre dépôt : l'extrait de code se place dans les fichiers du framework, puis un nouveau déploiement le met en ligne.
La bannière n'apparaît pas sur mon URL de prévisualisation. Est-ce grave ?
Vérifiez d'abord que le déploiement contient bien la modification. Testez ensuite sur le domaine de production, qui est celui que voient vos visiteurs et celui que l'assistant d'installation contrôle.
Vercel Web Analytics est-il exempté de consentement ?
Vercel ne l'affirme pas. Sa documentation décrit une mesure sans cookies tiers et anonymisée, mais la décision vous revient : en cas de doute, ne le chargez qu'après consentement.
Faut-il activer le mode SPA sur Vercel ?
Cela dépend du framework, pas de Vercel : oui pour Next.js, React et Astro avec <ClientRouter />, non pour un site statique multipage.