How to Set Up Meta & TikTok Tracking in Webflow (Pixel, CAPI, Events API) with Signal Beam

If you’re running Meta or TikTok ads on a Webflow site, getting accurate conversion tracking is critical.

‍

In this step‑by‑step guide, you’ll learn how to set up Meta Pixel + Conversions API and TikTok Pixel + Events API and connect everything to Webflow using Signal Beam.

‍

We’ll walk through creating your Meta dataset, setting up a TikTok Pixel, and then plugging both platforms into Signal Beam for server‑side tracking in under 30 minutes.

‍

Part 1: Set Up Meta Pixel + Conversions API in Webflow

‍

This is part one of a three‑part onboarding guide for Signal Beam.

‍
In this first step, you’ll create a Meta dataset (Pixel) and generate a Conversions API access token that Signal Beam will use for server‑side tracking.

‍

When you’re done, you’ll have two things ready to paste into Signal Beam:

• Meta Pixel ID (Dataset ID)
• Meta Conversions API access token

‍

You’ll connect these to Webflow and Signal Beam in parts two and three of this series.

‍

‍

Why this step matters

‍

Meta now uses datasets that combine browser events (Pixel) and server events (Conversions API) under a single ID. Server‑side events are generally more resilient to ad blockers, iOS privacy changes, and browser issues, and Meta recommends combining Pixel + Conversions API for best performance.

‍

Signal Beam plugs into that same dataset so you can send both browser and server events from your Webflow site without building your own backend.

‍

‍

Prerequisites

‍

Before you start, make sure you:

• Have access to Meta Business Manager for the correct business.
• Can open Events Manager for that business.
• Know which ad account will use this tracking.

‍

If you’re not sure, ask whoever manages your Meta ads to confirm you have the right permissions (ideally Business Admin).

‍

‍

Step 1 – Open Meta Events Manager

‍

1. Log in to your Meta Business account: business.facebook.com.
2. From the left menu, open Events Manager (under “All tools” → Events Manager).

‍

You should now be on a page that shows Datasets in the left sidebar.

‍

‍

Step 2 – Create a new dataset (Pixel)

‍

1. In the top left, click Connect data.
2. A window will open titled Create a new dataset.
3. Under Name, enter something clear like (here for example “Signal Beam”). This is just a label to help you recognize this dataset later.
4. Click Create.

‍

‍

Meta will now create your new dataset and move you into the connection flow.

‍

‍

Step 3 – Choose “Web” as your data source

‍

Next, Meta will ask how you want to connect data to this dataset.

‍

1. In the Connect a new data source window, select Web.
2. Click Next.

‍

‍

Step 4 – Bypass the “recommended setup” (we’ll set up manually)

‍

Meta will now show a Recommended setup screen. Often this suggests using Conversions API Gateway or a partner.

‍

Because Signal Beam is your server‑side integration, you don’t want Meta’s gateway here.

‍

1. On the Recommended setup screen, click See other ways to setup.
2. At the bottom of the list, select Set up manually.
3. Click Next.

‍

‍

By choosing manual setup, you’re telling Meta:

‍

“I’ll handle the Conversions API connection myself (with Signal Beam), just give me the dataset and access token.”

‍

‍

Step 5 – Select “Conversions API and Meta Pixel”

‍

Now Meta asks how you want to connect your website.

‍

1. In How do you want to connect your website? choose “Conversions API and Meta Pixel” (the recommended option).
2. Click Next.

‍

‍

This tells Meta to expect both browser and server events for this dataset, which is exactly what Signal Beam will send.

‍

‍

Step 6 – Finish the assistant and go to the Overview

‍

Meta now shows an “Instructions” or confirmation screen.

‍

1. Click Finish to close the setup assistant.
2. You’ll land on the Overview tab for your new dataset.

‍

Here you should see blocks like:

• Send events from a server (Conversions API)
• Gather website events from browser activity (Meta Pixel)

‍

‍

You don’t need to configure anything else here for now—we only need:

‍

• The Dataset ID (Pixel ID)
• The Conversions API access token

