---
title: "TikTok Pixel fires before cookie consent on Webflow"
description: "Your Webflow site's TikTok Pixel sends data before visitors answer the cookie banner. Find every copy in custom code, embeds, GTM and apps, then gate it."
updated: "2026-10-23"
url: "https://ispixelworking.com/guides/tiktok.fires_before_consent/webflow"
---

# TikTok Pixel fires before cookie consent on Webflow

Fix guide · Webflow · medium · about 30 min · updated 2026-10-23

For the finding “TikTok Pixel fires before cookie consent” (`tiktok.fires_before_consent`).
Also for: [Any website](https://ispixelworking.com/guides/tiktok.fires_before_consent/generic), [Shopify](https://ispixelworking.com/guides/tiktok.fires_before_consent/shopify), [WordPress](https://ispixelworking.com/guides/tiktok.fires_before_consent/wordpress), [Framer](https://ispixelworking.com/guides/tiktok.fires_before_consent/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](https://ispixelworking.com/guides/tiktok.fires_before_consent/generic) 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:

   ```html
   <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:

   ```html
   <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.

### Does Webflow's cookie consent setting control the TikTok Pixel?

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

- Webflow, TikTok integration (no native TikTok Pixel toggle, manual installation in Head code or GTM): https://webflow.com/integrations/tiktok
- Webflow Help, Custom code in head and body tags (plan requirement, Site settings and Page settings custom code, publish to go live): https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags
- Webflow Help, Custom code embed (Code Embed element, plan requirement, embeds in components and rich text): https://help.webflow.com/hc/en-us/articles/33961332238611-Custom-code-embed
- Webflow Help, Localize page settings (per-locale custom code stops inheriting once edited): https://help.webflow.com/hc/en-us/articles/33961235760531-Localize-page-settings
- Webflow Developers, Working with custom code (scripts added by Apps): https://developers.webflow.com/data/docs/working-with-custom-code
- Webflow Developers, Site tracking and consent management (consent APIs apply only to Analyze and Optimize): https://developers.webflow.com/browser/reference/consent-management
- Webflow Help, Install and use the OneTrust app (Blocked Scripts; scripts in custom code still fire before consent): https://help.webflow.com/hc/en-us/articles/49624805369491-Install-and-use-the-OneTrust-app
- Webflow Help, Integrate Consent Pro for consent management: https://help.webflow.com/hc/en-us/articles/34394790067859-Integrate-Consent-Pro-for-consent-management
- Consent Pro Docs, Async script loading (`type="fs-consent"`, `fs-consent-categories="marketing"`, scripts blocked until consent, released scripts load asynchronously): https://docs.consentpro.com/runtime/script-loading
- Consent Pro Docs, Migration (v2 detects and blocks scripts automatically): https://docs.consentpro.com/webflow/migration
- Consent Pro Docs, Debugger (region simulation): https://docs.consentpro.com/webflow/debugger
- Consent Pro Docs, Google Tag Manager setup (`consent-updated` trigger, additional consent checks): https://docs.consentpro.com/webflow/google-tag-manager
- Finsweet Cookie Consent README (legacy `type="fs-cc"` markup): https://cdn.jsdelivr.net/npm/@finsweet/cookie-consent@1/README.md
- Cookiebot Support, Manual cookie blocking (`data-cookieconsent="marketing"`): https://support.cookiebot.com/hc/en-us/articles/4405978132242-Manual-cookie-blocking
- Webflow Apps, Pixelflow Meta & TikTok Pixel (third-party; installs browser pixels and sends TikTok Events API events): https://webflow.com/apps/detail/pixelflow-fb-conversions-api-multi-pixel
- Webflow Apps, Signal Beam (third-party; TikTok Pixel plus Events API, consent mode): https://webflow.com/apps/detail/signal-beam
- TikTok API for Business, Pixel Cookie consent mode (`ttq.methods`, `holdConsent` before `ttq.load`, queued events sent on `grantConsent`): https://business-api.tiktok.com/portal/docs?id=1795929012554754
- TikTok API for Business, Install Pixel using code (base code with `ttq.load` and `ttq.page`): https://business-api.tiktok.com/portal/docs?id=1739585702922241
- TikTok Business Help Center, Using cookies with TikTok Pixel (`_ttp`, `ttclid`, advertising cookies): https://ads.tiktok.com/resources/help/article/using-cookies-with-tiktok-pixel?lang=en
- TikTok Business Help Center, Get started with Google Tag Manager (set up from Events Manager): https://ads.tiktok.com/resources/help/article/get-started-google-tag-manager?lang=en
- TikTok on GitHub, TikTok Pixel GTM template (no consent fields): https://github.com/tiktok/gtm-template-pixel
- Google Tag Manager Help, Tag Manager consent mode support: https://support.google.com/tagmanager/answer/10718549