Documentation de FitConsent

Sur cette page

Introduction
Installation et configuration
Configuration de votre bannière
Déclaration de stockage
Utilisation avancée

Trouvez tout ce dont vous avez besoin pour démarrer avec FitConsent, de l’installation à l’utilisation avancée.

Introduction

Bienvenue dans la documentation de FitConsent.

Qu’est-ce qu’une Plateforme de Gestion du Consentement (CMP) ?

Une CMP est un outil qui aide les sites web à collecter et à gérer légalement le consentement des utilisateurs pour le traitement des données, ce qui est une exigence des lois sur la confidentialité comme le RGPD en Europe et le CCPA en Californie. C’est la technologie qui alimente les ‘bannières de cookies’ que vous voyez sur de nombreux sites web.

FitConsent va au-delà d’une simple bannière. Il vous fournit les outils pour non seulement vous conformer à la loi, mais aussi pour optimiser l’expérience utilisateur afin de renforcer la confiance et d’améliorer les taux de consentement. Notre service inclut une prise en charge complète et automatique du mode de consentement V2 de Google et du mode de consentement UET de Microsoft, garantissant que vos balises d’analyse et de marketing ajustent leur comportement en fonction du consentement de l’utilisateur, ce qui est crucial pour le marketing axé sur les données dans un monde où la confidentialité est une priorité.

Installation et configuration

L’intégration de FitConsent est conçue pour être rapide et simple. Il vous suffit d’ajouter un seul extrait de script à la section de votre site web. Ce script gère tout, de l’affichage de la bannière à la gestion des paramètres par défaut du mode de consentement de Google et Microsoft.

Prérequis important : Mode de consentement

Notre script configure automatiquement les paramètres par défaut nécessaires pour le mode de consentement v2 de Google et le mode de consentement UET de Microsoft. C’est crucial pour que des services comme Google Analytics et Microsoft Advertising fonctionnent de manière conforme au consentement de l’utilisateur. Assurez-vous que ce script est placé le plus haut possible dans la balise de votre site web, avant tout autre script susceptible d’utiliser des cookies.

Intégration directe

Pour une installation directe, copiez l’extrait de code ci-dessous et collez-le dans la section <head> du HTML de votre site web. Il est crucial de le placer aussi haut que possible, avant tout autre script susceptible de définir des cookies (comme Google Analytics ou Microsoft UET).

<!-- Script de bannière FitConsent -->
<script>
  // Définissez dataLayer et l'assistant gtag.
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  // Initialiser la file d'attente Microsoft UET
  window.uetq = window.uetq || [];

  // Définissez les états de consentement par défaut pour Google et Microsoft.
  // Cela DOIT être exécuté avant tout autre script utilisant des cookies.
  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'analytics_storage': 'denied'
  });
  
  window.uetq.push('consent', 'default', {
    'ad_storage': 'denied'
  });
</script>

<!-- Chargez vos autres scripts (par exemple, Google Analytics, Microsoft UET) ici -->
<!-- ... -->

<!-- Charger la bannière FitConsent pour mettre à jour le consentement en fonction de l'interaction de l'utilisateur -->

<script async defer src="https://app.fitconsent.com/api/banner?websiteId=YOUR_WEBSITE_ID"></script>
<!-- End FitConsent Banner Script -->

Google Tag Manager (Recommandé)

L’utilisation de notre modèle de communauté Google Tag Manager (GTM) est la méthode recommandée pour installer FitConsent. Il gère correctement le mode de consentement v2 de Google et garantit que les balises se déclenchent en fonction du consentement de l’utilisateur.

Étape 1 : Activer l’aperçu du consentement (configuration unique)

1. Dans votre espace de travail GTM, cliquez sur l’onglet « Admin ».
2. Sous la colonne « Conteneur », cliquez sur « Paramètres du conteneur ».
3. Dans la section « Paramètres supplémentaires », cochez la case « Activer l’aperçu du consentement ».
4. Cliquez sur « Enregistrer » dans le coin supérieur droit.

