Insert Meta Pixel on your Webflow site

Meta Pixel enables you to monitor the actions of your website visitors. Tracked conversions will be displayed in Meta Events Manager and can be utilized to evaluate the efficacy of your conversion funnel and to identify custom audiences for dynamic ad campaigns.

Prior to commencing: Examine Meta’s guidelines for configuring and deploying a Meta Pixel.

This tutorial covers the following topics:

1. Implementing Meta Pixel on your website
2. Implementing a delay for cookie approval
3. Creating a Pixel cookie approval banner
4. Activating ecommerce events
5. Configuring advanced event tracking

Steps to implement Meta Pixel on your site

Vital: In case you have previously integrated a Meta Pixel on your website using custom code, ensure to eliminate the custom code before adding your Meta Pixel ID.

To insert Meta Pixel on your site:

1. Access Site settings > Apps & Integrations tab > Meta Pixel
2. Paste your Meta Pixel ID

Enabling ecommerce events

Once you activate Ecommerce on your website, Webflow will automatically relay the subsequent events to Meta Events Manager:

• Viewed product
• Added product to cart
• Purchased product

These events will allow you to proficiently gauge and improve your advertising campaigns on Meta and Instagram.

Learn more:

• Setting up Instagram Shopping
• Synchronizing products
• Configuring Meta Advantage+ catalog advertisements for your products

Steps to implement a delay for cookie approval

If your websites collect personal data from EU residents, it is essential to comply with GDPR regulations. You can postpone loading the pixel until your website visitors accept your cookie consent by toggling the “Delay for cookie consent” option to YES.

Once you enable this setting, you also need to request cookie consent on your site using a cookie consent banner.

How to create a Pixel cookie approval banner

Important: This guide utilizes Webflow’s embed element to include custom code. The embed element is accessible on any paid Site plan and on Core, Growth, Agency, and Freelancer Workspace plans.

You can set up a Pixel cookie approval banner with the subsequent steps:

1. Devise a banner
2. Establish interactions
3. Embed custom code

Devise a banner

1. Design and craft a banner according to your preferences, incorporating the cookie consent notification message
2. Assign an ID to your banner (e.g., consentPopup)
3. Integrate an “Accept Pixel cookies” button
4. Assign a class to your button
5. Provide an ID to your button (e.g., consentBtn)
6. Add a “Decline Pixel cookies” or “Close” button
7. Assign the same class to the “Decline” button as the “Accept” button
8. (Optional) Include a “Learn more” link to direct visitors to your privacy policy page
9. Insert the banner within a div block to function as your popup container
10. Assign a class to the div block (e.g., popupWrapper)
11. Configure the popup container’s position as fixed
12. Select a preset position or manually adjust the position of the popup container
13. Designate the popup container as a component
14. Add this component to all pages of your website

Establish interactions

Begin by establishing an interaction that conceals the cookie consent banner upon visitor acceptance of Pixel cookies:

1. Select the “Accept Pixel cookies” button on the screen
2. Navigate to Interactions panel > Element trigger
3. Click the “plus” icon to create a new element trigger
4. Select Mouse click (tap)
5. Access Trigger settings and select Class
6. Choose On 1st click and select Select an action
7. Opt for Start an animation
8. Click the “plus” icon to create a customized animation
9. Name your custom animation (e.g., “Close the cookie popup”)
10. Choose the popup container on the screen
11. Click the “plus” icon adjacent to Actions to add an action to your animation
12. Set Affect to Class
13. Adjust Move and set the y-axis to 100%
14. Confirm the settings

Next, create a similar interaction to hide the cookie consent banner in case a visitor declines Pixel cookies:

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

Subsequently, set up an interaction to display the cookie consent banner when the page loads:

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

Lastly, ensure the cookie consent banner is loaded on all pages of your site:

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

Important: Ensure to select the popup container when adding actions to your animations. Applying actions directly to the banner itself may impede the functioning of the custom code.

Embed custom code

To operationalize the cookie consent banner, navigate to Site settings > Custom code tab > Footer code and insert the provided code:

    <script type="text/javascript">
  var popup = document.getElementById('consentPopup');  
  var alreadyLoaded = window.localStorage.getItem('fbGrantConsent') === 'true';
  //Show the consent banner if consent ispreviously approved.  
  if (previouslyLoaded) {    
  popup.style.display = 'none';    
  fbq('agreement', 'accept');  
  } else {    
  popup.style.display = 'block';  
  }
  
  //Accept agreement and save it in localStorage of the browser  
  var acceptButton = document.getElementById('acceptButton');  
  acceptButton.addEventListener("click", function() {  
  fbq('agreement', 'accept');    
  window.localStorage.setItem('fbAcceptAgreement', 'true');  
  });
</script>
    

Crucial: In case distinctive IDs were utilized for your “Allow cookies” button and your popup, ensure to substitute the IDs in the aforementioned code with the IDs you employed instead. Exchange “agreementPopup” with the ID you configured for the banner. Replace “acceptButton” with the ID you set for the “Allow cookies” button.

Further references: 

• Meta’s documentation on cookie agreement
• European Commission’s cookie acceptance regulations

How to establish advanced event monitoring

To get insights into cutting-edge Pixel event monitoring, refer to Meta’s manual on events. You can also examine example code for sophisticated Meta pixel utilization instances and amend the code for the events you wish to monitor.

Once equipped with the suitable code for the event you intend to monitor, you can insert these events into the <head> tag of one or more pages on your site. 

If intending to monitor link or button clicks, make certain to define a distinctive ID on those elements in the Designer. After that, insert 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 assigned to your buttons or links. Finally, navigate to Pages panel > Page settings > Custom code and embed the subsequent script. 

There is no need to incorporate the Meta Pixel segment of the exemplar code into your site if the Pixel ID was already included in Site settings > Apps & Integrations tab > Meta Pixel.  

Note: Our assistance team cannot offer direct aid with custom code establishment or troubleshooting, as these subjects extend beyond the sphere of our client support protocol. Should you require more assistance integrating Meta Pixel events, kindly inform us on the Webflow Forum with as much detail as possible (e.g., your site’s read-only link, pertinent screenshots, the code you are attempting to integrate, and a description of the problem), where the entirety of the Webflow community (inclusive of staff) can provide further aid and resources.