Commencer gratuitementTableau de bord
Documentation

Installer le script

Cookiemark fonctionne avec une seule balise script. Cette page indique où placer cette balise, pourquoi sa position compte, et comment l’ajouter sur les plateformes les plus utilisées par nos clients.

Ajouter votre site et copier la ligne

  1. Connectez-vous et ouvrez Sites, puis Ajouter un site. Saisissez l’adresse utilisée par vos visiteurs, par exemple shop.example.com.
  2. Ouvrez le site. L’onglet Installation affiche la ligne propre à ce site, avec sa clé de site dans l’adresse.
  3. Collez la ligne dans votre site, comme décrit ci-dessous pour votre plateforme.
  4. Choisissez l’apparence et les textes, puis cliquez sur Publier. Le bandeau apparaît dès la page vue suivante.

La ligne ressemble à ceci, avec votre propre clé à la place de YOUR-SITE-KEY :

<script src="https://cdn.cookiemark.com/s/YOUR-SITE-KEY.js"></script>

Vous pouvez ajouter la ligne avant d’avoir publié quoi que ce soit. Tant que rien n’est publié, le script se charge, ne trouve rien et n’affiche rien. Vous pouvez donc l’installer aujourd’hui sur un site en ligne et terminer l’apparence demain.

Pourquoi la ligne doit figurer en premier dans le head

Le script fait deux choses qui doivent se produire avant l’exécution de tout autre script. Il indique à Google que rien n’est encore autorisé, et il commence à surveiller la page pour bloquer les traceurs concernés. Un script exécuté plus tôt a déjà fait son travail quand Cookiemark arrive.

Collez donc la ligne comme premier script dans le <head> de chaque page, au-dessus de Google Tag Manager, des outils d’analyse, des pixels et des widgets de chat.

<head>
  <meta charset="utf-8">
  <script src="https://cdn.cookiemark.com/s/YOUR-SITE-KEY.js"></script>
  <!-- Google Tag Manager, analytics and every other script come after this line -->
  ...
</head>

Laissez la balise telle quelle. N’ajoutez ni async ni defer : dans les deux cas, d’autres scripts s’exécuteraient avant. Le script est léger : environ 19 Ko après compression, plus vos propres réglages.

Tenir les outils d’optimisation à l’écart

Les outils qui retardent, diffèrent ou regroupent les scripts modifient l’ordre que vous avez défini. Excluez-en le script Cookiemark. Cherchez un réglage du type « exclure du report », « exclure de la concaténation » ou équivalent. Les plus courants sont WP Rocket, LiteSpeed Cache, Autoptimize et Cloudflare Rocket Loader.

Quand vous publiez une modification

Lorsque vous enregistrez dans le tableau de bord, votre modification reste un brouillon. Les visiteurs la voient une fois que vous avez cliqué sur Publier. Chaque publication crée une nouvelle version, et nous vidons au même moment le cache CDN de votre script. Les visiteurs reçoivent la nouvelle version en une minute environ, car les navigateurs conservent le script 60 secondes.

HTML classique

Collez la ligne juste après la balise d’ouverture <head>, sur chaque page. Si vos pages partagent un fichier d’en-tête ou un gabarit, collez-la une seule fois à cet endroit. Vérifiez ensuite quelques pages : les sites faits à la main ont souvent des pages qui utilisent un autre gabarit.

WordPress

Utilisez notre plugin. Il place le script tout en haut du head, le protège de WP Rocket, LiteSpeed, Autoptimize et Cloudflare Rocket Loader, vide le cache des pages quand vous enregistrez, et transmet le choix du visiteur aux plugins qui utilisent la WP Consent API.

  1. Téléchargez le plugin depuis l’onglet Installation de votre site dans Cookiemark.
  2. Dans WordPress, ouvrez Extensions, Ajouter une extension, Téléverser une extension, puis choisissez le fichier.
  3. Ouvrez Réglages, Cookiemark et cliquez sur Connect with Cookiemark.
  4. Connectez-vous à Cookiemark si on vous le demande, choisissez le site ou ajoutez-le comme nouveau site : vous revenez ensuite dans WordPress.
  5. Publiez le site dans Cookiemark. Le bandeau s’affiche alors sur toutes les pages.

La connexion ajoute aussi l’adresse WordPress aux domaines du site, et renseigne le chemin par lequel le plugin dépose le cookie de consentement depuis votre propre serveur, pour que Safari conserve le choix pendant toute sa durée. Si vous ne pouvez pas utiliser le bouton, collez plutôt la ligne de l’onglet Installation dans le champ Site key du plugin.

