Fix guide · Webflow · medium · about 30 min

TikTok Pixel fires before cookie consent on Webflow

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

What this means

Your Webflow site shows a cookie banner, but the TikTok Pixel sent data to TikTok while the banner was still waiting for an answer.

Webflow has no built-in TikTok integration: there is no Pixel ID field for TikTok in Webflow’s settings, so the pixel is always added by hand (custom code or a Code Embed), through Google Tag Manager (GTM), or by a third-party App. Webflow also has no cookie banner for third-party scripts; its own consent settings only cover Webflow Analyze and Optimize. The banner comes from a separate consent tool, and that tool only controls the scripts it knows about. TikTok’s standard base code ends with ttq.load(...) and ttq.page(), so a copy the tool does not control sends a page view the moment the page loads.

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, 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. 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 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 and context.pixel.code is your pixel ID.
  5. Under Application > Cookies (Chrome) or Storage > Cookies (Firefox), look for _ttp and ttclid. If your consent tool or GTM blocks the pixel (routes A and C below), these cookies before you answer the banner mean the same thing. TikTok does not document whether its consent mode (route B) also holds back cookies, so with that route judge by the event requests.

The TikTok Pixel Helper extension and Test Events in TikTok Events Manager show it too; the general guide has the details.

How to fix

  1. Find every place the pixel is installed. Search the published page source for analytics.tiktok.com and ttq.load, then check:

    • Site settings > Custom code: the Head code and Footer code sections, and 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 used on every page, and code in Rich text or CMS items.
    • Your GTM container: TikTok Pixel tags and Custom HTML tags containing ttq.
    • Third-party Apps from the Webflow Apps marketplace that add TikTok tracking. Pixelflow’s and Signal Beam’s listings, for example, say they run the TikTok browser pixel as well as the Events API. Check in the App how it connects to your banner.

    The fix only works if every copy goes through your consent setup.

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

    A. Your consent tool blocks the base code. Paste TikTok’s base code into Site settings > Custom code > Head code, below your consent tool’s script, and let the tool hold it back:

    • 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 TikTok is listed under Marketing, and publish. If you turned on Load Script Async, mark the script yourself, as below.
    • OneTrust App for Webflow: paste the base code into the App’s Blocked Scripts section (Manage blocked scripts), not into Webflow’s custom code. Webflow’s OneTrust guide says scripts placed directly in Webflow’s custom code keep firing before consent.
    • Cookiebot (manual blocking): type="text/plain" and data-cookieconsent="marketing".
    • Others: follow the tool’s guide to blocking scripts before consent, using its marketing or advertising category.

    For Consent Pro, a marked script looks like this:

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

    type="fs-cc" with fs-cc-categories is the markup of Finsweet’s older Cookie Consent library and only works while that library is on the site.

    B. TikTok’s consent mode. Keep the base code unmarked in Head code, but change it in two places: add "holdConsent", "revokeConsent", "grantConsent" to the ttq.methods list, and add ttq.holdConsent(); on the line before ttq.load(...). TikTok then queues events instead of sending them. Release them with a small script that your consent tool runs only after marketing consent, in Footer code. With Consent Pro:

    <script type="fs-consent" fs-consent-categories="marketing">
  window.ttq && ttq.grantConsent();
</script>

    With Consent Pro, route A is the safer choice. Version 2 detects and blocks scripts automatically and loads released scripts asynchronously, so it may block the unmarked base code too, and the grantConsent() script can run before ttq exists. If you use route B with Consent Pro, check after the scan that the base code is not blocked, and keep the window.ttq && guard.

    With Cookiebot, use type="text/plain" data-cookieconsent="marketing" instead. grantConsent() sends the queued events, including the first page view, so nothing is lost. Without it, the pixel never sends anything (see “TikTok Pixel does not fire after consent”).

    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 through GTM; TikTok’s setup flow in Events Manager creates the tags for you. TikTok’s TikTok Pixel template has no consent fields of its own. In each TikTok tag, including the setup tag that loads the base code, open 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 does, and its guide asks you to fire marketing and non-Google tags on its consent-updated Custom Event trigger.

  3. Load the consent tool’s script first, at the top of Head code, above any TikTok code.

  4. Publish to your custom domain, not only to the staging domain. Custom code changes do not go live until you publish.

Common causes

  • The base code was pasted into Head code without the consent tool’s attributes, and the banner was added later.
  • OneTrust is installed, but the pixel sits in Webflow’s custom code instead of the App’s Blocked Scripts.
  • A second copy in a page’s custom code, a Code Embed, a component 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.
  • ttq.holdConsent() comes after ttq.load() and ttq.page(), so the first page view has already left.
  • The pixel is in GTM, but the TikTok tags have 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 analytics.tiktok.com/api/v2/pixel requests before you answer the banner, and, with routes A and C, no _ttp or ttclid cookies yet.
  2. Click “Accept”: a page view request leaves within a few seconds, on the same page. In a fresh private window, click “Reject”: no page view or conversion events.
  3. 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

Does Webflow have a TikTok Pixel integration?

No. Webflow’s own integration page says there is no native toggle for the TikTok Pixel; you add the base code as custom code or through GTM. Custom code and Code Embeds need a Core, Growth, Agency or Freelancer Workspace, or an active Site plan.

No. Webflow’s consent settings and APIs apply to Webflow Analyze and Optimize. Third-party scripts such as the TikTok Pixel need a consent tool, TikTok’s consent commands or GTM consent settings.

Sources

Guides for your consent tool