How to Add Meta Pixel in Webflow
Learn how to install Meta Pixel on your Webflow site: Pixel ID, custom code, verification, and events.
In this tutorial, Sandro — Gemeos co-founder — shows you how to install the Meta Pixel (formerly Facebook Pixel) on your Webflow website.
| Method | Benefit | When to use it |
|---|---|---|
| Webflow Custom Code (head) | Simple, direct | Sites without GTM |
| Via Google Tag Manager | Centralized | Sites with GTM already installed |
| Native Webflow integration | 1 click | Available on certain plans |
1. Grab your Pixel ID
In Meta Events Manager, select your Pixel or create a new one. Copy your Pixel ID (numeric format: 1234567890123456).
2. Install the Pixel in Webflow
In Project Settings > Custom Code > Head, paste the Meta Pixel base code. Replace YOUR_PIXEL_ID with your ID. Save and publish the website.
3. Check it with Meta Pixel Helper
Install the Chrome extension Meta Pixel Helper. Browse your website: the extension should confirm that the Pixel fires on every page with the PageView event.
4. Set up conversion events
To track form submissions, add the event fbq('track', 'Lead') after submission. Via GTM, create a Meta Pixel tag with a Form Submission trigger to fire this event automatically.
Conclusion
The Meta Pixel takes about 5 minutes to set up in Webflow Custom Code.
Good to know
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
