Docs menu

Script blocking

Automatic script blocking, manual tagging, consent categories, placeholders and SPA support.

Script Control

Automatic Blocking (Default)

In automatic mode, CookieHug detects and blocks third-party scripts, iframes, and tracking pixels using hostname-based domain matching and a MutationObserver. The observer monitors both new DOM elements and src attribute changes on existing elements. Known tracking domains are automatically categorized (statistics, marketing, preferences) and blocked until consent is given.

Hostname matching: Patterns are matched against the URL's hostname (not the full URL), preventing false positives — e.g., segment.com will not accidentally block my-segment.com. Patterns containing a path (e.g., facebook.com/tr) are matched against the full URL. Relative URLs (first-party scripts) are never blocked.

Covered services include: Google Analytics (including region1), Google Tag Manager, Google Ads, Meta/Facebook Pixel, TikTok, Snapchat, LinkedIn, Twitter/X, Pinterest, Bing Ads, Reddit, Quora, Amazon Ads, Hotjar, Clarity, Plausible, Matomo, Amplitude, FullStory, Mouseflow, Fathom, Datadog RUM, LogRocket, YouTube, Vimeo, Google Maps, Intercom, Crisp, LiveChat, Tawk.to, Drift, HubSpot, Zendesk, Freshworks, and more.

Whitelisted scripts (e.g., jQuery, Bootstrap, common CDN libraries) are never blocked.

Important: The CookieHug script must be placed in <head> before any third-party scripts. Scripts loaded before CookieHug cannot be retroactively blocked.

Manual Script Tagging

Use data-cookiehug-consent to manually control which scripts require consent. Set the script's type to text/plain to prevent execution until consent is granted.

<!-- Statistics script (external) -->
<script type="text/plain" data-cookiehug-consent="statistics"
  src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX">
</script>

<!-- Marketing script (inline) -->
<script type="text/plain" data-cookiehug-consent="marketing">
  fbq('init', '123456789');
  fbq('track', 'PageView');
</script>

<!-- Preferences script -->
<script type="text/plain" data-cookiehug-consent="preferences"
  src="https://cdn.example.com/chat-widget.js">
</script>

Placeholders for Blocked Elements

When CookieHug blocks an iframe (video, map, social embed, chat widget), it automatically replaces it with a styled placeholder that shows an appropriate icon, displays a message explaining why the content is blocked, and includes a button to grant consent for that specific category.

Using runScripts() in SPAs

For Single Page Applications where content is loaded dynamically, call CookieHug.runScripts() after new content with tagged scripts is added to the DOM:

// After dynamically loading new page content
loadPageContent().then(function() {
  CookieHug.runScripts();
});