DEV Community

Cover image for Your cookie banner might be decorative: how to check what loads before consent
PrivacyFixed
PrivacyFixed

Posted on

Your cookie banner might be decorative: how to check what loads before consent

Most websites now show a cookie banner. Far fewer check what the page does before anyone clicks it.

A common pattern: the banner appears, the visitor hasn't touched it yet, and Google Analytics, the Meta Pixel and a session-recording script have already loaded and sent their first requests. The banner is there, but it isn't controlling anything.

In the EU and UK, non-essential trackers are supposed to wait for consent, so this is a real problem for the site owner, and most of them don't know it's happening. Here's how to check your own site in about five minutes, why it usually happens, and how to fix it.

(General information, not legal advice.)

Check it yourself with Chrome DevTools

  1. Open a new Incognito window. You want a first-time visitor: no cookies, no earlier consent choice.
  2. Open DevTools (F12) and go to the Network tab before you load the page.
  3. Tick Preserve log.
  4. Load your site and don't click anything on the banner.
  5. In the filter box, type -domain:*yoursite.com (with your own domain; the * keeps both yoursite.com and www.yoursite.com out). Now the list shows only requests to other companies.

Everything left in that list happened before consent. Look for hosts like:

  • google-analytics.com, googletagmanager.com (Google Analytics, Google tag)
  • connect.facebook.net, facebook.com/tr (Meta Pixel)
  • static.hotjar.com, clarity.ms (session recording)
  • analytics.tiktok.com, bat.bing.com (ad pixels)

Then check cookies: Application → Cookies. Anything like _ga, _fbp or _hjSession set before you clicked is a tracker that didn't wait.

Finally, click Reject and keep watching the Network tab while you click through two or three pages. Requests to the same trackers after a Reject are the worst case: the visitor said no, and the site kept going.

Why it happens

In my experience it's rarely deliberate. The usual causes:

  • A hard-coded snippet. Someone pasted the Google tag or Meta Pixel into the theme header years ago, and the banner added later has no control over it.
  • A plugin or app that loads its own pixel. Many e-commerce and marketing plugins add tracking scripts on their own, outside the banner's control.
  • Tag Manager triggers. Tags set to fire on "All Pages" run whatever the banner says, unless the triggers or Consent Mode settings are set up for consent.
  • Pages the banner setup never covered. The home page is fine, but checkout, a landing page or an old template loads trackers directly.

The fix, in principle

A tracker that needs consent shouldn't be able to run until consent exists. The standard way is to make the script inert, then switch it on when the visitor agrees:

<!-- Inert: the browser won't run a script with an unknown type -->
<script type="text/plain" data-consent="marketing"
        src="https://connect.facebook.net/en_US/fbevents.js"></script>

<script>
  // Call this from your banner's "Accept" handler.
  function grantConsent(category) {
    document
      .querySelectorAll('script[type="text/plain"][data-consent="' + category + '"]')
      .forEach(function (inert) {
        var live = document.createElement("script");
        if (inert.src) live.src = inert.src;
        else live.textContent = inert.textContent;
        inert.replaceWith(live);
      });
  }
</script>
Enter fullscreen mode Exit fullscreen mode

Most consent tools use a version of this pattern (their own attribute names), and on WordPress, Shopify, Wix and Squarespace it's normally a setting rather than code. Two things to watch:

  • Order matters. If an inline snippet calls a library (fbq(...), gtag(...)), the library's queue stub has to exist first. That's why Google's own snippet defines gtag() before the library loads.
  • Google Consent Mode is different. In its advanced mode, Google's tags load before consent and send cookieless pings by design. Decide which mode you're using on purpose.

After any fix, run the DevTools check again in a fresh Incognito window. A fix you haven't re-checked is a guess.

Doing this at scale

Checking one page by hand is fine. Checking every page, after every plugin update, is where it breaks down, and that's why I built PrivacyFixed. It loads a site in a real browser as a first-time visitor, lists every outside company contacted before the banner is answered, checks whether a Reject is respected, and gives step-by-step fixes for WordPress, Shopify, Wix and Squarespace. Three free scans a day, no sign-up.

But you don't need it to start. Open Incognito, open the Network tab, and look. Most people are surprised by what's already there.

What's the worst thing you've found loading before consent? I'd like to hear it in the comments.

Top comments (0)