Étape 2 : Ajouter le modèle FitConsent

1. Allez dans la section « Modèles » dans la barre latérale gauche.
2. Dans la boîte « Modèles de balises », cliquez sur « Rechercher dans la galerie ».
3. Recherchez « FitConsent » et cliquez sur « Ajouter à l’espace de travail ».
4. Confirmez les autorisations pour ajouter le modèle.

Étape 3 : Créer une balise « Google Consent Default »

1. Allez dans « Balises » et cliquez sur « Nouvelle ».
2. Nommez la balise « FitConsent – Consentement par défaut ».
3. Cliquez sur « Configuration de la balise » et choisissez « FitConsent » dans la liste.
4. Dans le menu déroulant « Type de balise », sélectionnez « Google Consent Default ». Cela définira les paramètres par défaut pour Google et Microsoft.
5. Dans le champ « FitConsent Website ID », collez votre ID de site web unique depuis votre tableau de bord.
6. Pour le déclencheur, sélectionnez l’option intégrée « Initialisation du consentement – Toutes les pages ». C’est crucial.
7. Enregistrez la balise.

Étape 4 : Créer la balise « FitConsent Banner Loader »

1. Créez une autre balise « Nouvelle ». Nommez-la « FitConsent – Chargement de la bannière ».
2. Cliquez sur « Configuration de la balise » et choisissez à nouveau « FitConsent ».
3. Le « Type de balise » devrait être par défaut « FitConsent Banner Loader ».
4. Dans le champ « FitConsent Website ID », collez votre ID de site web unique depuis votre tableau de bord.
5. Pour le déclencheur, sélectionnez également « Initialisation du consentement – Toutes les pages ».
6. Enregistrez la balise.

Étape 5 : Configurer votre balise Google

La dernière étape consiste à s’assurer que votre balise Google principale (qui envoie des données à Google Analytics) se déclenche correctement en fonction du consentement de l’utilisateur.

A) Si vous avez déjà une balise Google (par exemple, « G-XXXXXXXXXX ») dans votre conteneur :

1. Cliquez sur votre balise Google pour la modifier.
2. Allez dans « Paramètres avancés » > « Paramètres de consentement ».
3. Assurez-vous que « Aucun consentement supplémentaire requis » est sélectionné. Le modèle FitConsent gère les signaux de consentement pour vous.
4. Enregistrez les modifications de votre balise.

B) Si vous n’avez PAS encore de balise Google :

1. Cliquez sur « Balises » > « Nouvelle ».
2. Nommez la balise « Google Tag – GA4 » ou similaire.
3. Pour « Configuration de la balise », choisissez « Balise Google ».
4. Saisissez votre ID de mesure GA4 dans le champ « ID de balise » (par exemple, « G-XXXXXXXXXX »).
5. Pour « Déclenchement », sélectionnez « Initialisation – Toutes les pages ».
6. Allez dans « Paramètres avancés » > « Paramètres de consentement » et assurez-vous que « Aucun consentement supplémentaire requis » est sélectionné.
7. Enregistrez la balise.

Étape 6 : Gérer les autres scripts (par exemple, Microsoft Clarity, Facebook Pixel)

L’intégration de FitConsent avec le mode de consentement de Google vous permet de gérer n’importe quel script tiers via GTM. Voici comment vous pourriez configurer une balise comme Microsoft Clarity :

