Aller au contenu

Langue

Menu de la documentation

Démarrage rapide

Installez Cookiesh en quelques minutes avec du HTML, Next.js ou Google Tag Manager, puis vérifiez que les scripts tiers restent bloqués jusqu'au consentement des visiteurs.

Dernière mise à jour le 29 octobre 2026

Cookiesh s’exécute à partir d’une seule balise script. Chargez-la avant toute autre balise de la page, associez une catégorie aux scripts qui nécessitent un consentement, et Cookiesh affiche le bon bandeau selon la région de chaque visiteur, bloque ces scripts tant que le visiteur n’a pas donné son accord et enregistre son choix. La plupart des sites sont en ligne en moins de cinq minutes.

Avant de commencer

Il vous faut un compte Cookiesh et un site. Dans le tableau de bord, ouvrez Domains → Add domain, saisissez votre domaine et copiez le Site ID. Il ressemble à ck_live_8f2a91.

Cookiesh classe tout dans quatre catégories de consentement :

Catégorie Par défaut Usage typique
necessary Toujours activée Sessions, sécurité, répartition de charge, cookie de consentement lui-même
preferences Désactivée Langue, thème et autres réglages mémorisés
analytics Désactivée Mesure d’audience et analyse de produit
marketing Désactivée Publicité, reciblage et pixels de réseaux sociaux

Lancez votre premier scan des cookies depuis le tableau de bord avant la mise en ligne. Cookiesh sait alors quels scripts et cookies relèvent de quelle catégorie et peut pré-remplir votre bandeau.

Installer avec HTML

Ajoutez le chargeur comme premier script de <head>, afin qu’il s’exécute avant tout ce qui dépose des cookies :

<head>
  <script
    src="https://sdk.cookiesh.eu/v1/cookiesh.js"
    data-site-id="ck_live_8f2a91"
    async
  ></script>
  <!-- autres balises ci-dessous -->
</head>

Ensuite, remplacez type="text/javascript" par type="text/plain" sur tout script qui nécessite un consentement, et ajoutez une catégorie data-cookiesh. Cookiesh rétablit le type et exécute le script dès que le visiteur autorise cette catégorie :

<script
  type="text/plain"
  data-cookiesh="analytics"
  src="https://analytics.example.com/script.js"
></script>

<script type="text/plain" data-cookiesh="marketing">
  // Les scripts inline fonctionnent de la même manière.
  initAdPixel();
</script>

Les iframes, comme les vidéos et les cartes intégrées, peuvent aussi être bloquées. Utilisez data-cookiesh-src à la place de src et Cookiesh les charge après le consentement.

Installer avec Next.js

Installez le SDK React :

npm install @cookiesh/react

Chargez le script dans votre layout racine avec la stratégie beforeInteractive, pour qu’il s’exécute avant les autres scripts, et enveloppez l’application dans CookieshProvider :

// app/layout.tsx
import Script from 'next/script';
import { CookieshProvider } from '@cookiesh/react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Script
          src="https://sdk.cookiesh.eu/v1/cookiesh.js"
          data-site-id={process.env.NEXT_PUBLIC_COOKIESH_SITE_ID}
          strategy="beforeInteractive"
        />
        <CookieshProvider>{children}</CookieshProvider>
      </body>
    </html>
  );
}

N’affichez le code dépendant du consentement que lorsque la catégorie est autorisée. useConsent() provoque un nouveau rendu chaque fois que le visiteur modifie son choix :

// app/analytics.tsx
'use client';

import Script from 'next/script';
import { useConsent } from '@cookiesh/react';

export function Analytics() {
  const { analytics } = useConsent();
  if (!analytics) return null;

  return <Script src="https://analytics.example.com/script.js" strategy="afterInteractive" />;
}

Pour les produits avec espace connecté, transmettez userId à CookieshProvider afin de synchroniser le choix du visiteur sur tous ses appareils.

Installer avec Google Tag Manager

Le modèle communautaire de Cookiesh définit les valeurs par défaut de Google Consent Mode v2 avant le déclenchement de toute balise, puis les met à jour lorsque le visiteur fait son choix.

  1. Dans votre conteneur GTM, ouvrez Templates → Tag templates → Search gallery et ajoutez Cookiesh CMP.
  2. Créez une nouvelle balise à partir du modèle et collez votre Site ID.
  3. Définissez le déclencheur sur Consent Initialization – All Pages.
  4. Choisissez un état de consentement par défaut pour chaque région. Utilisez denied pour l’EEE, le Royaume-Uni et la Suisse.
  5. Pour chaque balise Google, ouvrez Advanced settings → Consent settings. Laissez les vérifications de consentement intégrées activées et exigez un consentement supplémentaire pour les balises non Google.
  6. Publiez le conteneur.

Si vous chargez gtag.js sans GTM, définissez vous-même les valeurs par défaut, avant la balise Google :

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }

  gtag('consent', 'default', {
    ad_storage: 'denied',
    ad_user_data: 'denied',
    ad_personalization: 'denied',
    analytics_storage: 'denied',
    wait_for_update: 500,
  });
</script>

Cookiesh envoie l’appel gtag('consent', 'update', …) correspondant dès que le visiteur fait un choix, puis à chaque page vue ultérieure.

Vérifier votre installation

  1. Ouvrez votre site dans une fenêtre de navigation privée. Le bandeau doit s’afficher, et les outils de développement du navigateur ne doivent encore montrer aucun cookie d’analyse ni de marketing.
  2. Exécutez Cookiesh.debug() dans la console. Elle liste la région détectée, le bandeau actif, chaque script bloqué et l’état actuel du consentement.
  3. Acceptez uniquement les cookies d’analyse, puis rechargez la page. Les scripts d’analyse s’exécutent, mais les scripts marketing restent bloqués.
  4. Dans Google Tag Assistant, vérifiez que l’onglet Consent affiche les événements par défaut et de mise à jour dans le bon ordre.

Étapes suivantes