Table of Contents

Meta Pixel - Track Events (only Embedded)

Pau Sanchez Updated by Pau Sanchez

This process is only suitable for embedded chatbots. Due to the new Meta regulations and domain verification process, standalone chatbots (using our URL) might stop tracking events.

The Meta pixel is a piece of code on your website that can help you track events and better understand the effectiveness of your advertising campaigns and the actions that people take on your site to measure conversion rates. 

This article explains how you can use Meta pixel to track events for Meta ads when a chatbot is embedded in your website. 

And this is how the code in your site is going to look like with the snippets in these instructions:

<html>
    
    <head>

        <script> !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', 'XXXXXXXXXXXXXXX'); fbq('track', 'PageView'); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXXX&ev=PageView&noscript=1" /></noscript>

    </head> 
    
    <body> 
    
    </body>

        <script src="https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"></script> 
        <script> var myLandbot = new LandbotLivechat({ 
            index: 'https://landbot.io/u/H-XXXXXX-XXXX/index.html', }); 
        </script> 

</html>

Please note that you’ll need to replace the id=XXXXXXXXXXXXXXX with your own Meta Pixel ID. We’ll explain how you can get it in Step 2. 

Step 1: Embed your chatbot

Using Meta pixel to track events like lead conversions only works for chatbots embedded in your website — i.e. using a domain that’s different from “landbot.io”.

After you build your bot, you can embed it in one of four ways: Fullpage, Popup, Embed, or Livechat (with a custom domain.)

For this example, select the embed option in the "share" section and add your chatbot to your container’s webpage using the snippet provided by Landbot:

Step 2: Get information from Meta Business Suite

Sign in to your Meta Business Suite account, go to “All tools” on the left menu bar, and select “Events Manager” under the “Advertise” section. 

Next, click on “+ Create Data Sources,” select “Web” when prompted to connect a new data source, and name your new dataset. 

Click “Next,” select “Connect manually,” and then select “Meta Pixel only.” Go ahead and copy the Pixel ID that shows up. 

Step 3: Add your Meta Pixel code to your CMS

Be sure you're using a standard Facebook Pixel Code implementation like this one:

And in the code below, please replace the id=XXXXXXXXXXXXXXX with your Meta Pixel ID that you copied earlier. This code appears two times, so make sure you replace it in both sections without removing any apostrophes or symbols next to the pixel ID number:


        <script> !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', 'XXXXXXXXXXXXXXX'); fbq('track', 'PageView'); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXXX&ev=PageView&noscript=1" /></noscript>

This is the script that you need to insert into the <head> section of your content management system, whether that’s WordPress, Webflow, or any other CMS. 

Step 4: Edit your chatbot

In your chatbot builder, add a “Code” block where you want to track the information collected by the chatbot, for example, after you’ve asked a user for their name and contact details. This is the point in the flow when you want to send the event to Meta, as it represents a conversion you want to track.

When you add the “Code” block, simply replace the parameters with your own values relevant to the conversion you want to track:

window.fbq('track','Lead')

Step 5: Install the Meta Pixel Helper Chrome extension

After you’ve followed all the previous steps, tracking events with Meta Pixel should be working properly. Still,  you should check if the tracking is working correctly. 

To test that you installed the pixel correctly, install the Chrome Pixel Helper extension (it’s free!) and then visit the page where you’ve embedded your chatbot. 

If the Pixel shows up when you click on the extension, you’re all set!

Channel Type compatibility

for Web

This feature is fully compatible.

for WhatsApp

This feature is not compatible with WhatsApp.

for Messenger

This feature is not compatible with Messenger.

How did we do?

Google Analytics - Track Events (Embedded)

How Track Google Analytics Events in Landbot with Google Tag Manager (GTM)

Contact