Skip to main content

Script Blocking

Biskoui's script blocking feature automatically prevents third-party scripts from executing until users provide consent, then safely activates them when permission is granted. This provides a seamless way to ensure compliance without manually managing script execution.

How Script Blocking Works​

The SDK monitors your page for scripts marked with special attributes and automatically executes them when their corresponding service becomes activated through user consent.

Basic Usage​

Script blocking markup consists of two parts: the disabler and the enabler. The disabler prevents the script from executing initially, while the enabler tells the biskoui SDK when to activate it based on user consent.

To mark up an inline script for consent-dependent execution:

  1. Set the type attribute to "text/plain"
    This tells the browser to treat the script as plain text rather than executable JavaScript, effectively disabling it until biskoui activates it.

  2. Add the data-biskoui attribute with a service key
    This attribute defines the condition under which the biskoui SDK will enable and execute the script. The value must match a service configured in your biskoui dashboard.

<!-- This script stays dormant until Google Analytics consent is granted -->
<script type="text/plain" data-biskoui="google_analytics">
  gtag('config', 'GA_MEASUREMENT_ID');
  gtag('event', 'page_view');
</script>

<!-- This script waits for YouTube consent -->
<script type="text/plain" data-biskoui="youtube">
  console.log('YouTube is now allowed');
  loadYouTubeEmbeds();
</script>

When a user grants consent for a service, the biskoui SDK:

  1. Finds all scripts with the matching data-biskoui value
  2. Safely executes their contents in document order
  3. Ensures each script runs only once per page load

Required Attributes​

type="text/plain"​

This attribute prevents the browser from executing the script initially. The browser treats it as plain text rather than executable JavaScript.

<script type="text/plain" data-biskoui="facebook_pixel">
  // This won't execute until Facebook Pixel is consented to
  fbq('init', 'YOUR_PIXEL_ID');
</script>

data-biskoui="<service_key>"​

Links the script to a specific service configured in your biskoui dashboard. The service key must match exactly (using snake_case format).

<!-- Service key must match your dashboard configuration -->
<script type="text/plain" data-biskoui="google_maps">
  initGoogleMaps();
</script>

Common Integration Examples​

Google Analytics​

<script type="text/plain" data-biskoui="google_analytics">
  // Initialize Google Analytics
  gtag('config', 'GA_MEASUREMENT_ID', {
    page_title: document.title,
    page_location: window.location.href
  });
  
  // Track page view
  gtag('event', 'page_view');
</script>

Facebook Pixel​

<script type="text/plain" data-biskoui="facebook_pixel">
  // Initialize Facebook Pixel
  fbq('init', 'YOUR_PIXEL_ID');
  
  // Track page view
  fbq('track', 'PageView');
  
  // Track custom events
  fbq('track', 'ViewContent', {
    content_type: 'product',
    content_ids: ['123', '456']
  });
</script>

Google Maps​

<script type="text/plain" data-biskoui="google_maps">
  // Initialize Google Maps
  function initMap() {
    const map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: 46.8182, lng: 8.2275 },
      zoom: 8
    });
    
    new google.maps.Marker({
      position: { lat: 46.8182, lng: 8.2275 },
      map: map,
      title: 'Hello Switzerland!'
    });
  }
  
  // Call the initialization function
  initMap();
</script>

YouTube Embeds​

<script type="text/plain" data-biskoui="youtube">
  // Replace placeholder divs with actual YouTube embeds
  document.querySelectorAll('[data-youtube-id]').forEach(function(element) {
    const videoId = element.getAttribute('data-youtube-id');
    const iframe = document.createElement('iframe');
    iframe.src = `https://www.youtube.com/embed/${videoId}`;
    iframe.setAttribute('allowfullscreen', '');
    element.appendChild(iframe);
  });
</script>

Hotjar​

<script type="text/plain" data-biskoui="hotjar">
  (function(h,o,t,j,a,r){
    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
    h._hjSettings={hjid:YOUR_HOTJAR_ID,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>

Advanced Patterns​

Conditional Initialization​

<script type="text/plain" data-biskoui="google_analytics">
  // Only initialize if not already done
  if (typeof gtag === 'undefined') {
    // Load gtag library first
    const script = document.createElement('script');
    script.src = 'https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID';
    script.async = true;
    document.head.appendChild(script);
    
    script.onload = function() {
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'GA_MEASUREMENT_ID');
    };
  }
</script>

Multiple Service Dependencies​

<!-- This script runs when Google Analytics is activated -->
<script type="text/plain" data-biskoui="google_analytics">
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

<!-- This script runs when Facebook Pixel is activated -->
<script type="text/plain" data-biskoui="facebook_pixel">
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
</script>

<!-- This script runs when Google Ads is activated -->
<script type="text/plain" data-biskoui="google_ads">
  gtag('config', 'AW-CONVERSION_ID');
</script>

Service Key Reference​

Common service keys used with data-biskoui:

  • google_analytics - Google Analytics
  • google_maps - Google Maps
  • youtube - YouTube embeds
  • vimeo - Vimeo embeds
  • facebook_pixel - Facebook Pixel
  • google_ads - Google Ads/AdWords
  • hotjar - Hotjar analytics

Service keys can be found in your biskoui dashboard on the services tab.

Execution Behavior​

  • Scripts execute immediately after their service is activated
  • If consent already exists when the page loads, scripts execute after SDK initialization
  • Scripts execute in document order
  • Each script executes only once per page load, even when a service is accepted multiple times

Comparison with Event Listeners​

Script blocking and event listeners serve different use cases:

Use Script Blocking When:

  • You have simple initialization code
  • You want automatic, declarative behavior
  • You're migrating existing scripts
  • You don't need complex logic or conditionals

Use Event Listeners When:

  • You need conditional logic based on consent state
  • You want to handle multiple services in one function
  • You need access to the full consent state object
  • You're building dynamic or complex integrations

Both approaches can be used together on the same page for maximum flexibility.