Script Blocking

SmartConsent is block-first — scripts never execute until their category is consented to. Instead of adding conditional logic around every tag, you add one attribute: data-consent-category. SmartConsent does the rest.

Two additional safeguards run continuously: a MutationObserver catches scripts injected after page load (a common pattern in SPAs), and a cookie sweep removes non-essential cookies when a visitor changes their mind.

Change the script's type to text/plain and add the category. SmartConsent flips it back to text/javascript after the visitor consents.

<!-- Google Analytics / GA4 -->
<script
  type="text/plain"
  data-consent-category="analytics"
  src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
></script>

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

<!-- No attribute needed; essential scripts always execute -->
<script>
  console.log('Page view recorded');
</script>

• essential — Always runs. No attribute needed, no consent required. Use for session cookies, CSRF tokens, load-balancer affinity.
• analytics — Runs after analytics opt-in. Use for GA4, Plausible, Mixpanel, Hotjar, Microsoft Clarity.
• functional — Runs after functional opt-in. Use for Intercom, LiveChat, Drift, theme switchers, saved filter state.
• marketing — Runs after marketing opt-in. Use for Meta Pixel, Google Ads, LinkedIn Insight Tag, TikTok Pixel.

SmartConsent's MutationObserver watches the document for <script> elements added after the initial page load. If a script is added with a data-consent-category attribute, it is gated automatically.

iframes and tracking pixels are gated the same way as scripts: add data-consent-category to the element. SmartConsent swaps the src attribute in and out as consent changes.

<!-- YouTube embed — gated to marketing -->
<iframe
  data-consent-category="marketing"
  data-src="https://www.youtube.com/embed/VIDEO_ID"
></iframe>

<!-- Tracking pixel -->
<img
  data-consent-category="marketing"
  data-src="https://track.example.com/pixel?id=abc"
  width="1"
  height="1"
  alt=""
/>

For edge cases where declarative attributes aren't enough, use the programmatic API. Every method returns synchronously and is safe to call before, during, or after banner render.

// Check current consent
window.smartConsent.hasConsent("analytics");  // boolean

// Open the preference center
window.smartConsent.open();

// Subscribe to changes
window.smartConsent.on("change", (state) => {
  if (state.categories.analytics) {
    initAnalytics();
  }
});