‍

We’ll grab those next.

‍

‍

Step 7 – Open Settings and copy your Dataset ID (Meta Pixel ID)

‍

1. In the top navigation of the dataset page, click the Settings tab.
2. At the top of the Settings page, find the Details section.
3. Locate Dataset ID – this is your Meta Pixel ID.
4. Copy this ID and save it somewhere safe; you’ll paste it into Signal Beam later.

‍

‍

You now have the first piece Signal Beam needs: Meta Pixel ID / Dataset ID.

‍

Step 8 – Scroll to the Conversions API “Set up direct integration”

‍

Keep scrolling down in the Settings tab until you reach the Conversions API section.

‍

You’ll see several options, usually grouped as:

‍

• Set up using a cloud‑based connection (Conversions API Gateway, Signals Gateway, etc.)
• Set up direct integration
• Set up through a partner integration

‍

For Signal Beam, we want the direct integration section.

‍

1. Under Set up direct integration, make sure
   “Set up with Dataset Quality API (Recommended)” is selected.
2. Click Generate access token.

‍

‍

‍

Step 9 – Select your dataset & generate the access token

‍

When you click Generate access token, Meta opens a dialog:

‍

1. In the Select datasets to set up direct integration with Dataset Quality API dropdown, choose the dataset you just created (e.g. “Signal Beam”).
2. Click Generate access token.

‍

‍

‍

If your new dataset doesn’t show up in the dropdown

‍

This can happen for a few reasons:

‍

• You’re looking at a different Business in Events Manager than the one where you created the dataset.
• The dataset was just created and Meta hasn’t refreshed the list yet.
• Your user doesn’t have the right permissions for that dataset (it needs to be accessible to your Business Manager / account).

‍

Quick things to try:

‍

1. Refresh the Events Manager tab and click Generate access token again.
2. Double‑check the Business selector at the top left – make sure it matches the business where you created the dataset.
3. In Business Settings → Data Sources → Datasets, confirm:

• The dataset exists under that business.
• Your user (or your ad account) has access to it.

‍

If it still doesn’t appear:

‍

• You can create a new dataset and repeat the steps, making sure you stay in the same business the whole time.
• As a last resort, ask your Meta Business Admin to grant you admin access to that dataset so it shows up in the list.

‍

Once the correct dataset is selected, click Generate access token again.

‍

‍

Step 10 – Copy and store your Meta access token

‍

After you generate the token, Meta will display a long string of characters – this is your Meta Conversions API access token.

‍

1. Copy the token immediately – Meta won’t show it again after you close the dialog.
2. Save it in a secure place (for example, a password manager or a secure notes app).
3. You’ll paste this token into Signal Beam’s Meta setup later.

‍

‍

‍

Step 11 – What you should have before moving on

‍

At this point, you’ve finished the Meta side of the setup.

‍
You should now have:

‍

1. Meta Pixel ID (Dataset ID) – from the dataset Settings tab.
2. Meta Conversions API access token – from the Generate access token dialog in the Conversions API section.

‍

These are the only two Meta values Signal Beam needs to start sending server‑side events into your dataset.

‍

In Part 2, we’ll walk through setting up the TikTok Pixel + Events API.

In Part 3, we’ll plug both platforms into Signal Beam and connect everything to your Webflow site.

‍

Part 2: Set Up TikTok Pixel + Events API in Webflow

‍

This is part two of the Signal Beam onboarding series.  

‍
Here you’ll set up TikTok Pixel + Events API so Signal Beam can send both browser and server‑side events from your Webflow site.

‍

By the end of this guide, you’ll have:

‍

• Your TikTok Pixel ID  
• Your TikTok Events API access token

‍

Both values will be pasted into Signal Beam in part three.

‍

‍

Prerequisites

‍

Before you start:

‍

• You have a TikTok Ads Manager account with access to the right advertiser.
• You can open Events Manager inside TikTok Ads Manager.
• You know the URL of your Webflow site.

‍

‍

Step 1 – Connect a new web data source

‍

