How to use cookies or scripts on your website prior-blocking (GDPR guide)
To ensure your website is GDPR compliant, one of the most important aspects is to respect users' privacy by only running certain cookies and scripts after their explicit consent. In Europe, this process - known as 'pre-blocking' - is essential under the GDPR to protect users' data. With the GDPR Legal Cookie app for Shopify, you can easily manage this in your store. We'll guide you through the simple steps to pre-block specific scripts to help you stay GDPR compliant.
What is pre-blocking?
In short, pre-blocking prevents cookies or tracking scripts from being executed until the user has given their consent. This is required by the GDPR to ensure that no user data is collected without consent. For Shopify store owners using the GDPR Legal Cookie app, this is particularly helpful for managing custom scripts.
Steps to block a cookie or script in advance
Step 1: Identify the cookies and scripts to be blocked
Start by identifying scripts in your store that need to be blocked until users agree. Pay particular attention to custom scripts that have been added to your theme for tracking or analytics purposes, as Shopify's default cookies are usually automatically pre-blocked and require no further action.
However, custom scripts - for example from Adform, Klaviyo or Hotjar - require manual setup to ensure compliance as they generate cookies independently. Examples of such scripts are:
- Google Analytics for visitor tracking
- Facebook Pixel for advertising tracking
- Hotjar for the analysis of user behavior
Step 2: Find the src-attribute in the script
In HTML, scripts are normally created using a src-attribute in the <script>-tag is identified. This attribute refers to the external source of the script (e.g. Google Analytics or Hotjar). This enables you to recognize which scripts must be blocked until consent is given.
Dynamic scripts: These load external resources conditionally with JavaScript and have no direct src-URL in the HTML. Since they wait for certain conditions (such as the user's consent) before they are loaded, they are usually managed via the GDPR Legal Cookie app without the need for manual changes.
Hotjar script example (dynamic):
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
In this case, the src-URL https://static.hotjar.comwhich leads to the script that creates the cookie.
Example of Google Analytics script (dynamic):
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1*****6-1', 'auto');
</script>
In this case, the URL of the src attribute is https://www.google-analytics.com/analytics.js.
Static scripts: In contrast to dynamic scripts, static scripts are executed directly via a src-URL is loaded in HTML, e.g. <script src="https://example.com/script.js"></script>. Static scripts are executed immediately when the page is loaded, which is why they must be adapted so that they are only executed after the user has given their consent.
For example, a static script like <script src="https://example.com/script.js"></script> the src-attribute that refers directly to the external resource, such as https://example.com/script.js.
⚠️ Note that a simple script like this, which is considered a static script, must be customized to enable pre-blocking.
Step 3: Change the script to activate pre-blocking
For static scripts, replace the standardsrc-tag by dynamically loading the script so that it waits until the user has given their consent.
Without async or defer-attribute:
(() => {
/*
Replace "https://example.com/script.js" with the actual script source.
Be sure to enclose the original source in quotation marks and use proper closing characters.
*/
const scriptSrc = "https://example.com/script.js";
((d, t, s, n) => {
((n = d.createElement(t)).src = s);
d.head.appendChild(n);
})(document, "script", scriptSrc);
})();
</script>
If the script is a async-attribute:
(() => {
/*
Ersetzen Sie "https://example.com/script.js" durch die tatsächliche Skriptquelle.
Achten Sie darauf, die ursprüngliche Quelle in Anführungszeichen zu setzen und ordnungsgemäß abzuschließen.
*/
const scriptSrc = "https://example.com/script.js";
((d, t, s, n) => {
((n = d.createElement(t)).src = s).async = true;
d.head.appendChild(n);
})(document, "script", scriptSrc);
})();
</script>
If the script is a defer-attribute:
(() => {
/*
Ersetzen Sie "https://example.com/script.js" durch die tatsächliche Skriptquelle.
Achten Sie darauf, die ursprüngliche Quelle in Anführungszeichen zu setzen und ordnungsgemäß abzuschließen.
*/
const scriptSrc = "https://example.com/script.js";
((d, t, s, n) => {
((n = d.createElement(t)).src = s).defer = true;
d.head.appendChild(n);
})(document, "script", scriptSrc);
})();
</script>
This adjustment ensures that the script is only loaded once consent has been given.
Step 4: Create a new cookie in the declaration of consent
After identifying and, if necessary, changing your scripts, the next step is to declare a new cookie in your declaration of consent within the GDPR Legal Cookie app. This allows the app to block the associated scripts and cookies until users have given their consent.
For dynamic scripts:
Even if dynamic scripts are managed by the GDPR Legal Cookie app, you will need to create a new cookie declaration to ensure that they are correctly pre-blocked.
- Access the GDPR Legal Cookie App: Log in to your Shopify store, navigate to the GDPR Legal Cookie App and select the "Declaration of consent" section.
- Click on "Create new cookie".
- Fill in the cookie details:
-
Name: Enter the name of the cookie or service (e.g.
hotjar_cookie). - Description: Enter a brief description of the purpose of the cookie.
- Path: Set the path to "/" (the root directory of your website).
- Provider: Enter the name of the provider (e.g. Hotjar).
- Source: Enter the domain/URL or the script to be blocked.
- Expiration: Specify the lifetime of the cookie.
- Category: Select the appropriate category (e.g. Analytics, Marketing).
-
Saving the cookie declarationOnce all the information has been filled in, click on "Save" to add the cookie to the declaration of consent.
For static scripts:
If you are working with static scripts, remember to first create them as described in Step 3 described above to activate the pre-blocking. After the modification, follow the steps above to create a new cookie consent declaration.
To learn more about each specific cookie and to help fill out your consent form, visit the cookie database. Search for the name of a cookie and you will find detailed information, including usage and requirements for GDPR compliance.
Although using pre-blocked cookies and scripts may sound technical, this can be easily implemented by using the GDPR Legal Cookie app and following the steps outlined above. You can customize the necessary scripts to ensure that your Shopify store is GDPR compliant and ensures user privacy.
How pre-blocking works for native apps
For "pre-blocking" in native Shopify apps, third-party apps must comply with the Shopify Customer Privacy API(https://shopify.dev/docs/api/customer-privacy) guidelines before setting cookies. This automated system ensures that apps respect user consent preferences as specified by Shopify before installing cookies. This pre-blocking is handled automatically, so in most cases no further action is required from users.
When a user interacts with the GDPR Legal Cookie app banner (e.g. by accepting cookies), our app sends a consent signal to Shopify and updates it to reflect the user's choice. To see this in action, accept the banner and run this command in the browser console:
This command returns an object that shows the user's approval status across categories, for example:
This approach ensures compliance with the GDPR and other data protection regulations by blocking certain app functions until the user has given their consent - all without any additional manual steps for the user.
How to activate the pre-blocking of iframes with the GDPR Legal Cookie app
The GDPR Legal Cookie app allows you to enable pre-blocking for iframes (such as YouTube, Vimeo videos or Google Maps) so that they remain blocked until users have consented to the use of analytics cookies.
To enable pre-blocking for iframes, open the GDPR Legal Cookie app, navigate to Settings, find the Iframes pre-blocking option and turn it on.
By default, all embedded iframes are automatically assigned to the "Analytics" purpose.
Once pre-blocking is activated, users see a placeholder instead of the iframe content until they give their consent.
After approval, the placeholder is replaced by the actual iframe content.
This configuration ensures that embedded third-party content complies with GDPR requirements by waiting for user consent before loading it.