1. Ajouter la balise : Ajoutez votre balise tierce à GTM (soit via un modèle de communauté, soit en tant que balise HTML personnalisée).
2. Configurer les paramètres de consentement : Modifiez la balise, allez dans « Paramètres avancés » > « Paramètres de consentement ».
3. Ajouter une vérification de consentement : Sélectionnez « Exiger un consentement supplémentaire pour que la balise se déclenche ». Un tableau apparaîtra.
4. Choisir le type de consentement : Cliquez sur « Ajouter un consentement requis » et sélectionnez le type de consentement approprié. Pour un outil d’analyse comme Clarity, vous choisiriez analytics_storage. Pour un script de marketing comme un Facebook Pixel ou une balise Microsoft UET, vous pourriez ajouter à la fois ad_storage et analytics_storage.
5. Définir le déclencheur : Définissez le déclencheur de la balise pour qu’elle se déclenche sur votre événement de vue de page standard (par exemple, « Initialisation – Toutes les pages » ou un événement « Vue de page » personnalisé).

Maintenant, GTM vérifiera automatiquement l’état du consentement fourni par FitConsent. La balise Microsoft Clarity ne se déclenchera qu’après que l’utilisateur aura accepté la catégorie « Analyse » sur votre bannière de consentement, et une balise UET ne se déclenchera que si « Marketing » est accepté.

Enfin, cliquez sur « Soumettre » et « Publier » votre conteneur GTM pour rendre les modifications effectives.

Plugin WordPress FitConsent CMP

S’intègre à FitConsent avec WordPress et l’API de consentement WP pour une compatibilité transparente avec Google Site Kit.

Télécharger depuis WordPress.org

FitConsent est une Plateforme de Gestion du Consentement (CMP) puissante mais simple, conçue pour vous aider à vous conformer aux réglementations en matière de confidentialité comme le RGPD et le CCPA. Ce plugin facilite grandement l’ajout de la bannière FitConsent sur votre site WordPress. Plus important encore, il offre une compatibilité automatique et prête à l’emploi avec l’API de consentement WP, qui est la norme utilisée par Google Site Kit.

En utilisant ce plugin, vous pouvez activer la fonctionnalité de mode de consentement de Google Site Kit et être certain que les choix de consentement de vos utilisateurs sont respectés, ce qui permet des analyses et un suivi publicitaire conformes et efficaces.

Fonctionnalités clés

Configuration simple : Entrez simplement votre ID de site web FitConsent et le plugin s’occupe du reste.
Prêt pour Google Site Kit : Fonctionne de manière transparente avec le mode de consentement de Google Site Kit en s’intégrant à l’API de consentement WP.
Léger : Le plugin est épuré et n’ajoute aucune surcharge à votre site web.
Communication standardisée : Garantit que les signaux de consentement sont transmis correctement entre votre bannière de consentement et les autres plugins.

Guide d’installation

Méthode 1 : Installation via le tableau de bord WordPress

Connectez-vous à votre tableau de bord WordPress.
Naviguez vers Extensions > Ajouter.
Dans la barre de recherche, tapez « FitConsent CMP » et appuyez sur Entrée.
Trouvez le plugin « FitConsent CMP » dans les résultats de recherche et cliquez sur Installer maintenant.
Après l’installation, cliquez sur Activer.

Méthode 2 : Installation manuelle via FTP

Téléchargez le plugin FitConsent CMP depuis la source officielle.
Décompressez le fichier téléchargé pour extraire le dossier fitconsent-cmp.
Connectez-vous au serveur de votre site web à l’aide d’un client FTP (par exemple, FileZilla).
Naviguez jusqu’au répertoire /wp-content/plugins/.
Téléchargez le dossier fitconsent-cmp complet dans ce répertoire.
Retournez à votre tableau de bord WordPress, naviguez vers Extensions > Extensions installées, et cliquez sur Activer pour « FitConsent CMP ».

Configuration après l’installation

Dans votre tableau de bord WordPress, allez dans Réglages > FitConsent.
Trouvez votre ID de site web FitConsent dans votre tableau de bord FitConsent.
Entrez cet ID dans le champ prévu à cet effet et cliquez sur Enregistrer les modifications.

Intégration avec Google Site Kit (le cas échéant)

Si vous utilisez le plugin Google Site Kit, accédez à ses réglages.
Assurez-vous que l’option Mode de consentement est activée.

Autres plateformes (CMS)

