Please note:
These instructions include steps that involve third-party services. Specifications, behavior, and steps outside of what's covered in this article for those services may not be supported through our chat support.
The screens and specifications for third-party services shown in this article are accurate as of April 2024. If anything looks different, please check the third-party service directly for the latest information.
If you're using third-party services that rely on cookies on your published site, you'll need to set up a way for visitors to consent to or decline those cookies before they're used.
At this time, this can't be done with Studio.Design alone.
By adding a CMP (Consent Management Platform) to Studio.Design through Google Tag Manager, you can display a consent modal like the one below.
Unless visitors agree to these cookies, any third-party services that require them won't run on your published site. Visitors can also change their consent choices later.
As an example, here's how to set up Cookiebot in Studio.Design through Google Tag Manager.
How to set up Cookiebot
1. Configure Cookiebot
Go to the Cookiebot website and click "Free Trial." Creating an account is free.
Click the verification link sent to the email address you registered with to verify your account. Next, log in to Cookiebot and enter the domain of your published site. Click "Next."
In the "Content" tab, add Japanese as a language and set it as the default. Once the basic setup is complete, click "Next."
Scroll down and copy the "Domains Group ID" that appears.
You can also find the "Domains Group ID" under the "Implementation" tab in the settings screen.
2. Configure Google Tag Manager
Using the external Apps integration available on paid plans, connect Google Tag Manager ahead of time.
Then, add the tags needed for Cookiebot in Google Tag Manager.
In the tag setup, add "Cookiebot CMP" to your Workspace from the "Community Template Gallery."
Click the "Cookiebot CMP" you set up, and paste the "Domains Group ID" you copied earlier into the "Cookiebot ID" field.
For the trigger, set "Consent Initialization." Save it and publish the workspace version to complete the setup.
The Cookiebot consent modal will now show up on the published site connected to Google Tag Manager.
Controlling cookies used on your published site
Just connecting Cookiebot isn't enough to control the cookies used by third-party services on your published site. Here are some examples for Apps and embedded boxes (iframes).
Reconnecting third-party Apps integrations through Google Tag Manager
Reconnect third-party services (e.g., Intercom, Google Analytics v4) that you previously connected via Apps integration through GTM instead, so Cookiebot can manage them.
Here's what you need to do:
Reconnect the third-party service through Google Tag Manager instead of using the Apps integration
In the third-party service tag's advanced settings, turn on "Consent Settings (BETA) > Require additional consent for tag to fire," and set a custom event called "cookie_consent_update" as the trigger
The official Cookiebot support article also covers this, so please refer to it as well.
[Example 1] Intercom
Refer to the official Intercom article and connect Intercom through Google Tag Manager beforehand.
Then, configure the Intercom tag you set up so Cookiebot can control its cookies.
First, in the tag's "Advanced Settings" toggle, under "Consent Settings (BETA)," add an option that can be selected under "Require additional consent for tag to fire."
Then, add a new trigger with the following settings.
※ Source: Official Cookiebot support article
Type: Custom Event
Event name: cookie_consent_update
This trigger fires on: All Custom Events
Your settings should now look like this. Update the Workspace, visit the published site, and confirm that Intercom doesn't launch until cookies are allowed. That's it!
[Example 2] Google Analytics v4
Assuming Google Analytics is set up through Google Tag Manager, update that tag's settings.
First, open "Consent Settings (BETA)" under the tag's "Advanced Settings" toggle.
Add the two items shown under "Built-in Consent Checks"—"ad_storage" and "analytics_storage"—by selecting them under "Require additional consent for tag to fire."
Then, add a new trigger with the following settings.
※ Source: Official Cookiebot support article
Type: Custom Event
Event name: cookie_consent_update
This trigger fires on: All Custom Events
Now, update the Workspace, visit the published site, and confirm that visit data doesn't show up in Google Analytics until cookies are allowed. That's it!
Adjusting embed codes (iframes) for third-party services
To control cookies from embed services like YouTube and Vimeo through Cookiebot, you'll need to make some adjustments to the iframe code.
The official Cookiebot support article also explains this, so please refer to it as well.
[How to do it]
Change
srctodata-srcAdd
data-cookieconsent="marketing"
[Example]
Before:
<iframe src="https://www.youtube.com/embed/xxxxxxxxxxx" frameborder="0" allowfullscreen=""></iframe>
After:
<iframe data-src="https://www.youtube.com/embed/xxxxxxxxxxx" data-cookieconsent="marketing" frameborder="0" allowfullscreen></iframe>
[Side effects]
Once you make these changes, the embedded content will no longer show up in the editor or live preview. Also, if a visitor declines cookies on your published site, the embedded content won't appear for them either. Please keep this in mind.
Additional notes
About Cookiebot pricing
Cookiebot offers a free plan for up to one domain and 50 pages, but some features are limited. For details, check the Cookiebot pricing page.
How to check which cookies a site is using
For example, in Chrome, you can open the "Cookies" menu from the lock icon to the left of the address bar to see which cookies the site is using. From there, you can block or delete cookies yourself.
About GDPR, CCPA, and personal information protection laws
Please note that the steps above don't guarantee compliance with laws like GDPR, CCPA, or personal information protection regulations.
cookies