How can I set up the Conversion API on a Webflow site to capture more data for my client's ad campaign?
TL;DR
- Generate a Facebook Pixel ID and Access Token from the Events Manager.
- Use Zapier, Make, or a custom serverless function (e.g., Vercel) as middleware to capture Webflow events.
- Configure Webflow forms or event triggers to send data (e.g., via webhook or JS) to your middleware.
- Middleware formats and forwards event data with required parameters (eventname, userdata, etc.) to Facebook’s CAPI endpoint.
- Test events using Facebook’s Test Events Tool to ensure proper tracking and validation.
To set up the Facebook Conversion API (CAPI) on a Webflow site, you’ll need to use a server-side method to send tracked events directly to Facebook, improving tracking accuracy beyond the Facebook Pixel alone.
1. Understand the CAPI Setup Requirements
- Webflow does not natively support server-side code, so you’ll need a middleware solution like Zapier, Make (Integromat), or a custom serverless function via tools like AWS Lambda, Google Cloud Functions, or Vercel.
- Facebook Business Manager access is required to generate an Access Token and Pixel ID.
- You’ll also need event actions triggered on the Webflow site—typically via form submissions, button clicks, or page views.
2. Prepare Your Facebook & CAPI Settings
- Go to Events Manager → select your Pixel.
- Click on Settings and scroll to Conversions API.
- Under Set up through a Partner, you’ll likely skip this and instead:
- Click Generate access token under the Manual Implementation section.
- Copy your Pixel ID and Access Token.
3. Choose a Bridge (Zapier, Make, or Serverless Function)
- Zapier or Make:
- Set up a Webhook trigger in Zapier or Make.
- In Webflow, go to the Form Submission settings and send the data to the Webhook URL.
- In the Zap, use the form data to post to Facebook’s CAPI endpoint:
https://graph.facebook.com/v13.0/[PIXEL_ID]/events. - Include required fields: eventname, eventtime, userdata (email, IP, user_agent), and actionsource.
- Custom serverless solution (for more control):
- Create a function (on Vercel, Netlify, or similar) that accepts form data from Webflow.
- Server function forwards form data to the Facebook CAPI endpoint with your Access Token.
- In Webflow, use custom JS/jQuery to send POST requests to your serverless endpoint on event triggers.
4. Set Up Webflow to Trigger Events
- For form submissions:
- Go to Project Settings > Forms.
- Set the Form Action URL to your Webhook/serverless URL.
- Alternatively, use JavaScript to listen for form submissions or button clicks and send data via
fetch()orXMLHttpRequestto your backend that then relays data to Facebook API.
5. Map Required CAPI Parameters
- Required parameters:
- event_name (e.g., “Lead”)
- event_time (UNIX timestamp)
- action_source (typically “website”)
- **userdata**: hashed data like email, IP, useragent
- Optional fields like fbc and fbp can be captured from cookies if the Facebook Pixel is installed.
6. Test Your Events
- Use Facebook’s Test Events Tool in Events Manager.
- Send test conversions to confirm they are being received via the CAPI.
- Compare side-by-side with Pixel events for validation.
Summary
To integrate the Facebook Conversion API with Webflow, route site events (like form submissions) through a tool like Zapier, Make, or a custom serverless function. Facebook requires event parameters, user data, and a secure access token, which you send via HTTP POST to their endpoint. This hybrid approach ensures more reliable data capture compared to client-side tracking alone.
