Your Facebook Pixel is not working on Webflow because the code is not live on your published domain. Webflow separates the editor from the live site. If you added the Pixel ID but did not publish the changes, the code does not exist for visitors. Alternatively, you may have added custom code while the native integration is also active, causing a conflict. The fix usually involves checking your publish status, removing duplicate code, or adjusting your cookie consent settings.
Why is my facebook pixel not working on webflow
You are seeing this error because the pixel script is not executing in the browser of a real visitor. Webflow is a visual builder, which means the code you see in the design mode is not the code the internet sees. To diagnose this in under one minute, you need to separate the environment from the code.
First, open your Webflow dashboard and click on your project. Look at the top right corner. If you see a "Publish" button that is highlighted, you have unsaved changes. The pixel code you added is sitting in the editor, not on your live domain. Click Publish, select all pages, and wait for the process to finish. This is the most common cause. The pixel cannot fire if the site has not been pushed to the public web.
Second, check if you are using the native Webflow integration or custom code. Webflow has a built-in setting for Meta Pixel. If you used this setting, you should not have any custom code in the Header or Footer. If you manually pasted the full JavaScript snippet into the Custom Code section, you should not have the native setting enabled. Having both creates a conflict where the pixel may load twice or fail to initialize correctly.
Third, consider your cookie consent banner. If you have a cookie banner that requires user interaction before scripts load, and you have not configured Webflow to delay the pixel until consent is given, the pixel may be blocked by the browser or your consent management platform. If you are targeting users in the EU, this is a high-probability cause.
To verify if the pixel is actually firing, you need to look at the live site, not the editor. Install the Facebook Pixel Helper browser extension. It is free and available for Chrome and other major browsers. Once installed, go to your live website in an incognito window. Click the extension icon. If the pixel is working, you will see a green checkmark next to the Pixel ID. If you see a red cross or no icon at all, the code is not present or is being blocked.
If you are unsure whether the code is even present in the page source, you can use this facebook pixel checker to scan your live URL. It tells you if the base pixel code is visible to the browser and if any standard events are firing without you needing to open developer tools. This saves you from guessing whether the issue is missing code or blocked code.
Check your publish status and domain
The most frequent reason for this issue is a misunderstanding of how Webflow deploys code. When you make changes in the Webflow editor, they are saved to a draft. They are not sent to the server until you explicitly click Publish. If you added the Pixel ID yesterday but forgot to publish, the live site is still running the old version of the code, which does not include the pixel.
To confirm this, open your Webflow dashboard. Navigate to your project. Look at the top navigation bar. If the "Publish" button is visible and active, you have unpublished changes. Click it. In the dialog that appears, ensure "All pages" is selected. If you only published a specific page, the pixel might be missing from other pages. Click Publish and wait for the progress bar to complete.
Once published, clear your browser cache or open an incognito window. Go to your live domain. Check the Pixel Helper extension again. If the green checkmark appears, the issue was simply that the code was not live. If it still does not appear, move to the next cause.
Another variation of this issue is using a custom domain incorrectly. If you recently migrated to a custom domain, ensure that the domain is properly connected and that the DNS records are updated. However, this usually affects the entire site loading, not just the pixel. If the site loads but the pixel does not, the domain is likely fine, and the issue is with the code injection.
Native settings versus custom code
Webflow offers two ways to add the Meta Pixel. The first is the native integration. You go to Site Settings, then Apps & Integrations, and paste your Pixel ID. Webflow injects the code automatically. The second way is using Custom Code. You paste the full JavaScript snippet into the Header Code section.
You must use only one method. If you use the native setting, Webflow handles the injection. If you also paste the code into the Header, you have duplicate code. Duplicate code can cause the pixel to fire twice, which skews your data, or it can cause a JavaScript error that stops the pixel from firing at all.
To check which method you are using, go to Site Settings in Webflow. Click the Apps & Integrations tab. Scroll down to the Meta Pixel section. If you see your Pixel ID listed there, you are using the native integration. Now, check the Custom Code tab in Site Settings. Look at the Header Code section. If you see the Meta Pixel JavaScript snippet there, you have a conflict.
If you are using the native integration, remove the code from the Header Code section. If you are using custom code, remove the Pixel ID from the Apps & Integrations section. Do not leave both active. After making this change, you must publish the site again. The changes to Site Settings do not go live until you publish.
If you are using custom code, ensure the snippet is placed in the Header Code section, not the Footer Code. The Meta Pixel needs to load as early as possible to capture the initial page view. If you place it in the Footer, it may load after the page has already rendered, causing missed events. According to Meta's official documentation, the pixel should be added as close to the top of the HTML head as possible.
Cookie consent and blocking scripts
If you are targeting users in the European Union, the UK, or other regions with strict privacy laws, you likely have a cookie consent banner. This banner asks users to accept cookies before tracking scripts run. If your banner is configured to block all scripts until consent is given, and you have not told Webflow to delay the pixel, the pixel will not fire for users who have not yet clicked "Accept."
Webflow has a specific setting for this. In the Apps & Integrations tab, under the Meta Pixel section, there is a toggle labeled "Delay for cookie consent." If this is set to "No," the pixel will attempt to fire immediately, regardless of the banner. If your banner uses a script that blocks non-essential cookies, it may block the pixel. If this is set to "Yes," Webflow will wait for the user to click "Accept" before injecting the pixel code.
Check this setting. If you have a cookie banner, set "Delay for cookie consent" to "Yes." This ensures the pixel only loads after the user has given permission. If you do not have a cookie banner, or if your banner does not block scripts, you can leave it as "No."
If you have set the delay to "Yes" and the pixel still does not fire, you need to test the flow. Open an incognito window. Go to your site. The banner should appear. Click "Accept." Then check the Pixel Helper extension. If the green checkmark appears after clicking "Accept," the setup is working correctly. The pixel is working, but it was waiting for consent.
If the pixel does not fire even after clicking "Accept," there may be a conflict between your cookie banner script and Webflow's delay mechanism. In this case, you may need to adjust the script in your cookie banner to explicitly allow the Meta Pixel. This requires editing the custom code of your banner, which can be tricky. If you are not comfortable editing JavaScript, you may need to consult a developer.
Verify with Pixel Helper and browser tools
The Facebook Pixel Helper extension is the most reliable way to diagnose pixel issues. It shows you exactly what the pixel is doing. Install it from the Chrome Web Store. It is free. Once installed, it adds an icon to your browser toolbar.
Go to your live website in an incognito window. Click the Pixel Helper icon. You will see a list of pixels detected on the page. If your Pixel ID is listed with a green checkmark, the base pixel is firing. If it is listed with a red cross, the pixel is present but failing to initialize. If it is not listed at all, the code is not on the page.
If you see a red cross, click on the pixel ID in the extension. It will show you the error message. Common errors include "Invalid Pixel ID" or "Script blocked." If you see "Script blocked," it is likely a cookie consent issue or an ad blocker. If you see "Invalid Pixel ID," double-check the ID in your Webflow settings. It must match exactly, including any leading or trailing spaces.
If you see a green checkmark, the base pixel is working. Now you need to check if events are firing. The extension also shows a list of events. If you are on the homepage, you should see a "PageView" event. If you add a product to the cart, you should see an "AddToCart" event. If you submit a form, you should see a "Lead" event.
If the base pixel is working but events are not firing, the issue is with the event tracking code. Webflow's native integration automatically tracks "Viewed product," "Added product to cart," and "Purchased product" if you have Ecommerce enabled. It does not automatically track "Lead" events for standard forms. You need to add custom code to track form submissions.
To test an event, perform the action on your live site. For example, fill out a contact form and submit it. Then check the Pixel Helper extension. If the "Lead" event is not listed, you need to add the tracking code. This requires adding a custom event to the form submission action. This is more advanced and may require a developer if you are not familiar with JavaScript.
Fixing event tracking for forms and ecommerce
If the base pixel is working but specific events are missing, you need to add custom event tracking. Webflow's native integration handles standard ecommerce events if you have the Ecommerce plan. It does not handle custom events like form submissions.
For form submissions, you need to add a custom event. You can do this by adding a script to the page where the form is located. The script should fire the "Lead" event when the form is submitted. You can use Webflow's custom code section for the specific page, or you can use a third-party tool to handle the event tracking.
If you are using a third-party form tool, such as Typeform or JotForm, you need to configure the tool to send the event to the Meta Pixel. This is done in the settings of the form tool. You will need to add the Pixel ID and the event name.
If you are using Webflow's native forms, you need to add a custom script. This script should listen for the form submission event and then fire the Meta Pixel event. You can find examples of this code in the Webflow community or in Meta's documentation.
Here is a general example of how to fire a Lead event. You add this code to the Custom Code section of the page with the form. The code checks if the form has been submitted and then calls the fbq function with the "Lead" event. You need to replace YOUR_PIXEL_ID with your actual Pixel ID.
If you are not comfortable writing JavaScript, you can use a tool like Zapier or Make to connect Webflow to the Meta Conversions API. This sends the event from the server side, which is more reliable than browser-based tracking. This method is often used for server-side tracking, which provides better data accuracy and privacy compliance.
If you are running a business that relies on accurate tracking, consider moving to server-side tracking. This sends events directly from your server to Meta, bypassing the browser. This reduces the impact of ad blockers and cookie restrictions. You can learn more about how this works in our guide to server-side tracking.
When to call a developer
Some issues require a developer. If you have checked all the steps above and the pixel still does not work, you may have a complex configuration issue. This is common if you are using multiple tracking tools, or if you have custom scripts that are interfering with the pixel.
If you are using a Content Delivery Network (CDN) or a security plugin, it may be blocking the pixel script. You need to whitelist the Meta Pixel domain in your CDN or security settings. This is a technical task that requires access to your server or hosting settings.
If you are using a custom domain with specific DNS settings, there may be a conflict with how the pixel loads. A developer can inspect the network requests in the browser's developer tools to see if the pixel script is being blocked or modified.
If you are using a headless CMS or a custom frontend, the pixel may not be injected correctly. In this case, you need to add the pixel code to the HTML template manually. This requires access to the codebase, which is not available in the standard Webflow editor.
If you are stuck, it is often faster to hire a developer to fix the issue than to spend hours troubleshooting. A developer can look at the network requests, check for JavaScript errors, and identify the root cause. You can find a developer through our contact page if you need help with your tracking setup.
Summary of fixes
To fix your Facebook Pixel on Webflow, follow these steps in order:
- Publish the site. Ensure all changes are published to the live domain.
- Remove duplicate code. Use either the native integration or custom code, not both.
- Check cookie consent. If you have a banner, set "Delay for cookie consent" to "Yes."
- Verify with Pixel Helper. Install the extension and check for a green checkmark on the live site.
- Check event tracking. Ensure that specific events like "Lead" are being fired with custom code or a third-party tool.
- Consult a developer. If the issue persists, there may be a technical conflict that requires code inspection.
By following these steps, you can identify and fix the most common causes of Facebook Pixel issues on Webflow. The key is to test on the live site, not the editor, and to use the Pixel Helper extension to verify that the code is firing. If you are still having trouble, consider reaching out to a professional for assistance. You can also check our pricing page if you are interested in a full tracking audit.