Fix guide · Webflow · advanced · about 60 min

TikTok Pixel event_id missing on Webflow

For the finding “TikTok events have no event ID”. Also for: Any website, Shopify, WordPress, Framer.

What this means

Each TikTok Pixel event can carry an event ID (event_id), a unique label for that one action. Your site’s events arrive with an empty event_id. The pixel does not fill in an ID by itself (that is the empty event_id field you see in the Network tab): TikTok asks advertisers to choose a unique ID for each event, and if your code does not pass one, the field stays empty.

Whether this costs you money depends on whether your site also sends events from a server through the TikTok Events API:

  • Yes, or you are not sure: TikTok deduplicates a browser event and a server event when they share the pixel code, the event name and the event_id. When the server event has no event_id either, TikTok can only fall back to the _ttp cookie, within 5 minutes and only if your server sends it. Otherwise both copies may count.
  • No, browser pixel only: there is nothing to deduplicate yet, so this has little effect today. It matters the day you add server events.

Webflow has no built-in TikTok integration and no built-in Events API. On a Webflow site, server events only exist if you or a tool added them: server-side Google Tag Manager, TikTok’s Events API Gateway, a third-party App, or an automation or server of your own that forwards Webflow form submissions or orders to TikTok. If none of these is in place, this issue can wait.

We cannot see server-to-server traffic from a browser, so we cannot tell whether your Events API works; we only check the browser events.

How to confirm it yourself

  1. Open your published Webflow site in a private (incognito) window, open developer tools (F12), go to Network and filter by analytics.tiktok.com/api/v2/pixel.
  2. Accept cookies, then trigger your key events (for example submit a test lead).
  3. In each request’s payload, event is the event name and event_id is the ID. "event_id": "" means the event has no ID.
  4. In your custom code or GTM, look at the ttq.track calls: TikTok documents the ID in the third argument, for example ttq.track('Lead', {}, { event_id: 'lead-8f3a2c' }). The general guide shows more examples and what Events Manager reports.

How to fix

TikTok keeps the first copy of an event and discards later copies with the same pixel code, event name and event_id that arrive within 48 hours. The ID must be created once and shared by both sides; two separately generated random IDs never match.

Route 1: Google Tag Manager with server-side GTM. If your pixel runs in GTM, fill De-duplication Configurations > Event ID in TikTok’s TikTok Pixel tag template with a variable that creates a new value per event (for example Stape’s Unique Event ID variable), and pass the same value to your server container’s Events API tag. TikTok says that if you set up GTM through its interactive flow in Events Manager, an event_id variable is configured for you.

Route 2: form leads sent to the Events API from a webhook or automation. Webflow can send each form submission to a webhook or to an App, and the submitted field values are included. Webflow submits forms in the background, without a page reload, so a lead event needs code that runs when the submission succeeds. To share one ID between the pixel and the server event:

  1. Add a text input to the form, set its Name to event_id, and hide it (for example with display: none, as in Webflow’s guide to hidden honeypot fields). Some spam filters discard submissions in which a hidden field is filled in, so send a test submission and check that it arrives.

  2. In the form’s Settings panel, let the form show its Success message rather than redirect to another page. After a successful submission, Webflow shows the Success message, the form block’s element with the class w-form-done.

  3. Add this to Site settings > Custom code > Footer code (or the page’s Before </body> tag field). It fills the hidden field and sends the browser Lead with the same ID once the Success message appears:

    <script>
      document.querySelectorAll('input[name="event_id"]').forEach(function (field) {
        var id = 'lead-' + Date.now() + '-' + Math.random().toString(36).slice(2, 10);
        field.value = id;
        var block = field.form && field.form.closest('.w-form');
        var done = block && block.querySelector('.w-form-done');
        if (!done) return;
        var sent = false;
        new MutationObserver(function () {
          if (!sent && getComputedStyle(done).display !== 'none' && window.ttq) {
            sent = true;
            ttq.track('Lead', {}, { event_id: id });
          }
        }).observe(done, { attributes: true, attributeFilter: ['style'] });
      });
    </script>
  4. In your server code or automation, send a Lead event to the Events API with event_source set to web, event_source_id set to your pixel code, and event_id set to the submitted event_id value. If your automation tool has no event ID field for TikTok, it cannot be matched with the browser event.

  5. Remove any other Lead event for the same form (a GTM tag, a thank-you page snippet, or an App’s form event), or TikTok receives two browser leads.

Lead is TikTok’s current name for a form submission; the older SubmitForm still works and is converted to Lead by TikTok.

Route 3: a third-party App that runs both sides. Apps in the Webflow Apps marketplace such as Pixelflow and Signal Beam say they send events through both the TikTok Pixel and the Events API and deduplicate the two. That only covers the events they send. If you keep a separate pixel in custom code or GTM, its events still have no ID; remove it (a second pixel also shows up as “Duplicate TikTok events”).

Route 4: TikTok’s Events API Gateway. The gateway sends a copy of the pixel’s events to the Events API from a cloud server you administer, and TikTok says it avoids duplicates by matching IDs such as event_id or _ttp. Self-hosting it needs an AWS account and an installation link generated by a TikTok representative. After setup, use the checks below to confirm.

Whatever the route, keep first-party cookies on in Events Manager (Tools > Events > Data sources > your pixel > Settings), so the _ttp fallback still works for any event that slips through without an ID. Then publish your site.

Common causes

  • The pixel was pasted from TikTok’s standard base code and event snippets, which do not include event_id.
  • Server events were added later (an automation, server-side GTM or an App) and the browser side was never updated.
  • An App sets IDs for its own events, but the browser events come from an older, separate pixel in custom code.
  • The browser and the server each generate their own ID, so the two never match.

How to verify the fix

  1. In the Network tab, every analytics.tiktok.com/api/v2/pixel request for your key events carries a non-empty event_id, and it changes between actions.
  2. For one test lead, the server sends the same event_id and event name. Your automation or server log should show the submitted event_id value.
  3. In Events Manager, the “Server & Browser” figures for that event grow (data is not shown in real time).
  4. Re-run the check on IsPixelWorking. The issue should be gone.

Questions people ask

Does Webflow send TikTok Events API events by itself?

No. Webflow has no built-in TikTok integration. Server events come from tools you add: an automation or server receiving Webflow webhooks, server-side GTM, TikTok’s Events API Gateway or a third-party App.

Sources

More TikTok guides