# Bloquer les balises avec l’intégration Google Tag Manager

Cet article vous guidera dans l'intégration de Didomi avec Google Tag Manager (GTM) pour configurer le chargement des tags sur votre site web lorsque l'utilisateur a donné 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 de GTM. 

* **Événements Didomi**

{% hint style="info" %}
**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 
{% endhint %}

Nous recommandons d'utiliser l'événement **didomi-consent** car il inclut les autres et convient généralement le mieux.

Vous pouvez trouver ces événements dans notre 📰 [documentation technique](https://developers.didomi.io/cmp/web-sdk/third-parties/custom-integrations/tag-managers/google-tag-manager#what-events-are-available). 

* **Variables Didomi**

Les événements Didomi généreront des variables Didomi dans le Data Layer de GTM.

{% hint style="info" %}
Les variables Didomi incluent les informations suivantes :

* Vendeurs (variables sous-ensemble : consentement donné / consentement refusé / consentement inconnu)
* Finalités (variables sous-ensemble : consentement donné / consentement refusé / consentement inconnu)
* Vendeurs et finalités (variables sous-ensemble : consentement donné / consentement refusé / consentement inconnu)
* Chaîne de consentement IAB TCF / RGPD (si le RGPD s'applique)
  {% endhint %}

Vous n'êtes pas obligé d'utiliser toutes les variables. La variable la plus utilisée est "**didomiVendorsEnabled**", qui contient la liste de tous les vendeurs avec le consentement de l'utilisateur.

Vous pouvez trouver les variables 📰 [ici](https://developers.didomi.io/cmp/web-sdk/third-parties/tags-management/events-and-variables).

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 avis de consentement. 

1. Allez à **Avis de consentement (1)** et cliquez pour **modifier** votre avis.
2. Allez à l'étape **2. Personnalisation** **(2)** et l'onglet **Intégrations** onglet **(3)**.
3. Assurez-vous d'être dans la section **Gestionnaires de tags** section **(4)**.<br>

   <figure><img src="https://support.didomi.io/hs-fs/hubfs/New%20console%20flow/Capture%20d%E2%80%99%C3%A9cran%202023-03-09%20%C3%A0%2012.11.10.png?width=655&#x26;height=317&#x26;name=Capture%20d%E2%80%99%C3%A9cran%202023-03-09%20%C3%A0%2012.11.10.png" alt="" width="563"><figcaption></figcaption></figure>
4. Faites défiler vers le bas pour sélectionner l'intégration **Google Tag Manager** .&#x20;

   <figure><img src="https://support.didomi.io/hs-fs/hubfs/New%20console%20flow/Capture%20d%E2%80%99%C3%A9cran%202023-03-09%20%C3%A0%2012.11.03.png?width=688&#x26;height=314&#x26;name=Capture%20d%E2%80%99%C3%A9cran%202023-03-09%20%C3%A0%2012.11.03.png" alt="" width="563"><figcaption></figcaption></figure>
5. Dans le champ **Nom du Data Layer** , écrivez le nom de votre [data layer](https://support.google.com/tagmanager/answer/6164391?hl=en).
6. Le nom standard "dataLayer" est utilisé par défaut.&#x20;
7. Si vous conservez le nom standard, vous pouvez laisser le champ tel quel.
8. Si vous avez choisi un nouveau nom, vous pouvez le voir dans le code de votre site web (demandez à votre équipe technique).&#x20;
9. Si vous n'avez pas utilisé la Console pour créer votre avis de consentement, ajoutez ceci dans l'objet didomiConfig :\
   tagManager: {\
   \
   provider: 'gtm'\
   \
   }
10. Ne pas ajouter ce code si vous avez coché la case dans la console.&#x20;

### **Créer une variable**

1. Allez dans votre compte Google Tag Manager.\
   👉 Commençons par créer une variable "didomiVendorsEnabled" (c.-à-d. la variable la plus couramment utilisée). Cela vous permettra de configurer le chargement des tags lorsque l'utilisateur donne son consentement pour chaque vendeur.
2. Cliquez sur **Dossiers** dans le menu de gauche.<br>

   <figure><img src="https://p59.f1.n0.cdn.getcloudapp.com/items/wbu60pnv/60d590c2-1e2c-4541-b916-515e57c4b2f9.jpeg?source=viewer&#x26;v=52c0f03d1845087eae4c7e4d4b479738" alt="" width="563"><figcaption></figcaption></figure>
3. Cliquez sur **Nouveau dossier.**
4. Nommez votre dossier "Didomi".<br>

   <figure><img src="https://support.didomi.io/hs-fs/hubfs/New%20folder%20Didomi-png.png?width=438&#x26;name=New%20folder%20Didomi-png.png" alt=""><figcaption></figcaption></figure>
5. Cliquez sur les trois points à gauche du fichier Didomi.
6. Cliquez sur **Ajouter une variable**.<br>

   <figure><img src="https://p59.f1.n0.cdn.getcloudapp.com/items/RBulvjPx/f12a2921-d553-4d63-b454-75605030ae1c.jpeg?source=viewer&#x26;v=60b46bce911219a6b3624aaffe3fabb5" alt="" width="563"><figcaption></figcaption></figure>
7. Entrez ces informations :

**Nom :** Didomi Vendors Enabled (au lieu de « variable sans titre »)\
**Type de variable** : Variable du Data Layer (utilisez l'icône crayon pour ouvrir le menu de choix).\
**Nom de la variable du Data Layer** : didomiVendorsEnabled

<figure><img src="https://support.didomi.io/hs-fs/hubfs/Variable%20GTM.png?width=688&#x26;height=369&#x26;name=Variable%20GTM.png" alt="" width="563"><figcaption></figcaption></figure>

### **Créer des déclencheurs**

Vous allez maintenant créer des déclencheurs et connecter ces déclencheurs à l'un des événements Didomi (nous recommandons d'utiliser didomi-consent) et à la variable "Didomi Vendors Enabled" (créée à l'étape précédente).

Vous devrez créer un déclencheur pour **chaque** vendeur non-IAB que vous souhaitez bloquer.

Pour créer un déclencheur :

1. Cliquez sur **Dossiers** dans le menu de gauche.
2. Cliquez sur les trois points à droite du fichier Didomi.
3. Cliquez sur **Ajouter un nouveau déclencheur**.<br>

   <figure><img src="https://support.didomi.io/hubfs/image-png-Jun-10-2021-08-49-35-67-AM.png" alt="" width="563"><figcaption></figcaption></figure>
4. Entrez ces informations :

{% hint style="info" %}
**Nom du déclencheur** : "{Nom du vendeur} – Didomi", par exemple\
\&#xNAN;*Remplacez ce qui est écrit entre les accolades {} par le nom du vendeur correspondant et assurez-vous de supprimer les {}.*\
Le nom n'a pas d'impact. Vous pouvez utiliser le nom que vous préférez.\
\
**Type de déclencheur** : événement personnalisé (utilisez l'icône crayon pour ouvrir le menu de choix)\
\
**Nom de l'événement**: [l'un des événements générés par Didomi](https://developers.didomi.io/cmp/web-sdk/third-parties/custom-integrations/tag-managers/google-tag-manager#events) (didomi-consent, didomi-ready ou didomi-consent-changed). Nous recommandons d'utiliser didomi-consent.\
\&#xNAN;**"Conditions dans lesquelles le déclencheur peut être exécuté"** et sélectionnez « Certains événements personnalisés ». \
\
\&#xNAN;**"Déclencher ce déclencheur lorsqu'un événement se produit et que toutes ces conditions sont vraies"** : Didomi Vendors Enabled        contient        {ID  vendeur}\
\
\&#xNAN;*Remplacez ce qui est écrit entre les accolades {} par l'ID du vendeur correspondant : cf. « Où trouver l'ID du vendeur ? » plus bas dans cet article.*
{% endhint %}

<figure><img src="https://support.didomi.io/hs-fs/hubfs/DidomiVendorsEnabled.png?width=688&#x26;height=343&#x26;name=DidomiVendorsEnabled.png" alt="" width="563"><figcaption></figcaption></figure>

**Répétez pour tous les vendeurs non-IAB.** Vous devez créer un déclencheur **par** vendeur non-IAB.

👉Si votre déclencheur existant est un déclencheur personnalisé, vous devez "[créer un groupe de déclencheurs"](https://support.google.com/tagmanager/answer/9164222?hl=fr)  afin que le tag soit activé lorsque la condition 1 (celle existante) et la condition 2 (celle liée au consentement) **sont toutes deux remplies**.&#x20;

👉Si vous ajoutez à la fois le déclencheur existant lié au consentement ET le déclencheur existant au tag, ce dernier sera lancé 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).&#x20;

Pour créer un groupe de déclencheurs :

1. Cliquez sur **Dossiers** dans le menu de gauche.
2. Cliquez sur les trois points du fichier Didomi, puis **Ajouter un nouveau déclencheur**.<br>

   <figure><img src="https://support.didomi.io/hubfs/image-png-Jun-10-2021-08-49-35-67-AM.png" alt="" width="563"><figcaption></figcaption></figure>
3. Entrez ces informations :<br>

   **Nom du groupe de déclencheurs :** "Groupe de déclencheurs – Consentement + {nom de l'autre condition} - {nom du vendeur}", par exemple\
   \&#xNAN;*Remplacez ce qui est écrit entre les accolades {} par les informations correspondantes (et supprimez les {}).*\
   Le nom du groupe de déclencheurs n'a pas d'impact, vous pouvez utiliser le nom que vous préférez.

   **Type de déclencheur** : cliquez sur l'icône crayon et choisissez "**Groupe de déclencheurs**".

   Cliquez sur ![](https://lh6.googleusercontent.com/dJcxlqYfmCgkk1gbTkveVaqV7Eu6lkm09UZw5cWCwJ6b_dHvuAKoojnmQ1GHkoNd7HP5S2e8FR-vVKTx3Bh_wYpsT0kF2YROzsSgsxhyMBpcNhVG3KoX_o1GhMmGlG-8QkVDJ5Y), à droite de **Déclencheurs**.\
   Sélectionnez le déclencheur existant pour votre tag.\
   Cliquez sur ![](https://lh6.googleusercontent.com/dJcxlqYfmCgkk1gbTkveVaqV7Eu6lkm09UZw5cWCwJ6b_dHvuAKoojnmQ1GHkoNd7HP5S2e8FR-vVKTx3Bh_wYpsT0kF2YROzsSgsxhyMBpcNhVG3KoX_o1GhMmGlG-8QkVDJ5Y)  à nouveau.\
   Sélectionnez le déclencheur Didomi correspondant au vendeur, précédemment créé (cf. étape précédente).<br>

   <figure><img src="https://support.didomi.io/hubfs/image-png-Jun-10-2021-08-57-38-09-AM.png" alt="" width="563"><figcaption></figcaption></figure>
4. **Enregistrer**.

👉Ce déclencheur (ou groupe de déclencheurs) peut désormais être utilisé dans les tags afin qu'ils soient activés chaque fois que l'utilisateur donne son consentement pour ce vendeur.&#x20;

Les groupes de déclencheurs ne se déclenchent qu'une seule fois par page. Cela peut poser problème lors de l'utilisation de sites web dynamiques. Dans ce cas, vous pouvez utiliser les [fonctions](https://developers.didomi.io/cmp/web-sdk/reference/api) et [événements](https://developers.didomi.io/cmp/web-sdk/third-parties/custom-integrations/tag-managers/google-tag-manager/configure-the-didomi-gtm-integration#events). Spécifiquement pour les SPA, veuillez vous référer à notre [page GitHub](https://github.com/didomi/samples/tree/main/how-to-track-SPA-with-GTM-and-Didomi).

#### **Où trouver l'ID du vendeur ?**&#x20;

Pour trouver l'ID du vendeur, allez à l'étape **1. Règlementations**, puis à l'onglet **Règlementations** et **Modifier les vendeurs et finalités** sous chaque règlement. Vous pouvez sélectionner et copier l'ID API.

<figure><img src="https://support.didomi.io/hs-fs/hubfs/ID%20vendor%20to%20use%20GTM.png?width=688&#x26;height=366&#x26;name=ID%20vendor%20to%20use%20GTM.png" alt="" width="563"><figcaption></figcaption></figure>

#### **Associer le déclencheur au tag**

Enfin, vous devez connecter le déclencheur à son tag. **Cette dernière étape est très importante.**

Dans le champ **Section des** Tags&#x20;

![](https://support.didomi.io/hs-fs/hubfs/image-png-Jun-10-2021-08-58-57-51-AM.png?width=232\&name=image-png-Jun-10-2021-08-58-57-51-AM.png)

1. de votre compte GTM :
2. Cliquez sur l'un de vos tags existants pour un vendeur non-IAB.&#x20;
3. **Enregistrer**.

{% hint style="danger" %}
**Ajoutez le déclencheur ou le groupe de déclencheurs (créé précédemment) correspondant au vendeur du tag, au lieu du déclencheur utilisé précédemment.**&#x20;

Répétez pour CHACUN des déclencheurs existants pour les vendeurs non-IAB. **N'oubliez pas de configurer les tags pour** tous

vos conteneurs. À partir de maintenant, chaque fois que vous ajoutez un nouveau tag pour un vendeur non-IAB nécessitant un consentement conforme au RGPD, vous devez suivre la configuration et cocher ce nouveau vendeur dans la liste affichée dans la console.
{% endhint %}