Fix guide · Shopify · medium · about 30 min

TikTok Pixel fires before cookie consent on Shopify

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

What this means

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

On Shopify, pixels under Settings > Customer events (app pixels and custom pixels) follow your customer privacy settings: where consent is required, they run only after the visitor has given the permissions the pixel needs. Code in your theme, Google Tag Manager (GTM) loaded from the theme, and scripts added by app embeds are not controlled by those settings; Shopify says such pixels may need a third-party banner or custom logic to honor consent. TikTok’s standard base code sends a page view as soon as it loads (ttq.load(...) followed by ttq.page()), so a copy outside Shopify’s pixel manager measures every visitor from the first second.

TikTok’s own TikTok app (the sales channel) installs the pixel without theme code, but TikTok’s Shopify help does not say how that pixel handles cookie consent. Check it on your store (step 3 below) instead of assuming.

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 that copy of the pixel are not connected. When this is fixed in a hurry, the usual result is the opposite problem: the pixel stops firing entirely and your TikTok campaigns lose their data.

How to confirm it yourself

Our check runs from a browser in the EU. Shopify shows its cookie banner based on where the visitor is and on the regions set under Settings > Customer privacy (with automated settings, visitors in the EEA and the UK). If you are elsewhere, use a VPN with a European location or ask a colleague in the EU.

  1. Open your store 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 request payload, event is the event name and context.pixel.code is your pixel ID. Requests that only load script files (such as events.js) are not events.
  5. In the same payload, look at the page address the pixel reports (under context, page, url). Shopify documents that custom pixels run in a sandbox frame whose address is not your store page. So if the address is a Shopify sandbox address (it contains /sandbox/), the request came from a custom pixel. Your normal page address means code on the page or an app.

The TikTok Pixel Helper extension and Test Events in TikTok Events Manager (Tools > Events > Data sources > your pixel) show the same from TikTok’s side; see the general guide for those steps.

How to fix

The goal: every copy of the TikTok Pixel either goes through Shopify’s customer privacy settings or is removed.

  1. Find every copy of the pixel. Check:

    • Sales channels > TikTok: whether the app is installed, which data sharing level it uses (Standard, Enhanced or Maximum) and which pixel it is connected to.
    • Settings > Customer events: app pixels (TikTok and other marketing apps; the More options menu next to each one has View customer privacy) and custom pixels (search each one for ttq or your pixel ID).
    • Theme code: go to Online Store, open the menu of your current theme and click Edit code. Open theme.liquid and search for analytics.tiktok.com, ttq.load and GTM-. Check the snippets your theme includes as well.
    • App embeds: Online Store > Edit theme > App embeds icon. Third-party tracking apps often add code here.
    • Your GTM container, if the theme loads one: TikTok Pixel tags and Custom HTML tags containing ttq.

  2. Remove the copies that bypass Shopify’s settings. Delete the TikTok base code from theme.liquid and click Save, remove the TikTok tags from a theme-loaded GTM container, and turn off app embeds that add another TikTok pixel. With the TikTok app connected, a theme copy is redundant anyway: TikTok says the app needs no changes to website code.

  3. Retest, then check the TikTok app’s pixel. Repeat the private-window test. If events still leave before consent with the pixel ID connected in the TikTok app, look for TikTok under Settings > Customer events. Shopify lists only apps that use its Web Pixels API there.

    • If TikTok is listed, View customer privacy shows the permissions it requires. Shopify says the app partner determines these settings, so contact TikTok support with your test result.
    • If it is not listed, Shopify’s pixel manager does not load that pixel, and your privacy settings do not hold it back. Contact TikTok support, or disconnect the app’s pixel and use a custom pixel (step 4). TikTok does not document this screen; Elevar, a third-party tracking vendor, describes it as Sales channels > TikTok > Settings > Data sharing, then Disconnect under Customer Data Sharing.

  4. If you use a custom pixel, open it under Settings > Customer events. In the Customer privacy section, set Permission to Required and select Marketing. Not required means it runs whether or not the visitor has answered the banner. In Shopify’s sandbox, TikTok’s code may not see ttclid in the address or keep ttclid and _ttp on your store’s domain; see TikTok click ID lost on Shopify. The sandbox runs JavaScript only, so remove <script> and <noscript> tags from TikTok’s code, then save. Shopify handles consent here, so do not add ttq.holdConsent() unless the code also calls ttq.grantConsent().

  5. If you need GTM, Shopify recommends running it as a custom pixel; step 4 then applies to the whole container. If GTM stays in theme.liquid, each TikTok tag needs Advanced Settings > Consent Settings > Require additional consent for tag to fire with ad_storage (TikTok’s template has no consent fields), and your banner must send Google consent updates to GTM. Check this in GTM’s Preview mode.

  6. Check Settings > Customer privacy. With automated settings on, Shopify shows its banner to visitors in the EEA and the UK when those are among your markets. If you chose regions yourself, make sure every region where you need consent is selected.

  7. If you use a consent app instead of Shopify’s banner, check that it is integrated with Shopify’s Customer Privacy API (see the app’s documentation). Shopify’s pixels learn about the visitor’s choice only through that API.

  8. For code that must stay in the theme (a developer task), combine TikTok’s consent mode with Shopify’s Customer Privacy API. Add "holdConsent", "revokeConsent", "grantConsent" to the ttq.methods list in the base code, then:

    ttq.holdConsent();               // before ttq.load
ttq.load('<YOUR PIXEL ID>');
ttq.page();                      // queued until consent

window.Shopify.loadFeatures([{ name: 'consent-tracking-api', version: '0.2' }], (error) => {
  if (error) return;
  const privacy = window.Shopify.customerPrivacy;
  if (privacy.marketingAllowed()) ttq.grantConsent();
  else if (privacy.currentVisitorConsent().marketing === 'no') ttq.revokeConsent();
});

document.addEventListener('visitorConsentCollected', (event) => {
  if (event.detail.marketingAllowed) ttq.grantConsent();
  else ttq.revokeConsent();
});

    grantConsent() sends the queued page view, so the landing page is not lost. Do not call revokeConsent() before the visitor answers: it drops the queue.

Common causes

  • TikTok base code is still in theme.liquid, added by hand or by an agency before or next to the TikTok app.
  • GTM is loaded from theme.liquid, and its TikTok tags have no consent requirement.
  • A custom pixel has Permission set to Not required.
  • A third-party app adds its own TikTok pixel through an app embed and does not wait for consent.
  • A consent app is not connected to Shopify’s Customer Privacy API, or the banner regions leave out some countries.
  • Theme code calls ttq.holdConsent() after ttq.load() and ttq.page(), so the first page view has already left.

How to verify the fix

  1. In a private window with a European location: no analytics.tiktok.com/api/v2/pixel requests before you answer the banner, a page view request right after you click “Accept” (on the same page), and no page view or conversion events after “Reject” in a fresh private window. If Shopify’s privacy settings, your consent app or GTM hold back the pixel, there should also be no _ttp or ttclid cookies before you answer. TikTok does not document whether its consent mode (step 8) holds back cookies, so with that route judge by the event requests.
  2. For a custom pixel, Shopify’s Pixel Helper (click Test on the pixel under Settings > Customer events) shows “Pixel is awaiting consent” until you accept.
  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

TikTok’s Shopify help articles do not mention cookie consent or Shopify’s Customer Privacy API. Shopify says app pixels listed under Customer events honor the visitor’s consent choices. Check whether TikTok is listed there, and use the private-window test above to see what the pixel does on your store.

Sources

Guides for your consent tool