1. In TikTok Ads Manager, go to Events Manager.
2. Click Connect data source.
3. In the popup, choose Web and click Next.

‍

TikTok treats the web pixel + Events API as a “Web” data source for website events like page views, add‑to‑cart, and purchases.

‍

‍

‍

Step 2 – Add your Webflow website

‍

1. In Add your website, paste the URL of your Webflow site (e.g. https://yourdomain.com).
2. Click Next.

‍

TikTok uses this to scan your site and suggest connection methods, similar to how they recommend Pixel vs. Events API vs. partner integrations.

‍

‍

‍

Step 3 – Choose “Manual setup”

‍

TikTok will now ask how you want to connect:

‍

• Partner integrations (Shopify, Woo, GTM, etc.)
• Manual setup

‍

Since you’re using Signal Beam, you don’t need a partner integration.

‍

1. Under Choose a data connection method, select Manual setup.
2. Click Next.

‍

This tells TikTok:  “I’ll manage the implementation myself (with Signal Beam), just give me Pixel + Events API access.”

‍

‍

Step 4 – Keep “TikTok Pixel + Events API” selected

‍

Next TikTok asks which manual connection method you want:

‍

• TikTok Pixel + Events API (recommended)
• TikTok Pixel (browser only)
• Events API (server only)

‍

For best performance and resilience, TikTok explicitly recommends using Pixel + Events API together to maximize captured conversions and protect against browser issues.

‍

1. On Choose a manual connection method, keep TikTok Pixel + Events API selected (the recommended option).
2. Click Next.

‍

‍

Step 5 – Create your TikTok Pixel

‍

TikTok now opens the Pixel + Events API setup guide.  

‍
You’ll see a left‑side checklist:

‍

1. Create pixel  
2. Install base code  
3. Manage configurations  4–8 … etc.

‍

We only need to touch a few of these steps because Signal Beam handles all the actual tracking logic later.

‍

Now name your pixel

‍

1. In Create pixel, enter a clear name, for example:  
   “Signal Beam (TikTok)”
2. Click Create.

‍

You’ve now created a TikTok Pixel container which will also be used with the Events API for server‑side events.

‍

‍

Step 6 – Skip the base pixel code (Signal Beam will handle it)

‍

Next screen: Install base code.

‍

Normally, TikTok would ask you to copy this JavaScript and paste it into your site’s <head> so browser events can fire.  
But with Signal Beam, you don’t need to copy or paste this code manually.

‍

1. On Install base code, do not copy the code.
2. Simply click Next.

‍

Signal Beam will later add the TikTok Pixel to your Webflow site automatically when you complete the integration.

‍

‍

Step 7 – Enable Automatic Advanced Matching

‍

Now you’ll see Manage configurations.

‍

Here TikTok offers Automatic Advanced Matching (AAM), which uses hashed customer information (email, phone, etc.) to improve match rates and attribution – similar to Meta’s Event Match Quality concepts.

‍

1. Make sure Enable Automatic Advanced Matching (AAM) is turned on.
2. Leave the default customer info options checked (Email, Phone number, Name, etc.).
3. Ensure Allow first‑party cookies is also enabled.
4. Click Next.

‍

‍

Signal Beam will already hash user data server‑side before sending it to TikTok, but having AAM on gives TikTok an extra chance to match users from browser data as well.

‍

‍

Step 8 – Skip steps 4, 5, and 6 in the guide

‍

Your setup checklist now moves through:

‍

4. Set up events  
5. Verify Pixel setup  
6. Set up business funnel

‍

You can safely skip the detailed configuration in these three steps:

‍

• Signal Beam will handle event tracking (PageView, AddToCart, etc.) via its own logic and Visual Event Mapper.
• You don’t need to manually define or code events inside this TikTok wizard for Signal Beam to work.
• ‍

For each of steps 4, 5, and 6:

‍

1. Just click Next to move through them.
2. Don’t worry if TikTok mentions “add code” or “set events in your site” – that’s what Signal Beam will do later.

‍

(If you ever want to do additional manual events beyond Signal Beam, you can revisit these, but it’s not required.)

‍

Step 9 – Implement Events API: copy Pixel ID and generate access token

‍

This is the most important step for Signal Beam.

‍

You’re now on 7. Implement Events API.

‍

At the top you’ll see:

‍

• A Pixel ID (for example: D5HRQQJC77U894MD7C8G)
• Below that, a section titled 1. Generate access token with a Generate access token button.

‍

TikTok’s Events API uses:

‍

• The Pixel ID to know which data source you’re sending events to.
• The access token to authenticate every Events API call.

‍

9.1 Copy your TikTok Pixel ID

‍

1. In the Getting started box at the top, find Pixel ID: ….
2. Copy this Pixel ID and save it somewhere safe – you’ll use it inside Signal Beam.

‍

‍

‍

9.2 Generate and copy the Events API access token

‍

1. In 1. Generate access token, click Generate access token.
2. TikTok will display a long token string in a box below.
3. Copy the token immediately – TikTok explicitly notes it will not store or show the token again for security reasons.
4. Save it in a secure place (for example, your password manager or a secure note).

‍

‍

You now have the two values Signal Beam needs from TikTok:

• TikTok Pixel ID  
• TikTok Events API access token

‍

‍

Step 10 – Finish the setup (testing is optional for now)

‍

The last screen in the wizard is 8. Verify eAPI setup / Testing.

‍

TikTok offers a “Go to Test events” button so you can send test traffic and verify events – this is useful after Signal Beam is connected and sending data.

‍

For now:

‍

1. You don’t need to configure anything here.
2. Simply click Finish to close the setup guide.

‍

‍

‍

What you should have before moving to Part 3

‍

At this point, your TikTok side is ready. You should now have:

‍

1. TikTok Pixel ID – from the Implement Events API step.  
2. TikTok Events API access token – generated in the same step and saved securely.

‍

These work together exactly the way TikTok’s documentation describes: the Pixel handles browser events, while the Events API receives server events from integrations like Signal Beam for more reliable, complete tracking.

‍

In Part 3, we’ll:

‍

• Plug your Meta Pixel + CAPI (from part one) and  
• Your TikTok Pixel + Events API (from this guide)

‍

into Signal Beam, then connect everything to your Webflow site so you get full, server‑side tracking without touching any code.

‍

‍

Part 3: Connect Meta & TikTok to Webflow with Signal Beam

‍

In parts one and two, you created:

‍

• A Meta dataset (Pixel) + Conversions API access token
• A TikTok Pixel + Events API access token

‍

Now we’ll plug both into Signal Beam, connect everything to your Webflow site, and verify that tracking is live.

‍

The whole flow is:

‍

1. Add your Webflow site in Signal Beam
2. Connect Meta and TikTok using the IDs and tokens you created
3. Let Signal Beam automatically install the tracking script in Webflow
4. Publish your Webflow site
5. Send a test event and (optionally) verify with pixel helper tools

‍

‍

Step 1 – Add your Webflow site in Signal Beam

‍

1. Log in to your Signal Beam account and go to your dashboard.
2. Click the button to add a new site (or start the onboarding if this is your first site).
3. On the “Site Setup” screen, fill in:
   • Site name – e.g. My Brand Store or Client Name – Main Site
   • Website URL – paste the live URL of your Webflow site, for example:
     https://yourdomain.com
   The URL must be a valid https:// URL.
   Signal Beam’s Visual Event Mapper loads your live site inside the app; that only works correctly over HTTPS.
4. Click Next (or Save & continue, depending on the button label in your UI).

‍

‍

‍

Step 2 – Enable Meta and TikTok in Signal Beam

‍

On the next screen, you’ll connect your ad platforms.

1. Enable the platforms you want to track by toggling them on:
   • Meta
   • TikTok
2. For each platform, paste the values you generated in parts one and two.
3. Double‑check for typos (especially access tokens – they’re long).
4. Click Save & continue.

‍

‍

Step 3 – Let Signal Beam install the tracking script in Webflow

‍

Next, Signal Beam will ask how you want to install the script.

‍

1. On the Installation step, choose Install automatically.
2. Confirm any prompts to connect to Webflow / select your Webflow project.

‍

When you choose automatic install, Signal Beam:

‍

• Injects the necessary custom code into your Webflow site for you
• Handles both the Meta Pixel + CAPI and TikTok Pixel + Events API—no copy‑paste required

‍

‍

‍

Step 4 – Publish your Webflow site

‍

Signal Beam’s script is now added, but it won’t run until you publish your Webflow site.

‍

1. In Signal Beam, click Open Webflow to publish.
2. Webflow will open your project.
3. In Webflow, click Publish and select:
   • Your main domain (e.g. yourdomain.com), and optionally
   • The Webflow staging domain (e.g. yourproject.webflow.io).

After a successful publish, Webflow now serves pages that include Signal Beam’s script.

4. Return to Signal Beam.
5. Click I’ve installed it (or the equivalent confirmation button).

‍

‍

‍

‍

Step 5 – Send a test event from Signal Beam

‍

To confirm everything is wired up correctly, Signal Beam lets you send a test event.

‍

1. On the Verify connection screen inside Signal Beam, click Send test event.
2. Signal Beam will trigger a test event that should be received by:
   • Meta via Pixel + Conversions API
   • TikTok via Pixel + Events API

Depending on the UI, you’ll typically see a success indicator (check mark / “Connected”) once the event is received.

‍

‍

If the test fails

‍

If Signal Beam reports that the test failed:

‍

• Re‑check your IDs and tokens
  • Is the Meta Pixel/Dataset ID correct?
  • Did you paste the full Meta access token?
  • Same questions for the TikTok Pixel ID and Events API token.
• Make sure the right site is published
  • Confirm you published the same domain you entered in Signal Beam.
• Clear blockers
  • Try in an incognito window with ad blockers disabled, just in case a browser extension interferes.

Then click Send test event again.

‍

When the test passes, you’re done with the connection step.

‍

‍

‍

‍

Step 6 – Go to the Signal Beam dashboard

‍

Once your test is successful:

‍

1. Click the button to go to your Signal Beam dashboard.
2. From there you can:
   • See real‑time event logs (what’s being sent to Meta & TikTok)Signal Beam website
   • View Match Quality scores and recommendations
   • Use the Visual Event Mapper to add custom events without code

This is where you’ll spend time fine‑tuning your tracking after the initial setup.

‍

‍

Optional – Double‑check with Meta & TikTok pixel helpers

‍

If you want an extra layer of reassurance, you can use TikTok’s and Meta’s official browser tools to confirm that the pixels are installed and firing correctly.

‍

‍

Check TikTok with TikTok Pixel Helper

‍

• Install the TikTok Pixel Helper Chrome extension from the Chrome Web Store.chromewebstore.googleads.tiktok
• Visit your Webflow site in Chrome.
• Click the TikTok Pixel Helper icon – it will show:
  • Whether a TikTok Pixel is found
  • The Pixel ID
  • Which events fired (e.g. PageView, Button Click, etc.)ads.tiktokads.tiktok

‍

‍

‍

Check Meta with Meta Pixel Helper

‍

• Install the Meta Pixel Helper Chrome extension.developers.facebookchromewebstore.google
• Visit your site and click the Meta Pixel Helper icon.
• It will list:
  • Detected Pixel IDs
  • Events like PageView, AddToCart, Purchase
  • Any warnings/errors that might need attentiondevelopers.facebook

These tools are handy sanity checks whenever you change your Webflow layout or add new tracking.

‍

‍

‍

You’re done: Signal Beam + Webflow + Meta + TikTok

‍

At this point you have:

‍

• Meta Pixel + Conversions API connected through Signal Beam
• TikTok Pixel + Events API connected through Signal Beam
• The Signal Beam script installed and live on your Webflow site
• A successful test event confirming that data is flowing

‍

From here, you can start using:

‍

• The Visual Event Mapper to track key buttons, forms, and CTAs
• The Match Quality dashboard to improve attribution
• Analytics & logs to debug and understand what’s being sent