How to Block Scripts Until Consent Without Breaking Your Website
The Core Technical Challenge
GDPR requires that non-essential scripts don't fire until the user gives consent. This sounds simple, but it's the hardest part of cookie compliance to get right. The reason: most third-party scripts are designed to load as early as possible and don't have built-in consent awareness.
If you just add a cookie banner that sets a flag, Google Analytics has already loaded, already set cookies, and already sent data to Google's servers. The consent banner is just decoration.
Approaches to Script Blocking
1. Manual Script Modification (Hard, Error-Prone)
The most basic approach: change every script tag on your site to not load until consent is given. For example, change type="text/javascript" to type="text/plain" and add a data-consent-category="analytics" attribute, then have your consent script change the type back after consent.
Problems:
- You must modify every single script tag on every page
- Scripts added via plugins, tag managers, or injected by other scripts are missed
- Inline scripts and dynamically created scripts are not caught
- Every time you add a new tool, you must remember to add the consent gate
2. Tag Manager Consent Templates (Medium Complexity)
Google Tag Manager offers built-in consent templates that integrate with Consent Mode. You set up consent categories in GTM and configure each tag's triggering to respect consent state.
Problems:
- Only works for scripts managed through GTM — scripts outside GTM are not controlled
- Requires GTM expertise to configure correctly
- Hard-coded scripts in your theme or plugins are still unblocked
- Does not detect or block piggyback tags
3. Browser-Level Script Interception (Best, What LegalBanner Uses)
The most robust approach: intercept script loading at the browser level before any script has a chance to execute. This works by:
- Loading the consent script as the very first thing in the
<head> - Using a MutationObserver and script proxy to intercept all script elements as they're added to the DOM
- Checking each script against the approved list and consent state
- Blocking scripts that don't have consent, and unblocking them if/when consent is given
Advantages:
- Catches all scripts, regardless of how they're added (hard-coded, injected, piggyback)
- No modification of existing code required
- Works with any platform (WordPress, Shopify, custom code)
- Handles dynamically loaded scripts and iframes
What About Performance?
A common concern: "Won't blocking scripts slow down my site?" Actually, the opposite. By blocking non-essential scripts until consent, your page loads faster for first-time visitors. The LegalBanner script itself is under 15KB gzipped and loads asynchronously, adding negligible overhead.
Testing Your Script Blocking
After implementing LegalBanner, test with these steps:
- Open an incognito window
- Open Developer Tools → Network tab
- Visit your site — do NOT interact with the banner
- Check: are there requests to google-analytics.com, facebook.com, etc.? There should be none
- Now accept cookies in the banner
- Check again: the blocked scripts should now load
If you see tracking requests before consent, something is wrong. LegalBanner's dashboard also shows a real-time view of which scripts are blocked and unblocked for each consent state.
Ready to fix your cookie consent?
Deploy a compliant banner in 5 minutes. No coding required.
Start free