Skip to content
Devix Open Source

It actually blocks

Three tags are on this page and none of them has run. Accept, and watch the counters move — and only the ones you allowed.

Live preview
<div class="demo">
  <div class="demo-kv">
    <div><span class="demo-hint">analytics tag</span><br><b id="a">blocked</b></div>
    <div><span class="demo-hint">marketing tag</span><br><b id="m">blocked</b></div>
    <div><span class="demo-hint">needs both</span><br><b id="b">blocked</b></div>
  </div>

  <!-- Inert markup: never fetched, never run. -->
  <script type="text/plain" data-cc="analytics">document.getElementById('a').textContent = 'ran';</script>
  <script type="text/plain" data-cc="marketing">document.getElementById('m').textContent = 'ran';</script>
  <script type="text/plain" data-cc="analytics marketing">document.getElementById('b').textContent = 'ran';</script>

  <p class="demo-hint">An embed, held back until marketing is allowed:</p>
  <iframe id="embed" data-cc="marketing" data-cc-src="https://www.openstreetmap.org/export/embed.html?bbox=55.26%2C25.18%2C55.30%2C25.21" title="A map" class="demo-frame"></iframe>

  <div class="demo-row">
    <button class="demo-btn" id="again">Ask me again</button>
    <a href="#" data-cc-open class="demo-link">Cookie settings</a>
  </div>
  <p class="demo-out" id="out">No decision yet</p>
</div>