Prior Blocking of Cookies: A Complete Guide to Manual Tagging with Complianz App for Shopify

For Shopify store owners, GDPR compliance is crucial for complying with legal requirements and protecting their customers’ privacy. A key element of this compliance is making sure that cookies or tracking scripts only run after users have provided explicit consent. This process, known as prior-blocking, helps manage data collection — it prevents scripts that may install cookies from executing until consent is granted, thus aligning with privacy regulations.

Manual tagging is a useful method for Complianz app for Shopify users to implementing prior-blocking, especially for custom scripts. In this guide, we’ll walk you through the manual tagging process to ensure that any scripts that could install cookies are blocked until consent is given.

What is Manual Tagging?

As mentioned above, manual tagging refers to the process of prior-block specific scripts and cookies to ensure they only run after a user has given explicit consent. This is a key requirement under the General Data Protection Regulation (GDPR), and helps ensure your Shopify store complies with privacy laws by preventing the execution of tracking scripts or cookies before user consent is given.

Why Is Manual Tagging Important?

When a user visits your store, certain scripts might automatically trigger cookies that collect personal data. The GDPR mandates that cookies should only be activated after the user has given clear consent, which is why blocking these scripts initially is vital. For example, if you’re using a third-party script like a social media sharing widget (such as a Facebook or Twitter button), that script might set tracking cookies when the page loads.

Manual tagging ensures that these scripts won’t run until the user agrees to them, helping your store comply with GDPR and other privacy regulations.

Let’s break down the steps for how to manually tag scripts using Complianz for Shopify.

How to Implement Manual Tagging with Complianz App for Shopify

Follow these simple steps to apply manual tagging to your Shopify store using the Complianz app for Shopify. If a script isn’t recognized by the app’s automatic scanner, you can manually modify it to ensure that it’s prior-blocked until consent is obtained.

Modifying the Script Code

To enable manual tagging, you need to modify the code of the scripts that might install cookies.

Here’s how you do it:

1. Add the Class to the Script Tag
   For every script that could install cookies, add the class _cmplc_cs_activate to the <script> tag. This marks the script for manual activation after consent.

Example:

<script class="_cmplc_cs_activate" type="text/javascript" src="your-script.js"></script>

1. Change the Type Attribute
   Change the type attribute from text/javascript to text/plain. This prevents the script from running immediately.

Example:

<script class="_cmplc_cs_activate" type="text/plain" src="your-script.js"></script>

1. Use Data Attributes for Suppressed Source
   To prevent the browser from downloading and executing the script prematurely and consequently install cookies, is suggested to replace the src attribute with data-suppressedsrc or suppressedsrc.

Example:

// use of data-suppressedsrc
<script class="_cmplc_cs_activate" type="text/plain" data-suppressedsrc="your-script.js"></script>

// OR suppressedsrc
<script class=”_cmplc_cs_activate” type=”text/plain” suppressedsrc=”your-script.js”></script>

Once the user consents, the Complianz app for Shopify will reactivate the script according to the following order:

If you’ve used data-suppressedsrc, the app will automatically restore the script’s src attribute, allowing it to run. The reactivation happens in the following order: data-suppressedsrc, suppressedsrc, and finally, src (if it is left unchanged).

To activate an inline JavaScript tag, you must use the class _cmplc_cs_activate-inline instead.

<script class="_cmplc_cs_activate-inline" type="text/plain">
. ….
</script>

Note: The class _cmplc_cs_activate-inline should only be used instead of _cmplc_cs_activate if the blocked script uses document.write and/or document.writeln, regardless of whether the script is an inline or an external resource.

Handling JavaScript Modules

If your website uses scripts other than text/javascript, such as JavaScript modules, you can still block and activate them by adding the data-cmplc-type or suppressedtype attribute to the script tag.

Example for a module:

<script type="module">
console.log('this is a module, e.g. "this" is undefined:', this);
</script>

To block it, modify the script as follows:

<script suppressedtype="module" type="text/plain" class="_cmplc_cs_activate">
console.log('this is a module, e.g. "this" is undefined:', this);</script>

Alternatively, you can use the data-cmplc-type attribute as shown below:

<script data-cmplc-type="module" type="text/plain" class="_cmplc_cs_activate">
console.log('this is a module, e.g. "this" is undefined:', this);
</script>

Adding Categories for Consent (If Per-Category Consent Enabled)

