Webflow sync, pageviews & more.
NEW

How can I set up the Conversion API on a Webflow site to capture more data for my client's ad campaign?

TL;DR
  • Install the Facebook Pixel in Webflow's custom code settings and verify it using the Meta Pixel Helper.
  • Generate a Conversion API access token in Facebook Events Manager.
  • Use a tool like Zapier to capture Webflow form submissions and send server-side events to Meta using webhooks.
  • Hash user data (e.g., email) and include enrichment fields like IP and User Agent for better identity matching.
  • Validate server and browser event tracking using Meta’s Test Events Tool in Events Manager.

To set up Meta’s Conversion API (CAPI) on a Webflow site, you’ll need to integrate both client-side (Pixel) and server-side (CAPI) tracking to maximize data capture for your client’s ad campaign.

1. Ensure Facebook Pixel is Installed First

  • Install the Pixel under Project Settings > Custom Code in Webflow.
  • Paste the base Facebook Pixel code in the Head or Before section.
  • Verify with the Meta Pixel Helper Chrome Extension.

2. Create a Facebook Events Manager API Access Token

  • Go to Facebook Events Manager.
  • Select your Pixel, then click Settings.
  • Scroll to Conversion API and click Generate Access Token.
  • Copy and store this token securely.

3. Choose a Server-to-Server Integration Method

Since Webflow is not a server-based CMS, you need an external tool (e.g., Zapier, Make [Integromat], or a custom backend) to send server-side events.

Option: Zapier + Webflow + Webhooks

  • Trigger: Form submission or page view via Webflow Forms, or Button click via custom JS.
  • Action: Zapier Webhook sends a POST request to the Meta CAPI endpoint https://graph.facebook.com/v12.0/<pixel-id>/events.

Required parameters in the payload:

  • event_name: e.g., Purchase, Lead
  • event_time: UNIX timestamp
  • user_data: Hashed email, IP address, etc.
  • custom_data: Optional values like purchase amount
  • access_token: Your API token

For form data, use Webflow Forms to send to Zapier via Form Submission Trigger.

4. Capture User Data for Enrichment

Meta CAPI requires hashed user data to match identities:

  • For emails, hash to SHA-256 before sending.
  • For IP and User Agent, use hidden fields or collect server-side via your webhook.

Zapier may automatically hash recognized fields (like emails) if you use Meta’s built-in integrations.

5. Use Google Tag Manager (Optional for Advanced Control)

Alternatively, link the client-side Pixel and send custom events to a backend via GTM + Google Cloud Functions or similar.

This is more complex but gives precise control over data passed to Meta.

6. Verify Events in Events Manager

  • Go back to Events Manager.
  • Check data coming from Browser and Server channels.
  • Use the Test Events Tool to validate event structure and firing.

Summary

To integrate Meta’s Conversion API with Webflow:

  • Install the Pixel first.
  • Generate an API Access Token in Events Manager.
  • Use Zapier or Integromat to POST events created in Webflow (e.g., on form submissions).
  • Hash personal data, and include enrichment fields like IP and User Agent.
  • Validate via Meta’s test tools to ensure server events are firing.

This setup will help improve tracking accuracy and ad performance through stronger signal quality.

Rate this answer

Other Webflow Questions