Fix guide · Webflow · medium · about 30 min

Meta Pixel fires before cookie consent on Webflow

For the finding “Meta Pixel fires before cookie consent”. Also for: Any website, Shopify, WordPress, Framer.

What this means

Your Webflow site shows a cookie banner, but the Meta Pixel (still often called the Facebook Pixel) sent data to Meta while the banner was still waiting for an answer. Webflow has no built-in cookie banner for third-party scripts (its own consent settings only cover Webflow Analyze and Optimize), so the banner comes from a separate consent tool. That tool only controls the scripts it knows about. A pixel installed anywhere else runs straight away.

Why it costs you money:

  • If you advertise to people in the EU, sending marketing data before consent is a legal risk you probably did not intend to take. We report the technical behaviour only; we cannot tell you whether your setup is compliant.
  • The banner and the pixel are not connected. When this is fixed in a hurry later, the usual result is the opposite problem: the pixel stops firing entirely and your ads optimize blind.

How to confirm it yourself

Our check runs from a browser in the EU. Consent tools on Webflow can show different banners per region, so if you are outside the EU, use a VPN or ask a colleague there. Consent Pro’s debugger (Test it on live website in the app) can also simulate an EU visitor.

  1. Open your published site on the domain your ads link to (not only the webflow.io staging address) in a private (incognito) window.
  2. Open developer tools (F12), go to the Network tab and type facebook.com/tr into the filter box.
  3. Reload the page. Do not click the cookie banner.
  4. If facebook.com/tr requests appear while the banner is still showing, the pixel fires before consent. In Chrome they may show the type ping (the pixel uses sendBeacon). In the request payload, id is your pixel ID and ev is the event name. If the request also contains a=plwebflow, it comes from Webflow’s built-in Meta Pixel integration.

You can also use Meta Ads Data Advisor (Meta’s Chrome extension, formerly Meta Pixel Helper), or the Test events tool in Meta Events Manager (Data sources > your pixel > Test events, then Open website). Watch whether PageView arrives before you accept.

How to fix

  1. Find every place the pixel is installed. On Webflow, check:

    • Site settings > Apps & Integrations > Meta Pixel. If a Pixel ID is entered here, Webflow adds the base code to every page itself.
    • Site settings > Custom code: the Head code and Footer code sections, and any code added there by installed Apps.
    • Page settings > Custom code (Inside <head> tag and Before </body> tag) of individual pages, including CMS template pages. With Webflow Localization, check every locale: a locale whose page code was edited no longer follows the primary locale.
    • Code Embed elements on the canvas, including embeds inside components that appear on every page, and code blocks in Rich text or CMS items.
    • Your Google Tag Manager (GTM) container.

    Search the published page source for fbevents.js and fbq(. The fix only works if every copy goes through your consent setup.

  2. Do not rely on blocking Webflow’s built-in integration. Webflow places the integration’s code in the <head> above your own Head code, so even a consent tool placed first in Head code loads after it, and you cannot add consent attributes to code Webflow generates. Either remove the Pixel ID (and use option A or C below), or use option B.

  3. Pick one way to gate the pixel and remove the other copies.

    A. Your consent tool blocks the pixel script. Paste Meta’s base code into Site settings > Custom code > Head code, below your consent tool’s script, and mark it the way your tool expects:

    • Consent Pro (Finsweet’s Webflow app): version 2 scans your site and blocks detected trackers automatically. After adding or changing the pixel, scan again, check that it is listed under Marketing, and publish. If you turned on Load Script Async, mark the script yourself with type="fs-consent" and fs-consent-categories="marketing".
    • Finsweet Cookie Consent (the older free fs-cc.js library): type="fs-cc" and fs-cc-categories="marketing".
    • Cookiebot (manual blocking): type="text/plain" and data-cookieconsent="marketing".
    • OneTrust app for Webflow: paste the pixel into the app’s Blocked Scripts section (Manage blocked scripts), not into Webflow’s custom code.
    • CookieYes and others: follow the tool’s guide to blocking scripts before consent, using its advertising or marketing category.

    For Consent Pro, a marked script looks like this:

    <script type="fs-consent" fs-consent-categories="marketing">
  /* Meta Pixel base code from Events Manager, unchanged */
</script>

    Remove the <noscript> part of Meta’s snippet: consent tools cannot control it.

    B. Keep the built-in integration with “Delay for cookie consent”. Switch Delay for cookie consent on in Apps & Integrations > Meta Pixel. Webflow then adds fbq('consent', 'revoke') before the pixel starts, which Meta documents as pausing pixel sends until consent is granted. Your consent tool must then run fbq('consent', 'grant') after the visitor accepts marketing cookies. With Consent Pro, add this to Footer code (other tools: use their attributes):

    <script type="fs-consent" fs-consent-categories="marketing">
  fbq('consent', 'grant');
</script>

    Without the grant, the pixel never sends anything (see “Meta Pixel not firing after cookie consent on Webflow”).

    C. Google Tag Manager. Put the GTM snippet in Head code (do not mark the GTM snippet itself for consent) and install the pixel only as a GTM tag. In the tag’s Advanced Settings > Consent Settings, choose Require additional consent for tag to fire and add ad_storage. This only works if your consent tool sends Google Consent Mode updates to GTM; Consent Pro’s GTM template and the Cookiebot CMP template both do. Consent Pro’s GTM guide also asks you to fire marketing tags on its consent-updated event.

  4. Load the consent tool’s script first, at the top of Head code, above any pixel code you marked.

  5. Publish to your custom domain, not only to the staging domain.

Common causes

  • A Pixel ID is entered in Apps & Integrations > Meta Pixel with Delay for cookie consent off.
  • The base code was pasted into Head code without the consent tool’s attributes, and the banner was added later.
  • A second copy in a page’s custom code, a Code Embed or a locale version of the page was never gated.
  • Consent Pro: the pixel was added after the last scan or the site was not republished, or Load Script Async is on and the script was not marked by hand.
  • The pixel is in GTM, but the Meta tag has no consent requirement. Consent Mode only controls Google tags automatically.

How to verify the fix

  1. In a private window on the published custom domain (from the EU or through a VPN): no facebook.com/tr requests before you answer the banner, requests right after you click “Accept”, and none after “Reject”.
  2. Re-run the check on IsPixelWorking. The issue should be gone, and “Meta Pixel does not fire after consent” should not appear in its place.

Sources