Consent

Manually Blocking Trackers Before Consent

Learn how to manually block a tracker when needed using Concord

In most cases, manual intervention is not required thanks to Concord's advanced tracker auto-detection and blocking system. However, if you're encountering a particularly problematic script or want to guarantee a tracker is blocked before consent is given, you can use one of our manual blocking methods.

When to Use Manual Blocking

Use this approach only when:

  • A tracker is executing too early before Concord can intercept it
  • An inline tracker is making a network request you would like to stop prior to auto-blocking
  • You're troubleshooting a script that evades detection
  • You want complete control over when and how a script loads based on consent
  • A script dynamically constructs URLs at runtime (e.g., from configuration variables)

Method 1: HTML Attribute Blocking (For Scripts with Static URLs)

This method works for scripts that have a static src attribute. Concord will restore the src and re-enable the script when consent is granted.

Instructions

To manually block a tracker from running until Concord has processed the page and consent is determined, update the <script> tag using three key modifications:

✅ 1. Add data-concord-modified="blocked"

This tells Concord that the tag was intentionally modified and should be treated as a manually blocked script.

✅ 2. Replace src with data-concord-src

Instead of allowing the browser to fetch the script immediately, this attribute delays loading. Concord will reinsert the real src when appropriate.

✅ 3. Change the type to text/plain

And add: data-concord-type="text/javascript"

This prevents the browser from executing the script immediately. Concord will convert it back to a valid script if consent is granted.

Example: Blocking a HubSpot Tracker

Below is a full example of a manually blocked HubSpot embed script:

<!-- Original script (will load immediately) -->
<script type="text/javascript" src="//js.hs-scripts.com/123456.js"></script>

<!-- Manually blocked version (will wait for consent) -->
<script
  type="text/plain"
  data-concord-type="text/javascript"
  data-concord-src="//js.hs-scripts.com/123456.js"
  data-concord-modified="blocked"
></script>

This will prevent the script from loading or executing until Concord detects and reactivates it, based on user consent.


Method 2: JavaScript API (For Dynamic or Inline Scripts)

Some trackers use inline scripts that dynamically inject other scripts at runtime. These cannot typically be blocked using HTML attributes because:

  • The script URL is constructed dynamically (e.g., from configuration variables)
  • There's no static src for Concord to restore

For these cases, use Concord's JavaScript API to conditionally load scripts based on consent.

API Reference

window.concord.consent.hasConsent(category)

Check if consent has been granted for a specific category.

if (window.concord.consent.hasConsent('marketing')) {
  // User has consented to marketing - safe to load tracker
  loadTracker();
}

Parameters:

  • category (string): The consent category ('marketing', 'analytics', 'functional', etc.)

Returns: boolean - true if consent granted, false otherwise

window.concord.consent.onConsent(category, callback)

Register a callback to execute when consent is granted. If consent is already granted, the callback executes immediately. The callback will only fire once, then the listener is automatically removed.

window.concord.consent.onConsent('marketing', function () {
  // This runs when marketing consent is granted
  loadTracker();
});

Parameters:

  • category (string): The consent category
  • callback (function): Function to execute when consent is granted

Example: Blocking a Dynamic Script Loader

Some trackers configure settings in a variable and then dynamically inject scripts. Here's how to make them consent-aware:

Original script (ignores consent):

<script type="text/javascript">
  var _tracker_config = {
    accountId: '12345',
    host: 'tracking.example.com',
  };

  (function () {
    var loadScript = function () {
      var s = document.createElement('script');
      s.src = '//' + _tracker_config.host + '/tracker.js';
      document.head.appendChild(s);
    };
    window.addEventListener('load', loadScript);
  })();
</script>

Consent-aware version:

<script type="text/javascript">
  // Store configuration (does not load any trackers)
  var _tracker_config = {
    accountId: '12345',
    host: 'tracking.example.com',
  };

  // Loader function - only called when consent is granted
  function loadTracker() {
    if (window._trackerLoaded) return; // Prevent double-loading
    window._trackerLoaded = true;

    var s = document.createElement('script');
    s.src = '//' + _tracker_config.host + '/tracker.js';
    document.head.appendChild(s);
  }

  // Wait for Concord and consent
  if (
    window.concord &&
    window.concord.consent &&
    window.concord.consent.onConsent
  ) {
    window.concord.consent.onConsent('marketing', loadTracker);
  } else {
    // Concord not loaded yet - wait for ready event
    window.addEventListener('concord-ready', function () {
      window.concord.consent.onConsent('marketing', loadTracker);
    });
  }
</script>

Example: Simple Conditional Loading

For simpler cases where you just need to check consent before loading:

<script type="text/javascript">
  function initAnalytics() {
    // Your analytics initialization code here
  }

  // Check consent and load when ready
  window.addEventListener('concord-ready', function () {
    if (window.concord.consent.hasConsent('analytics')) {
      initAnalytics();
    } else {
      window.concord.consent.onConsent('analytics', initAnalytics);
    }
  });
</script>

Which Method Should I Use?

ScenarioRecommended Method
Script has a static src attributeMethod 1: HTML Attributes
Script dynamically builds URLs from configMethod 2: JavaScript API
Inline script that injects other scriptsMethod 2: JavaScript API
Custom tracking code you controlMethod 2: JavaScript API

Best Practices

  • Don't use this for every tracker. Use only for problematic scripts or scripts that require guaranteed pre-consent blocking
  • Concord will automatically handle most common marketing, analytics, and advertising trackers
  • Method 1 (HTML attributes) is fully compatible with async and defer attributes - Concord will restore them when reinserting the script
  • Prevent double-loading when using Method 2 - use a flag variable to ensure your tracker only loads once
  • Always check for window.concord - the API may not be available immediately if your script runs before Concord loads

Events Reference

Concord emits events you can listen to for custom integrations:

EventDescription
concord-loadedFired when the Concord script has loaded
concord-config-readyFired when Concord configuration is loaded
concord-readyFired when Concord has fully initialized and is ready to use
concord-unavailableFired when Concord aborts and is unavailable
concord-consent-state-loadingFired when consent state is being fetched
concord-consent-state-loadedFired when consent state has finished loading
concord-consent-state-changedFired when the user updates their consent preferences

Example Usage

window.addEventListener('concord-ready', function () {
  console.log('Concord is ready');
});
window.addEventListener('concord-consent-state-changed', function () {
  console.log('User updated consent preferences');
});

If you're unsure whether manual blocking is needed for a particular script, contact support and we'll help you evaluate the best approach.