Cet article vous guidera à travers l'intégration de Didomi avec Google Tag Manager (GTM) pour configurer le chargement des tags sur votre site web lorsque l'utilisateur donne son consentement.
Introduction : événements et variables envoyés dans le Data layer
L'intégration GTM permet au SDK Didomi d'envoyer des événements. Ces événements peuvent générer des variables dans le Data Layer GTM.
- Événements Didomi
didomi-consent : lorsque la page est chargée et lorsqu'il y a un changement de consentement
didomi-ready : lorsque la page est chargée
didomi-consent-changed : lorsqu'il y a un changement de consentement
Nous vous recommandons d'utiliser l'événement didomi-consent, car il inclut les autres et est généralement le plus adapté.
Vous pouvez trouver ces événements dans notre 📰 documentation technique.
- Variables Didomi
Les événements Didomi généreront des variables Didomi dans le Data Layer GTM.
Les variables Didomi incluent les informations suivantes :
Vendors (variables associées : consent given/ consent denied/ consent unknown)
Purposes (variables associées : consent given/ consent denied/ consent unknown)
Vendors et Purposes (variables associées : consent given/ consent denied/ consent unknown)
Consent string IAB TCF / GDPR (si le RGPD s'applique)
Vous pouvez trouver les variables 📰 ici.
L'objectif ici est d'utiliser ces événements et variables dans les déclencheurs que vous créez, afin d'activer le chargement des tags uniquement si l'utilisateur a donné son consentement. Un déclencheur est activé en fonction de l'événement et de la variable.
Intégration
Pour commencer, vous devez activer l'intégration GTM lorsque vous configurez votre notice de consentement.- Accédez à Consent notices (1) et cliquez sur Edit
- Allez à l'étape 2. Customization (2) et sélectionnez l'onglet Integrations (3).
- Assurez-vous d'être dans la section Tag Manager (4)
- Faites défiler vers le bas pour sélectionner l'intégration de Google Tag Manager.
- Dans le champ "Data Layer Name", écrivez le nom de votre data layer.
- Par défaut, le nom standard "dataLayer" est utilisé.
- Si vous conservez le nom standard, vous pouvez laisser le champ tel quel.
- Si vous avez choisi un nouveau nom, vous pouvez le trouver dans le code de votre site web (demandez à votre équipe technique).
- Si vous n'avez pas utilisé la Console pour créer votre notice de consentement, ajoutez ceci dans l'objet "didomiConfig" :
tagManager: {
provider: 'gtm'
} - N'ajoutez pas ce code si vous avez coché la case dans la console.
Créez une variable
- Accédez à votre compte Google Tag Manager.
👉 Commençons par créer une variable "didomiVendorsEnabled" (c'est-à-dire la variable la plus couramment utilisée). Cela vous permettra de configurer le chargement des tags lorsque l'utilisateur donne son consentement pour chaque vendor. - Cliquez sur Folders dans le menu de gauche.
- Cliquez sur New Folder.
- Nommez votre dossier "Didomi"
- Cliquez sur les trois points à gauche du fichier Didomi.
- Cliquez sur Add a variable.
- Entrez cette information:
Nom : Didomi Vendors Enabled (au lieu de "variable without title")
Type de variable : Data layer Variable (utilisez l'icône du crayon pour ouvrir le menu de choix).
Nom de la variable du data layer : didomiVendorsEnabled
Création des déclencheurs (Triggers)
Maintenant, vous allez créer des déclencheurs et les connecter à l'un des événements Didomi (nous vous recommandons d'utiliser didomi-consent) et à la variable "Didomi Vendors Enabled" (créée lors de l'étape précédente).
Vous devrez créer un déclencheur pour chaque vendor non-IAB que vous souhaitez bloquer.
Pour créer un déclencheur :
- Cliquez sur Folders dans le menu de gauche.
- Cliquez sur les trois points à droite du fichier Didomi.
- Cliquez sur Add New trigger.
- Entrez cette information
Nom du déclencheur : "{Vendor name} – Didomi", par exemple.
Remplacez ce qui est écrit entre les accolades {} par le nom du vendor correspondant et assurez-vous de supprimer les accolades {}. Le nom n'a pas d'impact. Vous pouvez utiliser le nom de votre choix.
Type de déclencheur : custom event (utilisez l'icône du crayon pour ouvrir le menu de choix).
Nom de l'événement : l'un des événements générés par Didomi (didomi-consent, didomi-ready ou didomi-consent-changed). Nous vous recommandons d'utiliser didomi-consent.
"Conditions in which the trigger can be executed" et sélectionnez "Some custom events”.
"Fire this trigger when an event occurs and all of these conditions are true": Didomi Vendors Enabled contains {ID du vendor}
Remplacez ce qui est écrit entre les accolades {} par l'ID du vendor correspondant. "Où trouver l'ID du vendor ?" plus bas dans cet article.
👉 Si votre déclencheur existant est un déclencheur personnalisé, vous devez "créer un groupe de déclencheurs" de manière que la tag soit activée lorsque la condition 1 (l'existant) et la condition 2 (celle liée au consentement) sont toutes deux réunis.
👉 Si vous ajoutez à la tag à la fois le déclencheur existant lié au consentement ET le déclencheur existant, cette dernière sera lancée lorsque la condition 1 OU 2 est valide. N'utilisez pas les deux en même temps, car cela entraîne le dépôt de cookies avant/sans consentement (non conforme).
Créer un groupe de déclencheurs :
- Cliquez sur Folders dans le menu de gauche.
- Cliquez sur les trois points du fichier Didomi, puis sur Add new trigger
- Entrez cette information:
Name of trigger group: "Group of triggers – Consent + {name of the other condition} - {vendor name}", par exemple
Remplacez ce qui est écrit entre les accolades {} par les informations correspondantes (et retirez les {}).
Le nom du groupe de déclencheurs n'a pas d'importance, vous pouvez utiliser le nom de votre choix
Type de déclencheur : cliquez sur l'icône du crayon et choisissez "Group of triggers"
Cliquez surà droite de Triggers.
Sélectionnez le déclencheur existant pour votre tag.
Cliquez à nouveau sur
Sélectionnez le déclencheur Didomi correspondant au vendor, précédemment créé (comme indiqué dans l'étape précédente).
- Sauvegardez
👉 Ce déclencheur (ou groupe de déclencheurs) peut désormais être utilisé dans les tags de manière à ce qu'elles soient activées chaque fois que l'utilisateur donne son consentement pour ce vendor.
Les groupes de déclencheurs ne sont déclenchés qu'une fois par page. Cela peut poser problème lorsque vous utilisez des sites web dynamiques. Dans de tels cas, vous pouvez utiliser les fonctions et événements Didomi. Pour les applications à page unique (SPA), veuillez vous référer à notre page GitHub dédiée.
Où trouver l'ID du vendor?
Pour trouver l'ID du vendor, rendez-vous à l'étape 1. Regulations, puis dans l'onglet Regulations, sélectionnez Edit Vendors and Purposes sous chaque réglementation. Vous pouvez sélectionner et copier l'API ID.
Faites correspondre le déclencheur à la tag
Enfin, vous devez connecter le déclencheur à sa tag. Cette dernière étape est très importante.
Dans la section Tags de votre compte GTM :
- Cliquez sur l'une de vos tags existantes pour un vendor non-IAB.
- Ajoutez le déclencheur ou le groupe de déclencheurs (créé précédemment) correspondant au vendor de la tag, à la place du déclencheur utilisé précédemment.
- Enregistrez.
⚠️ Répétez cette étape pour CHACUN des déclencheurs existants pour les vendors non-IAB.
N'oubliez pas de configurer les tags pour tous vos conteneurs.
Dorénavant, chaque fois que vous ajoutez une nouvelle tag pour un vendor non-IAB nécessitant un consentement conforme au RGPD, vous devrez suivre la configuration et cocher ce nouveau vendor dans la liste affichée dans la console.