{"id":4640,"date":"2024-07-09T10:11:59","date_gmt":"2024-07-09T08:11:59","guid":{"rendered":"https:\/\/hgency.be\/?p=4640"},"modified":"2024-07-12T15:16:09","modified_gmt":"2024-07-12T13:16:09","slug":"cookie-consent","status":"publish","type":"post","link":"https:\/\/hgency.be\/en\/blog\/web-analytics\/cookie-consent\/","title":{"rendered":"Implementing a cookie consent banner and consent mode through Google Tag Manager"},"content":{"rendered":"<p>To no one&#8217;s surprise: privacy is a big deal nowadays. With laws like GDPR and CCPA and the new consent mode from Google,\u00a0having a cookie consent banner on your website isn&#8217;t just a good idea &#8211; It is a must. This banner informs visitors about the cookies you use and lets them choose to accept or decline, building trust and staying compliant.<\/p>\n<p>I tried several third-party options to implement a cookie consent banner on hgency.be, but I couldn&#8217;t find a complete solution that was easy to use, transparent, and reasonably priced. So, I decided to build my own cookie banner on Google Tag Manager with <a href=\"https:\/\/klaro.org\/\" target=\"_blank\" rel=\"noopener\">Klaro<\/a>. It turned out to be the best solution to easily control the third party cookies and remain compliant.<\/p>\n<p>In this post, I&#8217;ll show you how to set up a cookie consent banner with Google Tag Manager and trigger your marketing tags based your users&#8217; consent preferences.<\/p>\n<p><strong>Disclaimer:<\/strong> I am not a legal expert. For the creation of your cookie policy and to ensure that your marketing tags comply with regional regulations, please consult a qualified lawyer. This information is provided for guidance purposes only and should not be considered legal advice.<\/p>\n<p>Agenda for today:<\/p>\n<ul>\n<li><a href=\"#banner-implementation\">Implementing a cookie consent banner using Google Tag Manager<\/a><\/li>\n<li><a href=\"#setup\">Setting up consent mode in Google Tag Manager<\/a><\/li>\n<li><a href=\"#setup\">Apply consent settings to trigger your tags<\/a><\/li>\n<\/ul>\n<h2 id=\"banner-implementation\">Implementing a cookie consent banner using Google Tag Manager<\/h2>\n<p>Websites are not allowed to place cookies on users&#8217; devices without first collecting their explicit consent. Cookie consent banners were created to address this need: they collect and store visitors&#8217; consent.<\/p>\n<p>So your cookie consent banner should serve two purposes:<\/p>\n<ul>\n<li>It allows your users to give their consent for third-party cookies<\/li>\n<li>It stores their consent in a cookie<\/li>\n<\/ul>\n<p>You already have a cookie consent banner in place ? <a href=\"#setup\">Jump straight to setting consent mode in Google Tag Manager<\/a><\/p>\n<p>To build my cookie consent banner, I used the free version of Klaro. It&#8217;s an open-source project that can be implemented through Google Tag Manager. You can access all the required code and documentation in their <a href=\"https:\/\/github.com\/klaro-org\/klaro-js\">GitHub repository<\/a>. Although the code available in their GitHub may seem intimidating, I managed to find my way through it with close to zero coding skills.<\/p>\n<h3>Creating the cookie consent banner tag<\/h3>\n<p>The Klaro cookie consent banner can be implemented using a custom HTML tag. In the example below, I have named mine &#8220;Klaro &#8211; Cookie Banner.&#8221; Feel free to adapt the name to reflect your naming convention.<\/p>\n<p>Use the trigger &#8220;Consent Initialization &#8211; All Pages&#8221; trigger in order to load the banner and set consent before other tag is loaded.<\/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>Configuring you cookie consent banner<\/h3>\n<p>The HTML code of the Klaro banner is relatively straightforward to configure. You first need to specify the config then load the script itself. <a href=\"https:\/\/klaro.org\/docs\/integration\/annotated-configuration\">Their documentation<\/a> is quite helpful.\u00a0If you don&#8217;t want to start from scratch, feel free to copy \/ past my setup and adapt it to your need. <a href=\"https:\/\/github.com\/HGENCY\/cookie-consent-banner\/blob\/main\/klaro%20tag%20setup\">It&#8217;s available here on Github<\/a>.<\/p>\n<p>Here is the config I use for my banner:<\/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>I specify where the banner should be displayed, how the consent is stored, the mandatories etc.<\/p>\n<p>After the config, come the services you want to display:<\/p>\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>In my case, I collect consent for Analytics (GA4), Marketing (which I will use to trigger my Google Ads and Facebook Ads pixels) and functional cookies. This list should include all cookies used by your website. For the functional cookies, I used the required parameters as they cannot be blocked on my website.<\/p>\n<p>Here is the final look of the cookie consent banner as I configured it:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4661 size-full alignnone\" src=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/cookie-consent-banner-.png\" alt=\"HGENCY cookie consent banner made with Klaro\" width=\"647\" height=\"509\" srcset=\"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/cookie-consent-banner-.png 647w, https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/cookie-consent-banner--300x236.png 300w\" sizes=\"auto, (max-width: 647px) 100vw, 647px\" \/><\/p>\n<h3 id=\"check-cookie\">Checking that your consent banner works<\/h3>\n<p>You have pushed your tag live and your banner is being displayed on your website? Good ! Now let&#8217;s check that the consent granted through the banner is stored and available in a cookie.<\/p>\n<p>To see the cookies stored in your browser, right click on your website -&gt; Inspect and open the Application tab. You will access this table:<\/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>If you use the default setup of the banner, the consent permissions are stored in &#8220;klaro&#8221; cookie under your domain. In my example, the banner shows <em>true<\/em> for all cookies:<\/p>\n<p><code><span>%7B%22analytics%22%3Atrue%2C%22marketing%22%3Atrue%2C%22functional%22%3Atrue%7D<\/span><\/code><\/p>\n<p>I gave consent for both analytics, marketing and functional cookies.<\/p>\n<p>To run other tests, simply delete the cookie by selecting it in the list and pressing delete. The banner will pop up again once you reload the page.<\/p>\n<h2 id=\"setup\">Setting up consent mode in Google Tag Manager<\/h2>\n<p>Now that you collect and store your users&#8217; conset in a cookie, you want to make this information available in Google Tag Manager.<\/p>\n<h3>Setting up consent mode tag<\/h3>\n<p>The first tag that we create sets the default consent status. It will be used until the user provides his consent. To set this up, I use the <a href=\"https:\/\/www.simoahava.com\/analytics\/consent-mode-v2-google-tags\/\">Consent Mode (Google Tags) from Simo Ahava<\/a>. The tag is available from the community template gallery in the top right corner when you create a new tag.<\/p>\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>Here is the tag configuration:<\/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>The default consent settings of your tag depend of the regulation in place where target audience is located. In my case, I use:<\/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): checked<\/li>\n<li>Redact Ads Data (ads_data_redaction): checked<\/li>\n<li>Trigger: Consent Initialization &#8211; All Pages<\/li>\n<\/ul>\n<p>With these parameters, when you first land on hgency.be, all ad-related and analytical cookies are set to &#8220;denied&#8221;.<\/p>\n<p>Enabling <code>url_passthrough<\/code> allows you to retain URL parameters such as UTMs in case users grant their consent later in their visit.<\/p>\n<h3>Create cookie consent variables<\/h3>\n<p>The next step is to create a variable that will retain the answers stored in your Klaro cookie. For this, go in variable and select &#8220;1st-Party Cookie&#8221; as variable type.<\/p>\n<p>By default, the name of the cookie where consent is retained is &#8220;klaro&#8221;. You can <a href=\"#check-cookie\">verify the name of your cookie in the application tab described earlier<\/a>.<\/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>After you have created the variable, you can check that it retains the cookie content with the debug mode from 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>The content of my cookie is now available in the variable.<\/p>\n<p>Google consent mode requires four types of consent: Ad Personalization, Ad Storage, Ad User Data and Analytics Storage. That means we need a separate variable for each one.<\/p>\n<p>To split up my cookie consent variable in four individual variables, we need to use a lookup variable. It allows you to isolate each consent type.<\/p>\n<p>Here is an example of the lookup variable for ad_storage variable:<\/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>Parameters:<\/p>\n<ul>\n<li>Type: RegEx Table<\/li>\n<li>Input: use the variable created at previous step<\/li>\n<li>Pattern: copy the relevant part of your variable (use a &#8220;\\&#8221; before all special characters to avoid RegEx errors)<\/li>\n<li>Default value: denied (depending on what should be applied if no consentment is given)<\/li>\n<li>Ignore Case: check<\/li>\n<li>Full Matches Only and Enable Capture Groups and Replace Functionality: unchecked<\/li>\n<\/ul>\n<p>You may have noticed that I don&#8217;t collect Ad Personalization, Ad Storage and Ad User Data consents individually. In my case, they all fall under the marketing category.<\/p>\n<h3>Updating consent mode status based on users&#8217;s preferences<\/h3>\n<p>At this stage you have set a default value for consent and you store your users&#8217; consent. So the last step is to update the default consent status with the values stored in the variables.<\/p>\n<p>In order do do this, another consent mode tag needs to be created with &#8220;Update&#8221; set as consent command:<\/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>Parameters:<\/p>\n<ul>\n<li>Consent command: update<\/li>\n<li>For each of Google services, select the appropriate variable<\/li>\n<li>Pass Ad Click Information and Redact Ads Data should be checked here too<\/li>\n<li>As trigger, use &#8220;Consent Initialization &#8211; All Pages&#8221; again<\/li>\n<\/ul>\n<p>Once you push this tag live, you should see the status of your users consent change depending on their choice. See the status of consent on hgency.be once a user gave consent for all cookies:<\/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\">Apply consent settings to trigger your tags<\/h2>\n<p>You can now activate consent overview from your container settings. This option will allow you to use consentment as trigger for your tags. To get there, click on &#8220;Admin&#8221; then go into &#8220;Container Settings&#8221;. Tick the checkbox for &#8220;consent overview&#8221; below &#8220;additional settings&#8221;.<\/p>\n<p>You will now see a consent overview icon on the top right of your tags in Workspace:<\/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>In this menu, you see an overview of all your tags and their built-in consent checks. Select the consent required for each one.<\/p>\n<p>Here is the setup used for my Google Tag:<\/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>The Google Tags come with pre built-in consent checks. So that means no additional consent is required. They use the conset stored in your variables.<\/p>\n<p>For tags from other platforms you need to specify which consent is required, if any is required. In that case, pick the third option: require addtional consent for tag to fire. From there you can manually choose the required consents for the tag to fire.<\/p>\n<p>Go through each of your tags, pick the right parameter and&#8230; that&#8217;s it ! You are now all set.<\/p>\n<p>I hope you found the article useful. Feel free to reach out for comments, questions or recomandations.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To no one&#8217;s surprise: privacy is a big deal nowadays. With laws like GDPR and CCPA and the new consent mode from Google,\u00a0having a cookie consent banner on your website isn&#8217;t just a good idea &#8211; It is a must. This banner informs visitors about the cookies you use and lets them choose to accept&#8230;<\/p>\n","protected":false},"author":1,"featured_media":4715,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[128],"tags":[],"class_list":["post-4640","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.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Seting up a cookie consent banner and consent mode with GTM<\/title>\n<meta name=\"description\" content=\"I show how to set up a free cookie consent banner with Google Tag Manager and trigger your marketing tags based on collected consent\" \/>\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\/en\/blog\/web-analytics\/cookie-consent\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Seting up a cookie consent banner and consent mode with GTM\" \/>\n<meta property=\"og:description\" content=\"I show how to set up a free cookie consent banner with Google Tag Manager and trigger your marketing tags based on collected consent\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hgency.be\/en\/blog\/web-analytics\/cookie-consent\/\" \/>\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:16:09+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=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hugues Ligot\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Seting up a cookie consent banner and consent mode with GTM","description":"I show how to set up a free cookie consent banner with Google Tag Manager and trigger your marketing tags based on collected consent","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\/en\/blog\/web-analytics\/cookie-consent\/","og_locale":"en_US","og_type":"article","og_title":"Seting up a cookie consent banner and consent mode with GTM","og_description":"I show how to set up a free cookie consent banner with Google Tag Manager and trigger your marketing tags based on collected consent","og_url":"https:\/\/hgency.be\/en\/blog\/web-analytics\/cookie-consent\/","og_site_name":"HGENCY","article_published_time":"2024-07-09T08:11:59+00:00","article_modified_time":"2024-07-12T13:16:09+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":{"Written by":"Hugues Ligot","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hgency.be\/en\/blog\/web-analytics\/cookie-consent\/#article","isPartOf":{"@id":"https:\/\/hgency.be\/en\/blog\/web-analytics\/cookie-consent\/"},"author":{"name":"Hugues Ligot","@id":"https:\/\/hgency.be\/en\/#\/schema\/person\/c9517c58a1f9246892e389fd8d0abcb4"},"headline":"Implementing a cookie consent banner and consent mode through Google Tag Manager","datePublished":"2024-07-09T08:11:59+00:00","dateModified":"2024-07-12T13:16:09+00:00","mainEntityOfPage":{"@id":"https:\/\/hgency.be\/en\/blog\/web-analytics\/cookie-consent\/"},"wordCount":1541,"commentCount":0,"publisher":{"@id":"https:\/\/hgency.be\/en\/#organization"},"image":{"@id":"https:\/\/hgency.be\/en\/blog\/web-analytics\/cookie-consent\/#primaryimage"},"thumbnailUrl":"https:\/\/hgency.be\/wp-content\/uploads\/2024\/07\/featured-image-1.png","articleSection":["Web Analytics"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hgency.be\/en\/blog\/web-analytics\/cookie-consent\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hgency.be\/en\/blog\/web-analytics\/cookie-consent\/","url":"https:\/\/hgency.be\/en\/blog\/web-analytics\/cookie-consent\/","name":"Seting up a cookie consent banner and consent mode with GTM","isPartOf":{"@id":"https:\/\/hgency.be\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hgency.be\/en\/blog\/web-analytics\/cookie-consent\/#primaryimage"},"image":{"@id":"https:\/\/hgency.be\/en\/blog\/web-analytics\/cookie-consent\/#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:16:09+00:00","description":"I show how to set up a free cookie consent banner with Google Tag Manager and trigger your marketing tags based on collected consent","breadcrumb":{"@id":"https:\/\/hgency.be\/en\/blog\/web-analytics\/cookie-consent\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hgency.be\/en\/blog\/web-analytics\/cookie-consent\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hgency.be\/en\/blog\/web-analytics\/cookie-consent\/#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\/en\/blog\/web-analytics\/cookie-consent\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/hgency.be\/en\/"},{"@type":"ListItem","position":2,"name":"Implementing a cookie consent banner and consent mode through Google Tag Manager"}]},{"@type":"WebSite","@id":"https:\/\/hgency.be\/en\/#website","url":"https:\/\/hgency.be\/en\/","name":"Hgency","description":"Performance based marketing","publisher":{"@id":"https:\/\/hgency.be\/en\/#organization"},"alternateName":"Hugues Ligot","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hgency.be\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hgency.be\/en\/#organization","name":"Hgency","alternateName":"Hugues Ligot","url":"https:\/\/hgency.be\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hgency.be\/en\/#\/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\/en\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hgency.be\/en\/#\/schema\/person\/c9517c58a1f9246892e389fd8d0abcb4","name":"Hugues Ligot","image":{"@type":"ImageObject","inLanguage":"en-US","@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\/en\/blog\/author\/hugueslgt\/"}]}},"_links":{"self":[{"href":"https:\/\/hgency.be\/en\/wp-json\/wp\/v2\/posts\/4640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hgency.be\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hgency.be\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hgency.be\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hgency.be\/en\/wp-json\/wp\/v2\/comments?post=4640"}],"version-history":[{"count":40,"href":"https:\/\/hgency.be\/en\/wp-json\/wp\/v2\/posts\/4640\/revisions"}],"predecessor-version":[{"id":4726,"href":"https:\/\/hgency.be\/en\/wp-json\/wp\/v2\/posts\/4640\/revisions\/4726"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hgency.be\/en\/wp-json\/wp\/v2\/media\/4715"}],"wp:attachment":[{"href":"https:\/\/hgency.be\/en\/wp-json\/wp\/v2\/media?parent=4640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hgency.be\/en\/wp-json\/wp\/v2\/categories?post=4640"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hgency.be\/en\/wp-json\/wp\/v2\/tags?post=4640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}