Embed Meta Pixel on your Webflow site

Meta Pixel allows you to track your website visitors’ actions. Tracked conversions will appear in Meta Events Manager and can be used to analyze the effectiveness of your conversion funnel and to define custom audiences for dynamic ad campaigns.

Before you get started: Review Meta’s instructions for setting up and installing a Meta Pixel.

In this lesson, you’ll learn: 

1. How to add Meta Pixel to your site
2. How to delay for cookie consent
3. How to create a Pixel cookie consent banner
4. How to enable ecommerce events
5. How to set up advanced event tracking 

How to add Meta Pixel to your site

Important: If you’ve already embedded a Meta Pixel on your site using custom code, make sure to remove the custom code before adding your Meta Pixel ID. 

To add Meta Pixel to your site: 

1. Go to Site settings > Apps & Integrations tab > Meta Pixel
2. Paste in your Meta Pixel ID 

Enabling ecommerce events

When you enable Ecommerce on your site, Webflow automatically passes the following events to Meta Events Manager: 

• Viewed product
• Added product to cart
• Purchased product

These events will allow you to effectively measure and improve your advertising campaigns on Meta and Instagram.

Learn more: 

• Setting up Instagram Shopping
• Syncing products
• Set up Meta Advantage+ catalog ads for your products

How to delay for cookie consent

If you host websites that collect personal data from EU residents, you need to comply with GDPR. You can delay loading the pixel until your site visitors accept your cookie consent by toggling “Delay for cookie consent” to YES. 

When you enable this setting, you’ll also need to request cookie consent on your site with a cookie consent banner. 

How to create a Pixel cookie consent banner

Note: This tutorial uses Webflow’s embed element to add custom code. The embed element is available on any paid Site plan and on Core, Growth, Agency, and Freelancer Workspace plans.

You can create a Pixel cookie consent banner with the following steps: 

1. Design a banner
2. Create interactions
3. Embed custom code 

Design a banner 

1. Create and design a banner however you like, including the cookie consent notification message 
2. Give your banner an ID (e.g., consentPopup) 
3. Add an “Accept Pixel cookies” button 
4. Give your button a class
5. Give your button an ID (e.g., consentBtn) 
6. Add a “Decline Pixel cookies” or “Close” button
7. Give your button the same class as the “Accept” button 
8. (Optional) Include a “Learn more” link to link site visitors to your privacy policy page
9. Drag the banner inside of a div block to serve as your popup wrapper
10. Give the div block a class (e.g., popupWrapper) 
11. Set the popup wrapper’s position to fixed
12. Choose a preset position or manually adjust the position of the popup wrapper
13. Make the popup wrapper a component
14. Add the component to all of your site pages 

Create interactions 

First, create an interaction that hides the cookie consent banner when a site visitor accepts Pixel cookies:

1. Select the “Accept Pixel cookies” button on the canvas 
2. Go to Interactions panel > Element trigger 
3. Click the “plus” icon to create a new element trigger
4. Choose Mouse click (tap)
5. Go to Trigger settings and click Class 
6. Go to On 1st click and click Select an action
7. Choose Start an animation
8. Click the “plus” icon to create a custom animation 
9. Give your custom animation a name (e.g., “Close the cookie popup”) 
10. Select the popup wrapper on the canvas
11. Click the “plus” icon next to Actions to add an action to your animation
12. Go to Affect and choose Class
13. Go to Move and set the y-axis to 100% 
14. Click Done

Then, create a similar interaction to hide the cookie consent banner when a site visitor declines Pixel cookies: 

1. Select the “Decline” button on the canvas
2. Click the “plus” icon to create a new element trigger
3. Choose Mouse click (tap)
4. Go to Trigger settings and click Class
5. Go to On 1st click and click Select an action
6. Choose Start an animation
7. Choose your “Close the cookie popup” custom animation

Next, create an interaction to show the cookie consent banner when the page loads: 

1. Go to Interactions panel > Page trigger
2. Click the “plus” icon to create a new page trigger
3. Choose Page load
4. Go to When page starts loading and click Select an action
5. Choose Start an animation
6. Click the “plus” icon to create a custom animation
7. Give your custom animation a name (e.g., “Show the cookie popup”)
8. Select the popup wrapper on the canvas
9. Click the “plus” icon next to Actions to add an action to your animation
10. Go to Move and set the y-axis to 100% 
11. Check Set as initial state
12. Click the “plus” icon next to Actions 
13. Go to Move and set the y-axis to 0%
14. Click Done

Finally, if your site has more than one page, make sure the cookie consent banner loads on each of your pages: 

1. Open another page on your site
2. Go to Interactions panel > Page trigger
3. Click the “plus” icon to create a new page trigger
4. Choose Page load
5. Go to When page starts loading and click Select an action
6. Choose Start an animation
7. Choose your “Show the cookie popup” custom animation
8. Repeat the above steps for all pages on your site

Important: Make sure that you select the popup wrapper when you add actions to your animations. If you apply the actions to the banner itself, the custom code may not function properly. 

Embed custom code

To make the cookie consent banner work, go to Site settings > Custom code tab > Footer code and embed the following code: 

 <script type="text/javascript">
  var popup = document.getElementById('consentPopup');  
  var alreadyLoaded = window.localStorage.getItem('fbGrantConsent') === 'true';
  //Show the consent banner if consent is not granted, hide it if consent is already granted.  
  if (alreadyLoaded) {    
  popup.style.display = 'none';    
  fbq('consent', 'grant');  
  } else {    
  popup.style.display = 'block';  
  }
  
  //Grant consent and store it in localStorage of the browser  
  var consentBtn = document.getElementById('consentBtn');  
  consentBtn.addEventListener("click", function() {  
  fbq('consent', 'grant');    
  window.localStorage.setItem('fbGrantConsent', 'true');  
  });
</script>

Important: If you’ve used different IDs for your “Accept cookies” button and your popup, make sure to replace the IDs in the above code with the IDs you used instead. Replace “consentPopup” with the ID you set for the banner. Replace “consentBtn” with the ID you’ve set for the “Accept cookies” button.

More resources: 

• Meta’s documentation on cookie consent
• European Commission’s cookie consent rules

How to set up advanced event tracking

To learn about advanced Pixel event tracking, check out Meta’s guide to events. You can also check out sample code for advanced Meta pixel use cases and edit the code for the events you want to track.

Once you have the code you need for the event you want to track, you can add these events to the <head> tag of one or more pages on your site. 

If you want to track link or button clicks, make sure to set a unique ID on those elements in the Designer. Then, paste your embed code into a code editor (e.g., Sublime Text or Visual Studio Code) and replace the IDs in the embed code with the IDs you applied to your buttons or links. Finally, go to Pages panel > Page settings > Custom code and embed the following script. 

You don’t need to add the Meta Pixel portion of the example code to your site if you’ve already added the Pixel ID in Site settings > Apps & Integrations tab > Meta Pixel.  

Note: Our support team is unable to provide direct help with custom code setup or troubleshooting, as these topics fall outside the scope of our customer support policy. If you need more help integrating Meta Pixel events, please let us know on the Webflow Forum with as much information as possible (e.g., your site’s read-only link, relevant screenshots, the code you’re trying to integrate, and a description of the issue), where the entire Webflow community (staff included) can provide additional help and resources.