Blocking Third-Party Resources

The SDK banner cookie platform can block the loading of third-party resources until the visitor gives consent to the appropriate cookie category. This is essential for compliance with the GDPR and ePrivacy, where non-essential cookies and tracking do not need to be set before the visitor chooses.

How It Works

Add a data-cookie-consent attribute to any item you want to leave behind the consent. slug from your banner configuration – for example, ___ZBT_I18N_RUNTIME_BLOCK_168__, ___ZBT_I18N_RUNTIME_BLOCK_169__, or functional.

The SDK scans the page for items with this attribute and keeps them inactive until the visitor agrees to the appropriate category.It also tracks for items added dynamically using a MutationObserver, so that the resources injected after the page loading are automatically managed.

Scripts

To block a script, change src to data-src and set type="text/plain" to prevent the browser from running it:

<!-- Before: loads immediately -->
<script src="https://analytics.example.com/tracker.js"></script>

<!-- After: loads only when "analytics" consent is granted -->
<script
  type="text/plain"
  data-cookie-consent="analytics"
  data-src="https://analytics.example.com/tracker.js"
></script>

If the script originally had a significant attribute type (for example, module), keep it with data-type:

<script
  type="text/plain"
  data-type="module"
  data-cookie-consent="analytics"
  data-src="https://example.com/analytics.mjs"
></script>

Inline scripts work the same way:

<script type="text/plain" data-cookie-consent="analytics">
  gtag("config", "GA_MEASUREMENT_ID");
</script>

Iframes

Replace src with data-src:

<iframe
  data-cookie-consent="marketing"
  data-src="https://www.youtube.com/embed/VIDEO_ID"
  width="560"
  height="315"
></iframe>

Images

Tracking pixels and other consent-gated images:

<img data-cookie-consent="analytics" data-src="https://example.com/pixel.gif" />

Stylesheets

Replace href with data-href on <link> tags:

<link
  data-cookie-consent="analytics"
  data-href="https://example.com/tracker.css"
  rel="stylesheet"
/>

Supported Elements

Element	Blocked Attribute	Restored To
<script>	data-src and/or type="text/plain"	src restored, type set to data-type or removed
<iframe>	data-src	src
<img>	data-src	src
<video>	data-src	src
<audio>	data-src	src
<embed>	data-src	src
<object>	data-src	data
<link>	data-href	href

Common Integrations

Google Analytics

<script type="text/plain" data-cookie-consent="analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag("js", new Date());
  gtag("config", "GA_MEASUREMENT_ID");
</script>
<script
  type="text/plain"
  data-cookie-consent="analytics"
  data-src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
></script>

Facebook Pixel

<script type="text/plain" data-cookie-consent="advertising">
  !function(f,b,e,v,n,t,s){/* Facebook Pixel code */}(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
</script>

YouTube Embed

<iframe
  data-cookie-consent="functional"
  data-src="https://www.youtube.com/embed/VIDEO_ID"
  width="560"
  height="315"
  frameborder="0"
  allowfullscreen
></iframe>

Category Slugs

Valorile atributului ___ZBT_I18N_RUNTIME_BLOCK_237__ se potrivesc categoriei slug in the consent state (not the display name). the default categories use the following slugs:

Category	Attribute Value (slug)
Necessary	necessary
Analytics	analytics
Advertising	advertising
Functional	functional
Uncategorised	uncategorised

For a personalized category, use slug is set in the console (for example social-media), not the display name.

System categories, such as Required, are always supported, so the tagging of items with data-cookie-consent="necessary" is valid, but has no blocking effect – those resources are loaded immediately. Category Uncategorized is where cookies that have not yet been assigned to a category are collected.