Fix guide · Framer · medium · about 30 min

Meta Pixel fires before cookie consent on Framer

For the finding “Meta Pixel fires before cookie consent”. Not on Framer? See the general guide.

What this means

Your Framer site shows a cookie banner, but the Meta Pixel sent data to Meta while the banner was still waiting for an answer. On Framer this almost always means the pixel is installed somewhere the banner cannot control.

Why it costs you money:

How to confirm it yourself

Our check runs from a browser in the EU. Framer’s Cookie Banner has separate settings for EU visitors and for the rest of the world. It decides which ones to use from the visitor’s browser time zone and language, not from the IP address, so a VPN does not change what you see. To see the EU version, set your computer’s time zone to a European city (or make a European language such as German (Germany) your browser’s first language) before you test.

  1. Open your published site (not the Framer editor preview: custom code does not run in preview) 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.

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: open Data sources, select your pixel, open the Test events tab, enter your site’s URL in the browser events section and click Open website. Watch whether PageView arrives before you accept.

How to fix

On Framer, the reliable pattern is: Framer’s Cookie Banner component + Google Tag Manager, with the Meta Pixel only inside GTM. Framer’s Cookie Banner sends the visitor’s choice to GTM through Google Consent Mode. It does not block scripts that you paste directly into custom code.

  1. Find where the pixel is installed now. Check:
    • Project Settings > Custom Code in Framer. Each piece of custom code is a separate script with its own placement (start or end of <head> or <body>) and its own page selection, so check every script, including ones that only run on selected pages. Look for fbevents.js or fbq(.
    • Code embeds or code components on the canvas that contain pixel code.
    • Plugins and third-party tools that add tracking (for example Pixelary or PixelFlow). Check each tool’s documentation for how it handles consent.
    • Your GTM container, if you have one.
  2. Remove the pixel base code from Framer’s custom code and from any embeds. Anything pasted there loads on its own, regardless of the banner.
  3. Do not paste the GTM snippet into custom code. When you enter a container ID in the Cookie Banner, the banner loads GTM itself, after it has set the default consent state. If a GTM snippet is already in your custom code, remove it: that copy starts GTM before the banner has set any consent state, and it installs the container a second time.
  4. Add Framer’s Cookie Banner component (from Framer’s built-in components), place it inside a shared element that appears on every page (navigation or footer), and enter your container ID (GTM-XXXXXXX) in its GTM ID property. Then open Regions, which has separate settings for EU and World visitors, and check both:
    • Choices: None only shows a notice and grants all consent types automatically, so the pixel fires without a real choice. Accept/Reject or Customizable ask the visitor first. Framer’s defaults are Accept/Reject for the EU and None for the rest of the world.
    • Defaults: the consent that applies before the visitor answers. Marketing should be Denied wherever you need consent.
  5. Add the Meta Pixel as a GTM tag (a Custom HTML tag with Meta’s base code, or a Meta Pixel template from the Community Template Gallery). In the tag’s Advanced Settings > Consent Settings, choose Require additional consent for tag to fire and add ad_storage. The Cookie Banner grants ad_storage, ad_user_data and ad_personalization together when the visitor accepts Marketing, so you can require all three if you prefer.
  6. Make sure the tag fires after consent on the same page, not only on the next page view. See “Meta Pixel does not fire after consent on Framer” if events stop appearing after this change.
  7. Publish GTM and publish the Framer site. Custom code changes only take effect on the published site.

If you use a tracking plugin instead of GTM, check how that plugin decides when to start the pixel and whether it reads the Framer Cookie Banner’s choice. Pixelary is built by the same team as IsPixelWorking; whichever tool you use, the test below tells you whether it respects consent.

Common causes

How to verify the fix

  1. In a private window on the published site (with a European time zone if you are outside the EU): 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