Fix guide · Webflow · medium · about 30 min

TikTok click ID (ttclid) lost on Webflow

For the finding “Click ID from TikTok ads is not stored”. Also for: Any website, Shopify, WordPress, Framer.

What this means

When someone clicks a TikTok ad, TikTok adds a click ID to the landing page address: ?ttclid=.... The TikTok Pixel on your Webflow site should read it and store it in a first-party cookie that is also named ttclid, so that a lead or purchase later can be tied back to the ad click. On your site, the click ID did not make it into that cookie, or was not sent with the pixel’s events.

Why it costs you money:

  • TikTok has a weaker link between ad clicks and conversions, which lowers attribution and reported results.
  • Campaigns optimize on less complete data, so you may pay more per result.
  • If you send server events through the TikTok Events API, they usually take the click ID from the same cookie, so they lose it too.

How to confirm it yourself

Our check opens your page in a browser in the EU as if arriving from a TikTok ad, with a test click ID in the URL, accepts the cookie banner and then looks for the click ID. If our report shows a redirect chain, start there: it often shows exactly where the click ID was dropped.

  1. Open a private (incognito) window, open developer tools (F12) on Network, and tick Preserve log.
  2. Open the exact URL your ads use, with a made-up click ID added: https://yourdomain.com/landing?ttclid=test123. (This sends a normal page view to your own pixel. It does not create an ad click.)
  3. If the first request is a redirect (301, 302, 307, 308), check its Location header. Does the new address still contain ttclid=test123?
  4. Accept the cookie banner, wait a few seconds, then go to Application > Cookies (Chrome) or Storage > Cookies (Firefox) and look for ttclid. It should hold test123. You should also see _ttp, the pixel’s browser ID.

How to fix

Work through the chain: the link must arrive with ttclid, the pixel must run on that page, and it must be allowed to write first-party cookies.

  1. Point your ads at the final address. Webflow redirects your other connected domains (for example the version without www) to the default domain, set in Site settings > Publishing > Production with Make default. In our tests on Webflow-hosted sites, Webflow also redirected http to https and removed a trailing slash from page addresses, and all of these redirects kept the query string. Still use the exact final address in every ad (default domain, https, no trailing slash), so the visitor lands without a redirect.

  2. Do not send ads through Webflow 301 redirects. In our tests, redirect rules from Site settings > Publishing > 301 redirects sent visitors to the new address without the query string, so ?ttclid=... was lost before the pixel could run. This includes the redirect Webflow creates when you change a page’s slug and tick Permanently redirect the old URL to this new one. Check every ad URL against your redirect list, and update ads to link to the new page directly.

  3. Check localized pages. Webflow’s 301 redirects do not apply to localized subdirectories, so /es/old-url needs its own rule, and that rule is a 301 redirect like the others: keep it out of ad URLs too. The automatic routing to a visitor’s preferred locale (on Localize plans that include it) uses a 302 redirect; in our test it kept the query string, but link ads for a given language to that locale’s URL anyway.

  4. Check redirects outside Webflow, such as a domain registrar’s forwarding, rules in a proxy or CDN in front of the site, link shorteners or campaign link tools. These commonly drop the query string. TikTok notes the click ID can be up to 1,000 characters long; do not truncate it.

  5. Check scripts that clean the address bar. A script that removes query parameters after the page loads (for example Finsweet’s removequery Attribute, or custom “clean URL” code) can erase ttclid before a consent-gated pixel starts. Remove it from landing pages. Keep the TikTok base code early in Site settings > Custom code > Head code, as TikTok recommends.

  6. Make sure the pixel runs on the landing page after consent. The pixel reads ttclid from the address of the page it runs on. If it only starts on the next page, ttclid is no longer in the address. With TikTok’s consent commands, ttq.grantConsent() must run right after Accept on the same page; with a consent tool that blocks the script, it must release the script without a reload; with GTM, the TikTok tags must fire on the consent event, not only on the next page view. See “TikTok Pixel does not fire after consent”.

  7. Check that first-party cookies are on. In TikTok Events Manager, open Tools > Events > Data sources, select your pixel and open the Settings tab. First-party cookies are on by default, but can be switched off there; when they are off, no new first-party cookies are set.

  8. Check that your consent tool keeps the cookie. After Accept, ttclid and _ttp should stay, including on the next page. Some tools delete cookies when the visitor changes preferences; Finsweet’s older Cookie Consent documents that it erases cookies in that case.

  9. Pass the click ID to your server events. If you forward Webflow form submissions to the Events API from a webhook or automation, your server never sees the visitor’s cookies. Add two hidden text inputs to the form, named ttclid and ttp, and fill them from the cookies when the form is submitted, for example in Footer code:

    <script>
  function cookieValue(name) {
    var m = document.cookie.match('(?:^|; )' + name + '=([^;]*)');
    return m ? decodeURIComponent(m[1]) : '';
  }
  document.querySelectorAll('form').forEach(function (form) {
    form.addEventListener('submit', function () {
      var clickId = form.querySelector('input[name="ttclid"]');
      var browserId = form.querySelector('input[name="ttp"]');
      if (clickId) clickId.value = cookieValue('ttclid');
      if (browserId) browserId.value = cookieValue('_ttp');
    });
  });
</script>

    Then send the values as user.ttclid and user.ttp in the Events API event. Check a test submission in Site settings > Forms (or your webhook log) to confirm the fields arrive filled.

  10. Publish to your custom domain after any change.

Common causes

  • Ads link to an old URL that Webflow now 301-redirects (often after a slug change), and the redirect drops the query string.
  • A localized page needs its own redirect, or ads link to the primary locale and rely on routing.
  • A registrar forwarding rule, proxy rule or link shortener in front of the site drops ttclid.
  • A script removes query parameters from the address before the pixel starts.
  • The pixel waits for consent and only starts on the next page.
  • First-party cookies are switched off in the pixel’s settings.
  • Server events built from Webflow form webhooks carry no ttclid or ttp.

How to verify the fix

  1. Repeat the test above using the exact ad URL: no redirect drops ?ttclid=test123, and after accepting cookies the ttclid cookie holds test123.
  2. Open another page of the site: ttclid is still there.
  3. Re-run the check on IsPixelWorking. The issue should be gone, and the redirect chain in the report (if any) should keep the click ID.

Questions people ask

Does the TikTok Pixel set first-party cookies on Webflow?

Yes. TikTok says the pixel stores the click ID in a first-party cookie named ttclid under your website’s domain, and first-party cookies are on by default in the pixel’s settings. You do not need a TikTok partner integration or a Webflow setting for that.

Sources

More TikTok guides