If your store uses per-category consent, you’ll need to specify which category the script belongs to. This allows you to block or activate scripts based on the user’s consent choices.

Add the data-cmplc-purposes attribute to your script tag:

<script class="_cmplc_cs_activate" type="text/plain" data-cmplc-purposes="3" data-suppressedsrc="your-script.js"></script>

Here, data-cmplc-purposes="3" corresponds to the Experience category.

The available categories are:

• Necessary (id 1)
• Functionality (id 2)
• Experience (id 3)
• Measurement (id 4)
• Marketing (id 5)

With the exception of strictly necessary cookies (which don’t need consent), you must add the data-cmplc-purposes attribute to all your scripts if you use per-category consent so that the Privacy Controls and Cookie Solution can properly identify the scripts for release. When the per-category feature is enabled scripts/iframes without the data-cmplc-purposes attribute or with at least one purpose rejected will remain blocked, so please be sure to add it in each instance.

Modifications of Scripts, Iframes, and Images for Dependency Management

In some cases, to properly reactivate a blocked tag, you may need to wait for the availability of a variable or JavaScript object. To manage such dependencies, you can use the data-cmplc-cs-wait-for attribute.

Example:

<script suppressedsrc="//download.helloworldvariable.js" class="_cmplc_cs_activate"></script>

<script data-cmplc-cs-wait-for=”helloWorld” class=”_cmplc_cs_activate-inline”>
console.log(‘Hello, world: ‘ + helloWorld);</script>

In this example, the second script waits for the helloWorld variable to be available before executing. This ensures that the dependent script only runs after the required variable is defined.

Block Iframes and Images

Just like scripts, img and iframe tags can also install cookies, which means they need to be blocked until the user provides consent. To achieve this, you should apply the same manual tagging method used for scripts. Specifically, you need to add the class _cmplc_cs_activate to the tag, replace the src attribute with data-suppressedsrc or suppressedsrc, and set the src to about:blank to prevent the content from loading prior to consent being given.

Example for an iframe:

<iframe id="player" class="_cmplc_cs_activate" width="640" height="390" frameborder="0" suppressedsrc="https://www.youtube.com/embed/erVv_Gm7CC4" src="about:blank"></iframe>

In this example, the iframe will not load the YouTube video until the user gives their consent.

Note: While the value data:text/html;base64,PGh0bWw+PGJvZHk+U3VwcHJlc3NlZDwvYm9keT48L2h0bWw+ (a base64-encoded version of “Suppressed”) can be used as a placeholder before consent, it does not affect the blocking or reactivation of the tag. However, it may cause display issues in some Android web views.

If you’d like to generate base64-encoded strings for other content, you can use a code/encode tool to create the necessary string.

How Prior-blocking Works for Native Apps

Prior-blocking in native Shopify apps requires that third-party applications comply with the Shopify Customer Privacy API (Shopify Customer Privacy API Documentation) policies before setting cookies or tracking user data. This automated system works by ensuring that these apps respect user consent preferences, as defined by Shopify, before any cookies or trackers are installed. In most cases, this process is handled automatically, so no additional action is required from store owners or users.

When a user interacts with the Complianz app for Shopify banner (e.g., by accepting cookies), the app sends a consent signal to Shopify. This signal updates Shopify’s records to reflect the user’s consent choices, ensuring that all third-party apps integrated with Shopify are in compliance with the GDPR and other privacy regulations.

For a real-world example, when the user accepts the cookie banner, you can check the consent status by running this command in your browser’s developer console:

window.Shopify.customerPrivacy.currentVisitorConsent();

This will return an object that shows the user’s consent status across various categories, like so:

{
  marketing: "yes",
  analytics: "yes",
  preferences: "yes",
  sale_of_data: "yes"
}

This approach ensures that Shopify and its third-party apps are respecting the user’s consent preferences. It automatically blocks certain app features—such as tracking scripts or cookies—until the user provides consent, ensuring full compliance with GDPR and other data protection regulations. This is all achieved without any additional manual steps required from the user, simplifying the process for both store owners and customers.

💡 Remember that manual tagging is an essential method for GDPR compliance. So, the general rule is that you should block scripts, iframes, and images from running until the user gives consent. Consider, the methods described in this guide are particularly helpful for managing custom scripts or third-party integrations that the app might not automatically detect.