Vous pouvez utiliser FitConsent avec n’importe quel site web ou système de gestion de contenu (CMS) comme WordPress ou Shopify qui vous permet d’ajouter du code HTML ou JavaScript personnalisé. Nous vous recommandons vivement d’utiliser leur intégration Google Tag Manager si elle est disponible et de suivre les instructions GTM ci-dessus. Sinon, vous pouvez utiliser la méthode « Intégration directe ».

Configuration de votre bannière

Personnalisez l’apparence, le contenu et le comportement de la bannière depuis votre tableau de bord.

Paramètres généraux

Cadre : Choisissez la principale réglementation de confidentialité à laquelle vous devez vous conformer (par exemple, RGPD, CCPA, IAB TCF 2.2). Ce choix ajuste le comportement par défaut de la bannière et les options disponibles pour s’aligner sur les exigences de ce cadre.

Ciblage géographique (Premium) : Choisissez d’afficher la bannière uniquement aux visiteurs de régions spécifiques, comme l’UE.

Mise en page : Sélectionnez entre une bannière flottante (à différentes positions de l’écran) ou un dialogue centré qui se superpose à votre contenu.

Apparence

Personnalisez les couleurs, les polices et l’élévation (ombres) pour qu’ils correspondent parfaitement à l’apparence et à la convivialité de votre marque.

Logo et image d’arrière-plan : Vous pouvez également ajouter le logo de votre entreprise ou même une image d’arrière-plan à la bannière pour une expérience entièrement personnalisée.

Contenu et langues

Modifiez tout le texte de la bannière et du modal de préférences. FitConsent prend en charge plusieurs langues, vous permettant d’offrir une expérience native à tous vos utilisateurs. Le Markdown de base est pris en charge dans les champs de texte principaux.

Optimisation basée sur l’IA

Utilisez notre optimiseur basé sur l’IA pour obtenir des suggestions de couleurs, de texte et de mises en page qui ont fait leurs preuves pour augmenter les taux de consentement en fonction du contenu de votre site web et de votre public cible.

FitConsent peut afficher une liste détaillée et à mise à jour automatique des cookies et autres éléments de stockage que votre site utilise. Ceci est souvent inclus sur une page de politique de confidentialité pour offrir une transparence totale à vos utilisateurs.

Intégration de la déclaration

Pour afficher la déclaration de cookies, vous devez ajouter un simple élément <div> à votre page là où vous souhaitez que le tableau apparaisse, puis inclure notre script de déclaration. Vous pouvez trouver l’extrait de code exact pour votre site web dans l’onglet ‘Déclaration de cookies’ de la page de configuration de votre site web.

Sites web HTML standard

Pour les sites web HTML standard, ou les sites web construits avec des CMS comme WordPress (sans frontend React headless), vous pouvez ajouter l’extrait suivant directement dans le HTML de votre page.

Le script trouvera automatiquement la <div> avec l’ID fitconsent-declaration et y injectera le tableau de cookies.

<div id="fitconsent-declaration"></div>
<script async defer src="https://fitconsent.com/api/declaration.js"></script>

Sites web React & Next JS

Pour éviter les « erreurs d’hydratation » dans les frameworks basés sur React comme Next.js, il est crucial que le script de déclaration ne modifie pas la page avant que React n’ait terminé son rendu initial côté client.

La manière recommandée d’y parvenir est de créer un composant côté client dédié qui charge le script à l’aide d’un hook useEffect.

Créer un composant client

Créez un nouveau fichier de composant, par exemple StorageDeclarationEmbed.tsx. Assurez-vous d’inclure la directive "use client"; en haut.

'use client';

import { useEffect } from 'react';

type StorageDeclarationEmbedProps = {
  websiteId: string;
};