Vous préférez ne pas ajouter de plugin ? Ajoutez alors la ligne à la main :

  • Dans votre thème. Ouvrez le fichier header.php d’un thème enfant et collez la ligne juste après <head>, au-dessus de wp_head(). Modifiez bien un thème enfant : une mise à jour du thème écrase les modifications apportées au thème parent.
  • Avec un plugin. Un plugin qui insère du code dans le head fonctionne aussi. Donnez à l’extrait la priorité la plus élevée possible, pour qu’il se place au-dessus des scripts que les autres plugins ajoutent via wp_head().

Videz ensuite le cache des pages de votre plugin de cache, de votre hébergeur et de votre CDN. Sinon, les visiteurs continuent de recevoir les pages d’avant la modification. Excluez le script des plugins d’optimisation, comme décrit plus haut.

Shopify

  1. Dans l’administration Shopify, ouvrez Boutique en ligne, puis Thèmes.
  2. À côté de votre thème actuel, ouvrez le menu et choisissez Modifier le code.
  3. Ouvrez layout/theme.liquid et collez la ligne juste après <head>.
  4. Enregistrez, puis ouvrez votre boutique dans une fenêtre de navigation privée pour vérifier que le bandeau s’affiche.

Deux limites s’appliquent. La page de paiement de Shopify n’utilise pas votre thème : le script ne s’y exécute donc pas. Et Cookiemark ne transmet pas encore le choix du visiteur à la Customer Privacy API de Shopify.

Webflow

  1. Ouvrez votre projet et allez dans Site settings, puis Custom code.
  2. Collez la ligne tout en haut de Head code, au-dessus de tout le reste dans ce champ.
  3. Enregistrez, puis publiez le site depuis Webflow.

Webflow n’ajoute du code personnalisé à un site publié qu’avec un forfait de site payant. Si vous ajoutez aussi du code dans le head de certaines pages, vérifiez dans le code source que la ligne Cookiemark reste la première.

Wix

  1. Dans le tableau de bord de votre site, ouvrez Paramètres, puis Code personnalisé.
  2. Choisissez Ajouter un code personnalisé et collez la ligne.
  3. Appliquez-le à toutes les pages, placez-le dans le Head et réglez-le pour qu’il se charge sur chaque nouvelle page.

Pour le code personnalisé, Wix exige un forfait premium avec un domaine connecté. Wix charge aussi ses propres scripts avant les vôtres, et vous ne pouvez pas changer cet ordre. Cookiemark peut afficher le bandeau et bloquer les scripts que vous ajoutez, mais pas ce que Wix charge lui-même en premier. Désactivez le bandeau cookies de Wix, pour que les visiteurs n’en voient qu’un.

Squarespace

  1. Ouvrez Paramètres, puis Avancé ou Outils de développement, puis Injection de code.
  2. Collez la ligne tout en haut du champ En-tête et enregistrez.

L’injection de code n’est pas incluse dans toutes les offres Squarespace : vérifiez d’abord la vôtre. Désactivez le bandeau cookies proposé par Squarespace, pour que les visiteurs n’en voient pas deux.

Google Tag Manager

Ne chargez pas Cookiemark via Tag Manager. Une balise de votre conteneur s’exécute après le démarrage du conteneur, trop tard pour définir les valeurs de consentement par défaut de Google ou pour bloquer quoi que ce soit. Collez plutôt la ligne dans le head, et choisissez l’une de ces deux méthodes pour le conteneur lui-même.

  • Laisser Cookiemark charger le conteneur. Saisissez l’ID de votre conteneur dans l’onglet Google et GTM et supprimez votre propre extrait Tag Manager. Cookiemark charge alors le conteneur juste après les valeurs de consentement par défaut : l’ordre est forcément le bon.
  • Garder votre propre extrait. Laissez l’ID du conteneur vide et gardez votre extrait sous la ligne Cookiemark.

Ne faites jamais les deux. Un conteneur chargé deux fois déclenche chaque balise deux fois. La page Google Tag Manager décrit les déclencheurs et les événements de votre conteneur.

Vérifier que tout fonctionne

  1. Ouvrez votre site dans une fenêtre de navigation privée, pour partir sans choix enregistré. Le bandeau doit s’afficher.
  2. Affichez le code source de la page et cherchez cdn.cookiemark.com. Ce doit être le premier script du head.
  3. Lancez une analyse depuis l’onglet Analyse. Elle signale les pages sans le script et un cache qui sert encore une ancienne copie de vos pages.

Quand une analyse trouve votre script sur le site, le domaine reçoit le libellé Vérifié. Les analyses planifiées ne s’exécutent que pour les sites dont le domaine est vérifié.

Plusieurs domaines

Le journal des consentements n’accepte que les choix provenant des domaines de votre site et de leurs sous-domaines. Si le même bandeau est utilisé sur un autre domaine, ajoutez-le dans Paramètres, Domaines. Pour mémoriser un seul choix sur tous les sous-domaines, saisissez votre domaine principal sous Partager le choix entre les sous-domaines, dans le même onglet.