Webflow has a custom integration with Facebook Pixel. Since this integration doesn’t add a script to the Head of your code, you won’t be able to add the modified code our Cookie Banner usually requires.
To ensure that your Cookie Banner works with this integration you will have to do the following:
Go to the Webflow dashboard and select project Settings.
2. Go to “Integrations”
3. Add your Facebook Pixel Id and enable “Delay for cookie consent”
💡 By delaying you will ensure that the Facebook Pixel does not load on the website until the cookie banner has accepted it
4. Go to the tab “Custom Code”
5. Scroll down to the “Head Section” and add the following code after your Cookie Banner Script
<script type="text/javascript">
function setFbPixelStatus(e){!0===e?(fbq&&fbq("consent","grant"),window.localStorage.setItem("@fbPixelCookieGranted","true")):(fbq&&fbq("consent","revoke"),window.localStorage.removeItem("@fbPixelCookieGranted"))}window.addEventListener("DOMContentLoaded",(()=>{"true"===window.localStorage.getItem("@fbPixelCookieGranted")&&fbq&&setFbPixelStatus(!0)})),window.addEventListener("UC_UI_CMP_EVENT",(function(e){if("SAVE"===e.detail.type){const e=UC_UI.getServicesBaseInfo().find((e=>"Facebook Pixel"===e.name));if(!e)return;setFbPixelStatus(e.consent.status)}"DENY_ALL"!==e.detail.type&&"ACCEPT_ALL"!==e.detail.type||setFbPixelStatus("ACCEPT_ALL"===e.detail.type)}));
</script>
It should look something like this:
6. Go to your Privasee account and add “Facebook Pixel” to your Data Inventory
By adding Facebook Pixel to your data inventory your cookie banner will update (this could take up to 5 minutes and you might need to refresh your browser’s cache or view in incognito mode).
The Facebook Pixel will only load when people click “Accept All” or enable Facebook Pixel directly.