export function StorageDeclarationEmbed({ websiteId }: StorageDeclarationEmbedProps) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = https://app.fitconsent.com/api/declaration.js?websiteId=${websiteId};
    script.async = true;
    script.defer = true;

    const container = document.getElementById('fitconsent-declaration');
    if (container) {
      container.appendChild(script);
    }

    return () => {
      // Clean up the script when the component unmounts
      if (container && container.contains(script)) {
        container.removeChild(script);
      }
    };
  }, [websiteId]);

  return <div id="fitconsent-declaration"></div>;
}

2. Utiliser le composant sur votre page

Maintenant, vous pouvez importer et utiliser ce composant sur n’importe quelle page, comme votre page de politique de confidentialité.

import { StorageDeclarationEmbed } from '@/components/StorageDeclarationEmbed'; // Adjust the import path

export default function PrivacyPolicyPage() {
  return (
    <div>
      <h1>Politique de confidentialité</h1>
      {/* ... other content ... */}

      <h3>Déclaration de stockage</h3>
      <p>
        Pour une transparence totale, voici une liste des cookies et
        autres éléments de stockage que notre service peut placer sur votre navigateur.
      </p>
      <StorageDeclarationEmbed websiteId="YOUR_WEBSITE_ID" />

      {/* ... other content ... */}
    </div>
  );
}

Cette approche garantit que le script est chargé et exécuté en toute sécurité côté client, évitant ainsi tout conflit avec le cycle de vie du rendu de React.

Utilisation avancée

Utiliser les données de consentement et comprendre le comportement de la bannière.

Utiliser les données de consentement sur votre site web

Après qu’un utilisateur a interagi avec la bannière, FitConsent stocke ses choix et ses données de géolocalisation dans un cookie nommé fitconsent_given. Vous pouvez lire ce cookie côté client ou côté serveur pour adapter l’expérience utilisateur.

Structure du cookie

Le cookie contient un objet JSON avec deux clés principales : choices et geo.

choices : Un objet où les clés sont les catégories de consentement (par exemple, marketing, analytics) et les valeurs sont true ou false.

geo : Un objet contenant les informations géographiques de l’utilisateur (par exemple, code de pays, état) au moment du consentement.

{
  "choices": {
    "marketing": true,
    "analytics": true
  },
  "geo": {
    "country": "US",
    "state": "CA"
  }
}

Exemple : Afficher un composant en fonction du consentement

Voici comment vous pourriez afficher une bannière promotionnelle spéciale uniquement aux utilisateurs de Californie qui ont consenti aux cookies de marketing.

import { useState, useEffect } from 'react';

function PromotedFeatures() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    const cookie = document.cookie
      .split('; ')
      .find(row => row.startsWith('fitconsent_given='));

    if (cookie) {
      try {
        const consent = JSON.parse(decodeURIComponent(cookie.split('=')[1]));
        // Example: Check if the user is in California and consented to marketing
        if (consent?.geo?.state === 'California' && consent?.choices?.marketing) {
          setShow(true);
        }
      } catch (e) {
        console.error('Error parsing FitConsent cookie', e);
      }
    }
  }, []);

  if (!show) {
    return null;
  }

  return (
    // Your component for users who consented to marketing
    <div>Special Promotion for California!</div>
  );
}

Détection automatique de la langue

La bannière FitConsent détecte automatiquement la langue préférée de l’utilisateur et affiche la traduction appropriée si vous en avez fourni une. Ce processus suit un ordre de priorité spécifique :

1. Il vérifie d’abord l’attribut lang sur la balise html de votre site web (par exemple, <html lang= »fr »>). C’est la méthode la plus fiable.
2. Si l’attribut lang n’est pas présent, il utilisera les paramètres de langue du navigateur de l’utilisateur (navigator.language).
3. Si aucune des méthodes ci-dessus ne correspond aux langues que vous avez configurées, il reviendra à l’anglais (en) ou à la première langue de votre liste sélectionnée.

Meilleure pratique

Pour de meilleurs résultats sur les sites multilingues, assurez-vous que la balise <html> de votre page reflète correctement la langue actuelle affichée à l’utilisateur.