Embed Meta Pixel on your Webflow site

Track your site visitors’ actions with Meta Pixel.

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.

How to add Meta Pixel to your site

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

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 to serve as your popup wrapper
10. Give the div a class (e.g., popupWrapper) 
11. Set the popup wrapper’s position to fixed
12. Choose a preset position (e.g., bottom) 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 Miscellaneous and choose Hide/show
13. Go to Hide/show and set the display to none 
14. Click Save

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 Mouse click (tap) element trigger you just created
3. Go to On 1st click and click the radio button next to your “Close the cookie popup” custom animation
4. Click Save

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 Hide/show and set the display to whichever display setting you want (except none)
11. Check Set as initial state
12. Click Save

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

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>

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.