Fix guide · Framer · medium · about 30 min

TikTok Pixel not firing after consent on Framer: how to fix

For the finding “TikTok Pixel does not fire after consent”. Also for: Any website, Shopify, WordPress, Webflow.

What this means

The TikTok Pixel script is on your Framer site, but after cookies were accepted, no events were sent to TikTok. As far as TikTok can tell, this page has no visitors.

Why it costs you money:

  • TikTok cannot see page views or conversions from this page, so campaigns optimize without data and reported results are too low.
  • Audiences built from website visitors stop growing.

How sure we are: if our checker found and accepted your cookie banner, this is reported as critical. If we did not find a banner we could operate, it is reported as high: the pixel may be waiting for a consent signal from a banner we did not recognize. Test it yourself before changing anything.

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 decides which to use from the visitor’s browser time zone and language, not from the IP address. A VPN does not change it; to see the EU version, set your computer’s time zone to a European city before you test.

  1. Open your published site (Framer does not run custom code in the canvas preview) in a private (incognito) window.
  2. Open developer tools (F12), go to the Network tab and filter by analytics.tiktok.com/api.
  3. Click Accept on the cookie banner and wait about 5 seconds. You should see a request to analytics.tiktok.com/api/v2/pixel whose payload has "event": "Pageview". If nothing appears, the pixel does not fire after consent.
  4. Click to another page. If events only appear now, the pixel starts one page too late and you lose the first page of every visit, usually your ad’s landing page.
  5. Look at the Console tab. An error such as ttq.holdConsent is not a function points to the consent commands (step 6 below); a Content Security Policy error points to step 7.

The TikTok Pixel Helper extension, Test Events in TikTok Events Manager and TikTok’s pixel_debug cookie work as described in the general guide.

How to fix

On a typical Framer setup, the chain is: Framer’s Cookie Banner component, then Google Consent Mode in Google Tag Manager (GTM), then the TikTok tags in GTM. Check each link.

  1. Check the Cookie Banner component.

    • Its GTM ID property must contain the same container that holds your TikTok tags. If you installed the pixel from TikTok Events Manager (Partner Platform > Google Tag Manager), that is the container you picked there.
    • The component must be on every page, usually inside the navigation or footer. If it only exists on the home page, visitors who land elsewhere never send a consent update.
    • Under Regions, check that Marketing is part of what the visitor accepts. In the banner component’s code, Marketing maps to ad_storage, ad_user_data and ad_personalization.
    • Reload after clicking Accept: the banner should not come back.

  2. Check that GTM loads. In the Network tab, filter by googletagmanager.com. You should see gtm.js?id=GTM-... with your container ID. In our tests, the banner loaded GTM itself when GTM ID was filled in, so you do not need a GTM snippet in Site Settings > Code. If there is no gtm.js request, the GTM ID is empty or wrong, or the banner is not on this page.

  3. Use GTM Preview mode. Click Preview in GTM and connect to your published Framer URL (Framer suggests the Tag Assistant Companion extension if Preview does not connect). Click Accept on the banner and check:

    • that a consent update appears with ad_storage set to granted, followed by an event named cookie_consent_update (the event the banner sent in our tests);
    • whether each TikTok tag fired. Blocked by consent means the update did not arrive or does not grant what the tag requires. Not fired means its trigger never ran.

  4. Fix the triggers. This is how the banner talks to GTM, from our tests and the banner component’s code:

    • First visit: the banner sets the default consent (usually denied), then loads GTM. When the visitor clicks Accept, it sends a consent update and pushes the data layer event cookie_consent_update.
    • Later visits: the stored choice is applied as the default before GTM loads, and no cookie_consent_update event is sent.

    A TikTok tag with only a page view or “All Pages” trigger is blocked on the first visit and never runs again on that page. Give the TikTok base code tag (named TT-<pixel code>-Web-Tag-Pixel_Setup if TikTok’s setup created it) and your page-load event tags two triggers: a Custom Event trigger for cookie_consent_update and the page view trigger they already have. Set the base code tag to fire Once per page. The event tags only call the pixel, they do not load it, so the base code tag must run on the consent trigger too. Framer switches pages without a full reload; once the pixel has started, it measures a page view on each address change by itself.

  5. Check the tags’ consent settings. In Advanced Settings > Consent Settings, each TikTok tag should require ad_storage (plus ad_user_data or ad_personalization if you use them). A tag that requires a consent type the banner never grants never fires.

  6. If you use TikTok’s consent commands (ttq.holdConsent() in base code pasted into custom code):

    • add "holdConsent", "revokeConsent" and "grantConsent" to the ttq.methods list in the base code. Without them, ttq.holdConsent() throws an error and the pixel never starts;
    • something must call ttq.grantConsent() after Accept, and again on every page load for returning visitors. Framer documents no browser event for the banner’s choice outside GTM, so use a GTM Custom HTML tag that requires ad_storage, with the same two triggers as in step 4.

  7. Check for a Content Security Policy. Framer lets you add one as a header (Site Settings > Hosting > Headers, on plans with Advanced Hosting) or as a meta tag in custom code. If your site has one, it must allow TikTok’s domains analytics.tiktok.com, analytics-ipv6.tiktokw.us and ads.tiktok.com.

  8. Check where the base code runs. If the pixel is in custom code rather than GTM, open its entry in Site Settings > Code: under Pages, a selection other than All leaves the other pages silent. Code in one page’s own Custom Code section only runs on that page.

  9. If a plugin installs the pixel. PixelFlow (a third-party plugin) says it holds its TikTok Pixel until marketing consent, and its Framer guide loads PixelFlow through GTM behind Framer’s banner. It warns that without a GTM trigger for consent, PixelFlow only loads after the visitor consents and reloads the page.

  10. Check the pixel ID. If events leave but never show up in Events Manager, compare context.pixel.code in the payload with your pixel.

  11. Publish both the GTM container and the Framer site.

Common causes

  • The Cookie Banner points to a different GTM container from the one TikTok’s setup wrote its tags into.
  • The TikTok tags have a page view trigger only, with no trigger for cookie_consent_update.
  • The event tags were given a consent trigger, but the base code tag was not.
  • The Cookie Banner component is not on every page.
  • ttq.holdConsent() was added to pasted base code without adding the consent methods to ttq.methods, or nothing calls ttq.grantConsent().
  • GTM changes were saved but not published, or the Framer site was not republished.

How to verify the fix

  1. In a fresh private window on the published site: no TikTok events before Accept, and a page view request within a few seconds after Accept, on the same page.
  2. Reload the page: the page view leaves once on load, without clicking anything.
  3. In TikTok Events Manager, Test Events shows the page view (the Overview tab is not real time).
  4. Re-run the check on IsPixelWorking. The issue should be gone, and “TikTok Pixel fires before cookie consent” should not appear in its place.

Sources

Guides for your consent tool