{"id":4728,"date":"2024-07-09T10:11:59","date_gmt":"2024-07-09T08:11:59","guid":{"rendered":"https:\/\/hgency.be\/?p=4728"},"modified":"2024-07-12T15:20:42","modified_gmt":"2024-07-12T13:20:42","slug":"consentement-cookies","status":"publish","type":"post","link":"https:\/\/hgency.be\/fr\/blog\/web-analytics\/consentement-cookies\/","title":{"rendered":"Mise en place d&#8217;une banni\u00e8re de consentement de cookies et de Google Consent Mode avec Google Tag Manager"},"content":{"rendered":"<p>\u00c0 la surprise de personne : la confidentialit\u00e9 est une affaire s\u00e9rieuse de nos jours. Avec des lois comme le RGPD et le CCPA, ainsi que le nouveau mode de consentement de Google, avoir une banni\u00e8re de consentement aux cookies sur votre site web n&#8217;est pas seulement une bonne id\u00e9e &#8211; c&#8217;est une n\u00e9cessit\u00e9. Cette banni\u00e8re informe les visiteurs des cookies que vous utilisez et leur permet de choisir de les accepter ou de les refuser pour assurer la conformit\u00e9 de votre site.<\/p>\n<p>J&#8217;ai essay\u00e9 plusieurs outils pour mettre en place une banni\u00e8re de consentement aux cookies sur hgency.be mais je n&#8217;ai pas trouv\u00e9 qui soit facile \u00e0 utiliser, transparent et \u00e0 un prix raisonnable. J&#8217;ai donc opt\u00e9 pour la cr\u00e9ation d&#8217;une banni\u00e8re de consentement aux cookies mise en place via Google Tag Manager avec <a href=\"https:\/\/klaro.org\/\">Klaro<\/a>. Cela s&#8217;est av\u00e9r\u00e9 \u00eatre la meilleure solution pour contr\u00f4ler facilement les cookies et rester conforme.<\/p>\n<p>Dans cet article, je vais vous montrer comment configurer une banni\u00e8re de consentement aux cookies avec Google Tag Manager et d\u00e9clencher vos balises marketing en fonction des pr\u00e9f\u00e9rences de consentement de vos utilisateurs.<\/p>\n<p><strong>Avertissement :<\/strong> Je ne suis pas un expert juridique. Pour la cr\u00e9ation de votre politique de cookies et pour vous assurer que vos balises marketing sont conformes aux r\u00e9glementations r\u00e9gionales, veuillez consulter un avocat qualifi\u00e9. Ces informations sont fournies \u00e0 titre indicatif uniquement et ne doivent pas \u00eatre consid\u00e9r\u00e9es comme des conseils juridiques.<\/p>\n<p>L&#8217;agenda pour aujourd&#8217;hui:<\/p>\n<ul>\n<li><a href=\"#banner-implementation\">Impl\u00e9menter une banni\u00e8re de consentement de cookies avec Google Tag Manager<\/a><\/li>\n<li><a href=\"#setup\">Activer Consent Mode dans Google Tag Manager<\/a><\/li>\n<li><a href=\"#triggers\">Utiliser les pr\u00e9f\u00e9rences de consentement de vos utilisateurs pour d\u00e9clencher vos tags<\/a><\/li>\n<\/ul>\n<h2 id=\"banner-implementation\">Impl\u00e9menter une banni\u00e8re de consentement de cookies avec Google Tag Manager<\/h2>\n<p>Les sites web ne sont plus autoris\u00e9s \u00e0 placer des cookies sur les appareils de leurs utilisateurs sans d&#8217;abord recueillir leur consentement explicite. Les banni\u00e8res de consentement aux cookies ont \u00e9t\u00e9 cr\u00e9\u00e9es pour r\u00e9pondre \u00e0 cette r\u00e8glementation: elles collectent et stockent le consentement des visiteurs.<\/p>\n<p>Votre banni\u00e8re de consentement aux cookies doit donc remplir deux fonctions :<\/p>\n<ul>\n<li>Permettre \u00e0 vos utilisateurs de donner leur consentement pour l&#8217;utilisation de cookies<\/li>\n<li>Enregistrer le statut de leur consentement<\/li>\n<\/ul>\n<p>Vous avez d\u00e9j\u00e0 une banni\u00e8re de consentement aux cookies en place ? <a href=\"#setup\">Passez directement \u00e0 la configuration du Consent Mode dans Google Tag Manager.<\/a><\/p>\n<p>Pour cr\u00e9er ma banni\u00e8re de consentement aux cookies, j&#8217;ai utilis\u00e9 la version gratuite de Klaro. C&#8217;est un projet open-source qui peut \u00eatre impl\u00e9ment\u00e9 avec Google Tag Manager. Vous pouvez acc\u00e9der \u00e0 tout le code n\u00e9cessaire et \u00e0 la documentation dans leur <a href=\"https:\/\/github.com\/klaro-org\/klaro-js\">GitHub<\/a>. Bien que le code disponible sur leur GitHub puisse paraitre intimidant, j&#8217;ai r\u00e9ussi \u00e0 m&#8217;en sortir avec presque aucune comp\u00e9tence en d\u00e9veloppement.<\/p>\n<h3>Cr\u00e9er la balise pour la banni\u00e8re de consentement aux cookies<\/h3>\n<p>La banni\u00e8re de consentement aux cookies Klaro peut \u00eatre impl\u00e9ment\u00e9e en utilisant une balise HTML personnalis\u00e9e. Dans l&#8217;exemple ci-dessous, je l&#8217;ai nomm\u00e9e &#8220;Klaro &#8211; Cookie Banner&#8221;. N&#8217;h\u00e9sitez pas \u00e0 adapter le nom pour qu&#8217;il refl\u00e8te votre convention de nommage.<\/p>\n<p>Utilisez le d\u00e9clencheur &#8220;Consent Initialization &#8211; All Pages&#8221; pour charger la banni\u00e8re et d\u00e9finir le consentement avant que toute autre balise ne soit d\u00e9clench\u00e9e.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4648 size-full alignnone\" src=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/tag-klara.png\" alt=\"Klara Cookie consent banner implementation in GTM\" width=\"1010\" height=\"881\" srcset=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/tag-klara.png 1010w, https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/tag-klara-300x262.png 300w\" sizes=\"auto, (max-width: 1010px) 100vw, 1010px\" \/><\/p>\n<h3>Configurer la banni\u00e8re de consentement aux cookies<\/h3>\n<p>Le code HTML de la banni\u00e8re Klaro est relativement simple \u00e0 configurer. Vous devez d&#8217;abord sp\u00e9cifier la configuration, puis charger le script lui-m\u00eame. <a href=\"https:\/\/klaro.org\/docs\/integration\/annotated-configuration\">Leur documentation<\/a> est tr\u00e8s utile pour trouver la bonne configuration. Si vous ne voulez pas partir de z\u00e9ro, n&#8217;h\u00e9sitez pas \u00e0 copier\/coller ma configuration et \u00e0 l&#8217;adapter \u00e0 vos besoins. <a href=\"https:\/\/github.com\/HGENCY\/cookie-consent-banner\/blob\/main\/klaro%20tag%20setup\">Elle est disponible ici sur Github<\/a>.<\/p>\n<p>Voici la configuration que j&#8217;utilise pour la banni\u00e8re sur le site de HGENCY :<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4656 size-full alignnone\" src=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/cookie-banner-config.png\" alt=\"Klara cookie consent banner config\" width=\"351\" height=\"364\" srcset=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/cookie-banner-config.png 351w, https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/cookie-banner-config-289x300.png 289w\" sizes=\"auto, (max-width: 351px) 100vw, 351px\" \/><\/p>\n<p>Ci-dessus, je sp\u00e9cifie o\u00f9 la banni\u00e8re doit \u00eatre affich\u00e9e, comment le consentement est stock\u00e9, les \u00e9l\u00e9ments obligatoires, etc.<\/p>\n<div class=\"flex flex-grow flex-col max-w-full\">\n<div class=\"min-h-[20px] text-message flex flex-col items-start whitespace-pre-wrap break-words [.text-message+&amp;]:mt-5 juice:w-full juice:items-end overflow-x-auto gap-2\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"b2f8ccba-2756-460d-b1b7-9c950b8bdcfd\">\n<div class=\"flex w-full flex-col gap-1 juice:empty:hidden juice:first:pt-[3px]\">\n<div class=\"markdown prose w-full break-words dark:prose-invert light\">\n<p>Apr\u00e8s la configuration, viennent les services que vous souhaitez afficher :<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-4658 size-full\" src=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/cookie-banner-services.png\" alt=\"\" width=\"343\" height=\"347\" srcset=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/cookie-banner-services.png 343w, https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/cookie-banner-services-297x300.png 297w\" sizes=\"auto, (max-width: 343px) 100vw, 343px\" \/><\/p>\n<p>Dans mon cas, je recueille le consentement pour les cookies Analytics (GA4),\u00a0 Marketing (Google et Facebook Ads) et fonctionnels. Cette liste devrait inclure tous les cookies utilis\u00e9s sur votre site Web. Pour les cookies fonctionnels, j&#8217;ai utilis\u00e9 le param\u00e8tre &#8220;required&#8221; car ils ne peuvent pas \u00eatre refus\u00e9s sur mon site.<\/p>\n<p>Voici \u00e0 quoi ressemble la banni\u00e8re de consentement aux cookies telle que je l&#8217;ai configur\u00e9e :<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4734\" src=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/banniere-de-consentement-fr.png\" alt=\"Banniere cookie consent klaro en fran\u00e7ais sur hgency\" width=\"646\" height=\"562\" srcset=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/banniere-de-consentement-fr.png 646w, https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/banniere-de-consentement-fr-300x261.png 300w\" sizes=\"auto, (max-width: 646px) 100vw, 646px\" \/><\/p>\n<h3 id=\"check-cookie\">V\u00e9rifier que votre banni\u00e8re de consentement aux cookies fonctionne<\/h3>\n<p class=\"first-token\" data-sourcepos=\"1:1-1:151\"><span>Vous avez mis votre balise en ligne et la banni\u00e8re s&#8217;affiche correctement ?<\/span><span> Parfait !<\/span><span> V\u00e9rifions maintenant que le consentement accord\u00e9 via la banni\u00e8re soit bien stock\u00e9 et accessible dans un cookie.<\/span><\/p>\n<p data-sourcepos=\"3:1-3:92\"><span>Pour voir les cookies stock\u00e9s dans votre navigateur,<\/span><span> faites un clic droit sur votre site web -&gt; Inspecter et ouvrez l&#8217;onglet &#8220;Application&#8221;.<\/span><span> Vous acc\u00e9derez alors \u00e0 ce tableau :<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-4665 size-full\" src=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/klaro-cookie.png\" alt=\"Klaro cookie on HGENCY\" width=\"1070\" height=\"301\" srcset=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/klaro-cookie.png 1070w, https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/klaro-cookie-300x84.png 300w, https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/klaro-cookie-1024x288.png 1024w\" sizes=\"auto, (max-width: 1070px) 100vw, 1070px\" \/><\/p>\n<p class=\"first-token\" data-sourcepos=\"1:1-1:156\"><span>Si vous utilisez la configuration par d\u00e9faut de la banni\u00e8re,<\/span><span> <\/span><span>les permissions de consentement sont stock\u00e9es dans le cookie &#8220;klaro&#8221; sous votre nom de domaine.<\/span><span> Dans mon exemple,<\/span><span> la banni\u00e8re indique &#8220;true&#8221; pour tous les services :<\/span><\/p>\n<p><code><span>%7B%22analytics%22%3Atrue%2C%22marketing%22%3Atrue%2C%22functional%22%3Atrue%7D<\/span><\/code><\/p>\n<div class=\"avatar-gutter ng-tns-c333119019-43 ng-star-inserted\">\n<p class=\"resize-observable\"><span style=\"letter-spacing: 0em;\">Dans cet exemple, j&#8217;ai donn\u00e9 mon consentement pour les cookies d&#8217;analyse,<\/span><span style=\"letter-spacing: 0em;\"> de marketing et de fonctionnement.<\/span><\/p>\n<p class=\"resize-observable\"><span style=\"letter-spacing: 0em;\">Pour effectuer d&#8217;autres tests,<\/span><span style=\"letter-spacing: 0em;\"> il suffit de supprimer le cookie en le s\u00e9lectionnant dans la liste et en appuyant sur Delete.<\/span><span style=\"letter-spacing: 0em;\"> La banni\u00e8re appara\u00eetra \u00e0 nouveau une fois que vous aurez recharg\u00e9 la page.<\/span><\/p>\n<\/div>\n<h2 id=\"setup\">Activer Consent Mode dans Google Tag Manager<\/h2>\n<p>Maintenant que vous collectez et stockez le consentement de vos utilisateurs dans un cookie, vous voulez rendre cette information accessible dans Google Tag Manager.<\/p>\n<h3>Cr\u00e9er la balise Consent Mode<\/h3>\n<div class=\"response-container ng-tns-c333119019-55 ng-star-inserted response-container-has-multiple-responses\">\n<div class=\"presented-response-container ng-tns-c333119019-55\">\n<div class=\"response-container-content ng-tns-c333119019-55 tunable-selection-with-avatar\">\n<div class=\"response-content ng-tns-c333119019-55\">\n<div class=\"markdown markdown-main-panel\" dir=\"ltr\"><span>La balise Consent Mode d\u00e9finit le statut de consentement par d\u00e9faut.<\/span><span> Ce statut sera utilis\u00e9 pour d\u00e9clencher (ou non) les balises jusqu&#8217;\u00e0 ce que l&#8217;utilisateur ait donn\u00e9 son consentement.<\/span><span> Pour cr\u00e9er la balise,<\/span><span> j&#8217;utilise le mod\u00e8le &#8220;Consent Mode (Google Tags)&#8221; de Simo Ahava.<\/span><span> Ce mod\u00e8le est disponible dans la galerie de mod\u00e8les communautaires en haut \u00e0 droite de l&#8217;\u00e9cran lorsque vous cr\u00e9ez un nouveau tag.<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-4668 size-full\" src=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/tag-type.png\" alt=\"Community template gallery in Google Tag Manager\" width=\"1219\" height=\"132\" srcset=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/tag-type.png 1219w, https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/tag-type-300x32.png 300w, https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/tag-type-1024x111.png 1024w\" sizes=\"auto, (max-width: 1219px) 100vw, 1219px\" \/><\/p>\n<p>Voici la configuration \u00e0 utiliser:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-4670 size-full\" src=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/consent-mode-tag.png\" alt=\"Consent Mode tag setup in Google Tag Manger\" width=\"981\" height=\"1038\" srcset=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/consent-mode-tag.png 981w, https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/consent-mode-tag-284x300.png 284w, https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/consent-mode-tag-968x1024.png 968w\" sizes=\"auto, (max-width: 981px) 100vw, 981px\" \/><\/p>\n<p>Les param\u00e8tres de consentement par d\u00e9faut de votre balise d\u00e9pendent de la r\u00e9glementation en vigueur dans la zone g\u00e9ographique de votre audience cible et des cookies que vous utilisez. Dans mon exemple, je cible la Belgique et j&#8217;utilise les param\u00e8tres suivants :<\/p>\n<ul>\n<li>Ad_storage, Analytics_storage, ad_user_data and ad_personalization: denied<\/li>\n<li>Personalization_storage, functionality_storage and security_storage: granted<\/li>\n<li>Pass Ad Click Information through URLs (url_passthrough): coch\u00e9<\/li>\n<li>Redact Ads Data (ads_data_redaction): coch\u00e9<\/li>\n<li>Trigger: Consent Initialization &#8211; All Pages<\/li>\n<\/ul>\n<p>Avec ces param\u00e8tres, lorsque vous arrivez pour la premi\u00e8re fois sur hgency.be, tous les cookies li\u00e9s aux publicit\u00e9s et aux analytics sont refus\u00e9s par d\u00e9faut.<\/p>\n<p>Activer le param\u00e8tre <code>url_passthrough<\/code> vous permet de conserver les param\u00e8tres d&#8217;URL tels que les UTM au cas o\u00f9 les utilisateurs donneraient leur consentement plus tard dans leur visite.<\/p>\n<h3>Cr\u00e9er les variables de consentement aux cookies<\/h3>\n<p class=\"first-token\" data-sourcepos=\"1:1-1:16\"><span>L&#8217;\u00e9tape suivante consiste \u00e0 cr\u00e9er une variable qui stock les r\u00e9ponses enregistr\u00e9es dans votre cookie Klaro.<\/span><span> Pour cela,<\/span><span> allez dans les variables et cr\u00e9ez une variable &#8220;Cookie tiers 1&#8221;.<\/span><\/p>\n<p data-sourcepos=\"3:1-3:99\"><span>Par d\u00e9faut,<\/span><span> le nom du cookie o\u00f9 le consentement est stock\u00e9 est &#8220;klaro&#8221;. <\/span><span><a href=\"#check-cookie\">Vous pouvez v\u00e9rifier le nom de votre cookie dans l&#8217;onglet &#8220;Application&#8221; d\u00e9crit pr\u00e9c\u00e9demment<\/a>.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4674 alignnone\" src=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/variable-cookie-consent.png\" alt=\"Cookie consent variable in Google Tag Manager\" width=\"1009\" height=\"456\" srcset=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/variable-cookie-consent.png 1009w, https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/variable-cookie-consent-300x136.png 300w\" sizes=\"auto, (max-width: 1009px) 100vw, 1009px\" \/><\/p>\n<p>Maintenant on peut v\u00e9rifier que la variable contient bien le contenu du cookie en utilisant le mode debug de Google Tag Manager :<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4676 alignnone\" src=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/variabe-cookie-consent-preview.png\" alt=\"Cookie consent variable preview\" width=\"1517\" height=\"439\" srcset=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/variabe-cookie-consent-preview.png 1517w, https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/variabe-cookie-consent-preview-300x87.png 300w, https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/variabe-cookie-consent-preview-1024x296.png 1024w\" sizes=\"auto, (max-width: 1517px) 100vw, 1517px\" \/><\/p>\n<p>Le contenu de mon cookie est maintenant accessible dans la variable.<\/p>\n<p>Le Consent Mode de Google requiert quatre types de consentement : Ad Personalization, Ad Storage, Ad User Data and Analytics Storage. Cela signifie que nous avons besoin d&#8217;une variable distincte pour chacun d&#8217;entre eux.<\/p>\n<p>Pour s\u00e9parer ma variable de consentement de cookie en quatre variables individuelles, Il faut cr\u00e9er une variable &#8220;lookup&#8221;. Elle permet d&#8217;isoler chaque type de consentement.<\/p>\n<p>Voici un exemple de la variable de recherche pour ad_storage :<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4679\" src=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/lookup-variable.png\" alt=\"Lookup variable in Google Tag manager for cookie consent\" width=\"1003\" height=\"841\" srcset=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/lookup-variable.png 1003w, https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/lookup-variable-300x252.png 300w\" sizes=\"auto, (max-width: 1003px) 100vw, 1003px\" \/><\/p>\n<p>Param\u00e8tres:<\/p>\n<ul>\n<li>Type: RegEx Table<\/li>\n<li>Input: Utilisez les variables cr\u00e9es \u00e0 l&#8217;\u00e9tape pr\u00e9c\u00e9dante<\/li>\n<li>Pattern: Copiez la partie du contenu de votre variable qui correspond au type de consentement (Utilisez un &#8220;\\&#8221; avant chaque cract\u00e8re sp\u00e9cial pour \u00e9viter les erreurs)<\/li>\n<li>Valeurs par d\u00e9faut: denied (En fonction du statut \u00e0 utiliser lorsque l&#8217;utilisateur n&#8217;a pas encore donn\u00e9 de r\u00e9ponse)<\/li>\n<li>Ignore Case: coch\u00e9<\/li>\n<li>Full Matches Only and Enable Capture Groups and Replace Functionality: non coch\u00e9<\/li>\n<\/ul>\n<p>Vous avez peut-\u00eatre remarqu\u00e9 que je ne collecte pas les consentements pour la personnalisation des annonces, le stockage des annonces et les donn\u00e9es utilisateur des annonces individuellement. Dans mon cas, ils rel\u00e8vent tous de la cat\u00e9gorie marketing.<\/p>\n<h3>Mettre \u00e0 jour la balise de consentement avec la r\u00e9ponse collect\u00e9e par la banni\u00e8re<\/h3>\n<p class=\"first-token\" data-sourcepos=\"1:1-1:24\"><span>\u00c0 ce stade, vous avez d\u00e9fini une valeur de consentement par d\u00e9faut et vous stockez le consentement de vos utilisateurs. L<\/span><span>a derni\u00e8re \u00e9tape consiste \u00e0 mettre \u00e0 jour l&#8217;\u00e9tat du consentement par d\u00e9faut avec les valeurs stock\u00e9es dans les variables.<\/span><\/p>\n<p data-sourcepos=\"3:1-3:103\"><span>Pour cela,<\/span><span> vous devez cr\u00e9er un nouveau tag de mode de consentement en d\u00e9finissant &#8220;Update&#8221; comme &#8220;Consent Command&#8221;:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4682\" src=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/consent-mode-tag-update.png\" alt=\"Consent mode tag update in Google Tag manager\" width=\"1020\" height=\"1263\" srcset=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/consent-mode-tag-update.png 1020w, https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/consent-mode-tag-update-242x300.png 242w, https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/consent-mode-tag-update-827x1024.png 827w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/><\/p>\n<p>Param\u00e8tres:<\/p>\n<ul>\n<li>Consent command: update<\/li>\n<li>Pour chaque service, utilisez la variable appropri\u00e9e<\/li>\n<li>Pass Ad Click Information et Redact Ads Data doivent \u00eatre coch\u00e9s ici aussi<\/li>\n<li>Comme d\u00e9clencheur, utilisez &#8220;Consent Initialization &#8211; All Pages&#8221; \u00e0 nouveau<\/li>\n<\/ul>\n<p>Une fois que vous aurez mis cette balise en ligne, vous devriez voir le statut de consentement de vos utilisateurs changer en fonction de leur choix. Voici un exemple du statut du consentement hgency.be une fois qu&#8217;un utilisateur a donn\u00e9 son consentement pour tous les services:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4684\" src=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/consent-mode-status.png\" alt=\"Preview consent mode status in Google Tag Manager\" width=\"756\" height=\"388\" srcset=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/consent-mode-status.png 756w, https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/consent-mode-status-300x154.png 300w\" sizes=\"auto, (max-width: 756px) 100vw, 756px\" \/><\/p>\n<h2 id=\"triggers\">Utiliser les pr\u00e9f\u00e9rences de consentement de vos utilisateurs pour d\u00e9clencher vos tags<\/h2>\n<p class=\"first-token\" data-sourcepos=\"1:1-1:30\"><span>Vous pouvez maintenant activer &#8220;consent overview&#8221; dans les param\u00e8tres de votre conteneur Google Tag Manager.<\/span><span> Cette option vous permet d&#8217;utiliser le consentement comme d\u00e9clencheur pour vos balises.<\/span><span> Pour y acc\u00e9der,<\/span><span> allez dans la partie &#8220;Admin&#8221; puis dans &#8220;Container Settings&#8221;.<\/span><span> Cochez la case &#8220;Consent overview&#8221; sous &#8220;additional settings&#8221;.<\/span><\/p>\n<p data-sourcepos=\"3:1-3:100\"><span>Vous verrez maintenant une ic\u00f4ne de vue d&#8217;ensemble des consentements en haut \u00e0 droite de vos balises dans l&#8217;espace de travail :<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4687\" src=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/consent-mode-in-google-tag-manager.png\" alt=\"Consent Mode Icon in Google Tag Manager\" width=\"243\" height=\"72\" \/><\/p>\n<p data-sourcepos=\"7:1-7:167\"><span>Dans ce menu,<\/span><span> vous trouverez un aper\u00e7u de toutes vos balises et du consentement requis pour leur d\u00e9clenchement.<\/span><span> S\u00e9lectionnez le consentement requis pour chacune d&#8217;entre elles.<\/span><\/p>\n<p data-sourcepos=\"9:1-9:55\"><span>Voici la configuration utilis\u00e9e pour ma balise Google :<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4690\" src=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/google-tag-built-in-consent-checks.png\" alt=\"Google tag constment mode built in checks in google tag manager\" width=\"558\" height=\"237\" srcset=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/google-tag-built-in-consent-checks.png 558w, https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/google-tag-built-in-consent-checks-300x127.png 300w\" sizes=\"auto, (max-width: 558px) 100vw, 558px\" \/><\/p>\n<p data-sourcepos=\"11:1-11:202\"><span>Les balises Google sont livr\u00e9es avec &#8220;Consent Settings&#8221; pr\u00e9d\u00e9finis.<\/span><span> <\/span><span>Elles utilisent le consentement stock\u00e9 dans votre balise. Aucun consentement suppl\u00e9mentaire n&#8217;est requis. <\/span><\/p>\n<p data-sourcepos=\"13:1-13:204\"><span>Pour les balises provenant d&#8217;autres plateformes,<\/span><span> vous pouvez avoir \u00e0 sp\u00e9cifier quel consentement est requis<\/span><span>.<\/span><span> Dans ce cas,<\/span><span> choisissez la troisi\u00e8me option :<\/span><span> &#8220;Require Additional consent for tag to fire&#8221; pour<\/span><span> choisir manuellement les consentements requis pour le d\u00e9clenchement de la balise.<\/span><\/p>\n<p data-sourcepos=\"15:1-15:107\"><span>Parcourez chacune de vos balises,<\/span><span> choisissez le bon param\u00e9trage et&#8230;<\/span><span> c&#8217;est tout !<\/span><span> Vous \u00eates maintenant pr\u00eat.<\/span><\/p>\n<p data-sourcepos=\"17:1-17:134\"><span>J&#8217;esp\u00e8re que cet article vous a \u00e9t\u00e9 utile.<\/span><span> N&#8217;h\u00e9sitez pas \u00e0 me contacter pour des commentaires,<\/span><span> questions ou recommandations.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00c0 la surprise de personne : la confidentialit\u00e9 est une affaire s\u00e9rieuse de nos jours. Avec des lois comme le RGPD et le CCPA, ainsi que le nouveau mode de consentement de Google, avoir une banni\u00e8re de consentement aux cookies sur votre site web n&#8217;est pas seulement une bonne id\u00e9e &#8211; c&#8217;est une n\u00e9cessit\u00e9. Cette&#8230;<\/p>\n","protected":false},"author":1,"featured_media":4716,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[129],"tags":[],"class_list":["post-4728","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-analytics"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Banni\u00e8re de consentement de cookies et Consent Mode avec GTM<\/title>\n<meta name=\"description\" content=\"Configuration d&#039;une banni\u00e8re de consentement aux cookies et du Consent Mode de Google avec Google Tag Manager\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hgency.be\/fr\/blog\/web-analytics\/consentement-cookies\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Banni\u00e8re de consentement de cookies et Consent Mode avec GTM\" \/>\n<meta property=\"og:description\" content=\"Configuration d&#039;une banni\u00e8re de consentement aux cookies et du Consent Mode de Google avec Google Tag Manager\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hgency.be\/fr\/blog\/web-analytics\/consentement-cookies\/\" \/>\n<meta property=\"og:site_name\" content=\"HGENCY\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-09T08:11:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-12T13:20:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/featured-image-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Hugues Ligot\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hugues Ligot\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Banni\u00e8re de consentement de cookies et Consent Mode avec GTM","description":"Configuration d'une banni\u00e8re de consentement aux cookies et du Consent Mode de Google avec Google Tag Manager","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hgency.be\/fr\/blog\/web-analytics\/consentement-cookies\/","og_locale":"fr_FR","og_type":"article","og_title":"Banni\u00e8re de consentement de cookies et Consent Mode avec GTM","og_description":"Configuration d'une banni\u00e8re de consentement aux cookies et du Consent Mode de Google avec Google Tag Manager","og_url":"https:\/\/hgency.be\/fr\/blog\/web-analytics\/consentement-cookies\/","og_site_name":"HGENCY","article_published_time":"2024-07-09T08:11:59+00:00","article_modified_time":"2024-07-12T13:20:42+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/featured-image-1.png","type":"image\/png"}],"author":"Hugues Ligot","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"Hugues Ligot","Dur\u00e9e de lecture estim\u00e9e":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hgency.be\/fr\/blog\/web-analytics\/consentement-cookies\/#article","isPartOf":{"@id":"https:\/\/hgency.be\/fr\/blog\/web-analytics\/consentement-cookies\/"},"author":{"name":"Hugues Ligot","@id":"https:\/\/hgency.be\/fr\/#\/schema\/person\/c9517c58a1f9246892e389fd8d0abcb4"},"headline":"Mise en place d&#8217;une banni\u00e8re de consentement de cookies et de Google Consent Mode avec Google Tag Manager","datePublished":"2024-07-09T08:11:59+00:00","dateModified":"2024-07-12T13:20:42+00:00","mainEntityOfPage":{"@id":"https:\/\/hgency.be\/fr\/blog\/web-analytics\/consentement-cookies\/"},"wordCount":1932,"commentCount":0,"publisher":{"@id":"https:\/\/hgency.be\/fr\/#organization"},"image":{"@id":"https:\/\/hgency.be\/fr\/blog\/web-analytics\/consentement-cookies\/#primaryimage"},"thumbnailUrl":"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/featured-image-1.png","articleSection":["Web Analytics"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hgency.be\/fr\/blog\/web-analytics\/consentement-cookies\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hgency.be\/fr\/blog\/web-analytics\/consentement-cookies\/","url":"https:\/\/hgency.be\/fr\/blog\/web-analytics\/consentement-cookies\/","name":"Banni\u00e8re de consentement de cookies et Consent Mode avec GTM","isPartOf":{"@id":"https:\/\/hgency.be\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hgency.be\/fr\/blog\/web-analytics\/consentement-cookies\/#primaryimage"},"image":{"@id":"https:\/\/hgency.be\/fr\/blog\/web-analytics\/consentement-cookies\/#primaryimage"},"thumbnailUrl":"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/featured-image-1.png","datePublished":"2024-07-09T08:11:59+00:00","dateModified":"2024-07-12T13:20:42+00:00","description":"Configuration d'une banni\u00e8re de consentement aux cookies et du Consent Mode de Google avec Google Tag Manager","breadcrumb":{"@id":"https:\/\/hgency.be\/fr\/blog\/web-analytics\/consentement-cookies\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hgency.be\/fr\/blog\/web-analytics\/consentement-cookies\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/hgency.be\/fr\/blog\/web-analytics\/consentement-cookies\/#primaryimage","url":"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/featured-image-1.png","contentUrl":"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/featured-image-1.png","width":1200,"height":628,"caption":"Cookie consent form"},{"@type":"BreadcrumbList","@id":"https:\/\/hgency.be\/fr\/blog\/web-analytics\/consentement-cookies\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/hgency.be\/fr\/"},{"@type":"ListItem","position":2,"name":"Mise en place d&#8217;une banni\u00e8re de consentement de cookies et de Google Consent Mode avec Google Tag Manager"}]},{"@type":"WebSite","@id":"https:\/\/hgency.be\/fr\/#website","url":"https:\/\/hgency.be\/fr\/","name":"Hgency","description":"Performance based marketing","publisher":{"@id":"https:\/\/hgency.be\/fr\/#organization"},"alternateName":"Hugues Ligot","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hgency.be\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/hgency.be\/fr\/#organization","name":"Hgency","alternateName":"Hugues Ligot","url":"https:\/\/hgency.be\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/hgency.be\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/hgency.be\/wp-content\/uploads\/2023\/10\/favicon.png","contentUrl":"https:\/\/hgency.be\/wp-content\/uploads\/2023\/10\/favicon.png","width":512,"height":512,"caption":"Hgency"},"image":{"@id":"https:\/\/hgency.be\/fr\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hgency.be\/fr\/#\/schema\/person\/c9517c58a1f9246892e389fd8d0abcb4","name":"Hugues Ligot","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/e0ac9d853e9b3b52810e8c101256d8278f0774a7730a2a4d75ac2feb47fe122f?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e0ac9d853e9b3b52810e8c101256d8278f0774a7730a2a4d75ac2feb47fe122f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e0ac9d853e9b3b52810e8c101256d8278f0774a7730a2a4d75ac2feb47fe122f?s=96&d=mm&r=g","caption":"Hugues Ligot"},"sameAs":["http:\/\/hgency.be","https:\/\/www.linkedin.com\/in\/hugueslgt\/"],"url":"https:\/\/hgency.be\/fr\/blog\/author\/hugueslgt\/"}]}},"_links":{"self":[{"href":"https:\/\/hgency.be\/fr\/wp-json\/wp\/v2\/posts\/4728","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hgency.be\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hgency.be\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hgency.be\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hgency.be\/fr\/wp-json\/wp\/v2\/comments?post=4728"}],"version-history":[{"count":9,"href":"https:\/\/hgency.be\/fr\/wp-json\/wp\/v2\/posts\/4728\/revisions"}],"predecessor-version":[{"id":4739,"href":"https:\/\/hgency.be\/fr\/wp-json\/wp\/v2\/posts\/4728\/revisions\/4739"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hgency.be\/fr\/wp-json\/wp\/v2\/media\/4716"}],"wp:attachment":[{"href":"https:\/\/hgency.be\/fr\/wp-json\/wp\/v2\/media?parent=4728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hgency.be\/fr\/wp-json\/wp\/v2\/categories?post=4728"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hgency.be\/fr\/wp-json\/wp\/v2\/tags?post=4728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}