Fix guide · Framer · medium · about 30 min

TikTok Pixel fires before consent on Framer: how to fix

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

What this means

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

TikTok’s standard base code sends a page view as soon as it loads: it ends with ttq.load('<PIXEL ID>'); ttq.page();. Framer’s Cookie Banner component works through Google Tag Manager (GTM) and Google Consent Mode. Framer’s documentation does not say that it holds back scripts you paste into custom code, so a pasted pixel runs on its own.

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. TikTok asks advertisers to provide notices and obtain consents as required by applicable laws. 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, the usual result is the opposite problem: the pixel stops firing and your TikTok campaigns lose their data.

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. In the banner component’s code, it picks one 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 in a private (incognito) window. Framer does not run custom code in the canvas preview.
  2. Open developer tools (F12), go to the Network tab and type analytics.tiktok.com/api into the filter box.
  3. Reload the page. Do not click the cookie banner.
  4. If requests to analytics.tiktok.com/api/v2/pixel appear while the banner is still showing, the pixel fires before consent. In the payload, event is the event name (for example Pageview) and context.pixel.code is your pixel ID. Requests that only load the library (events.js and other script files) are not events.
  5. Open the Application tab (Chrome) or Storage tab (Firefox), then Cookies for your domain. If _ttp, ttclid or ttcsid_… appear before you answer the banner while GTM or your consent tool is supposed to hold back the pixel, the pixel ran without consent. TikTok does not document whether its own consent mode (below) also holds back cookies, so with that route judge by the event requests.

TikTok Pixel Helper and Test Events in Events Manager work as in the general guide.

How to fix

TikTok does not list Framer among its partner integrations, so on a Framer site the pixel comes from pasted code, from GTM or from a third-party plugin. The pattern Framer documents is: Framer’s Cookie Banner component + GTM, with the TikTok Pixel only inside GTM. Framer says the banner lets you trigger third-party integrations or custom scripts through GTM once consent has been given.

  1. Find every copy of the pixel. Search the published page’s source for analytics.tiktok.com and ttq.load, then check:
    • Site Settings > Code in Framer (older Framer articles call it Project Settings > Custom Code). Each entry has its own Placement, Pages and Run settings, so open every entry, including ones that only run on some pages.
    • The Custom Code section in each page’s own settings.
    • Embeds and code components on the canvas.
    • Plugins. Framer lets plugins add their own scripts to your site’s custom code.
    • Your GTM container.
  2. Remove the TikTok base code from custom code and embeds. Anything pasted there loads regardless of the banner.
  3. Do not paste the GTM snippet into custom code. In our tests, when you enter a container ID in the Cookie Banner, the banner loads GTM itself, after it has set the default consent state. A pasted snippet starts GTM before any consent state is set and installs the container a second time.
  4. Set up the Cookie Banner. Insert Framer’s Cookie Banner component, 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 EU and World settings, and check both:
    • Choices: None only shows a notice; in the banner component’s code, it grants all consent types automatically. Accept/Reject or Customizable ask the visitor first. In the same code, the defaults are Accept/Reject for the EU and None for the rest of the world.
    • Defaults: Marketing should be Denied wherever you need consent.
  5. Install the TikTok Pixel in GTM. TikTok recommends doing this from Events Manager: select your pixel, go to Partner Platform, click Choose Partner, pick Google Tag Manager and choose the same container you entered in the banner. TikTok then adds its tags, triggers and variables to the container, including a base code tag named TT-<pixel code>-Web-Tag-Pixel_Setup.
  6. Give every TikTok tag a consent requirement. TikTok’s template has no consent fields, and Consent Mode only adjusts Google’s own tags automatically. In each TikTok tag, open Advanced Settings > Consent Settings, choose Require additional consent for tag to fire and add ad_storage. In the banner component’s code, accepting Marketing grants ad_storage, ad_user_data and ad_personalization together, so you can require all three if you prefer.
  7. Make the tags fire after consent on the same page. A tag with only a page view trigger is blocked on the first visit and never runs again on that page. Add a Custom Event trigger for cookie_consent_update, the event the banner pushed in our tests when the visitor accepted. See “TikTok Pixel does not fire after consent” for the full trigger setup.
  8. Publish the GTM container and the Framer site.

TikTok’s own consent mode. ttq.holdConsent() and ttq.grantConsent() need code that knows the visitor’s choice. Framer documents one way to read the Cookie Banner’s choice: Google Consent Mode in GTM. It does not document a browser event that your custom code could listen to. If you use TikTok’s consent mode with the base code in custom code, call ttq.grantConsent() from a GTM Custom HTML tag that requires ad_storage. Give that tag two triggers: a Custom Event trigger for cookie_consent_update, and a page view trigger for returning visitors who accepted earlier (see “TikTok Pixel does not fire after consent”, step 6). Add the consent methods to ttq.methods as the general guide describes. TikTok says held events are queued; it does not say whether cookies are set meanwhile, so check this setup by the event requests, not by cookies.

A plugin or another consent tool.

  • PixelFlow (a third-party plugin) says it does not load its TikTok Pixel until marketing consent is granted, unless you turn off its consent mode. It reads consent from the tools it names and from banners that send Google Consent Mode v2; Framer’s Cookie Banner is not named, and PixelFlow’s own Framer guide loads it through GTM behind the banner. Pixels you installed yourself stay outside its control.
  • With a third-party consent tool instead of Framer’s banner, load its script before the TikTok code and mark the base code with the tool’s blocking markup (for Cookiebot, type="text/plain" with data-cookieconsent="marketing").

Common causes

  • The TikTok base code was pasted into Site Settings > Code, and the Cookie Banner was added later. The banner cannot block it.
  • The TikTok tags in GTM have no consent requirement.
  • A plugin or marketplace component injects its own TikTok Pixel that does not wait for the banner.
  • Choices is set to None for the visitor’s region, or Marketing is Granted under Defaults.
  • The pixel is installed twice (custom code and GTM): fixing the GTM copy leaves the custom code copy firing.

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 analytics.tiktok.com/api/v2/pixel requests before you answer the banner, and, if GTM or your consent tool holds back the pixel, no _ttp or ttclid cookies yet.
  2. Click “Accept”: a page view request leaves within a few seconds, on the same page.
  3. In a fresh private window, click “Reject”: no page view or conversion events.
  4. Re-run the check on IsPixelWorking. The issue should be gone, and “TikTok Pixel does not fire after consent” should not appear in its place.

Questions people ask

Not by itself. Framer describes the banner as a consent system that runs through Google Tag Manager and Google Consent Mode. Its documentation does not say it blocks scripts in custom code, so put the TikTok Pixel in GTM with a consent requirement.

Sources

Guides for your consent tool