Facebook Pixel - How to track events inside your bot with Facebook Pixel

There are two approaches depending on your user case:

  1. Bot is embedded in a site

When your bot is embedded in one of the four different ways available: Fullpage, Popup, Embed or Livechat (with custom domain).

  1. Bot is not embedded, using a standalone url (share url) given by Landbot

When your bot is displayed with a Share URL (with Landbot domain)

Bot is embedded in a site

Important: Do not use the Facebook Pixel tracking code on the Landbot side (leave the Facebook Pixel ID field blank on Settings > SEO & Tracking) to make sure it doesn’t duplicate visitors.

You should apply this process when landbot is embedded into your website - using a domain that’s different from “landbot.io”. This process is very useful to track landbot and leads conversions, track events with Facebook Pixel

How the code in your site is going to look like with the snippets in these instructions:

<html>

<head>
<!-- Facebook Pixel Code -->
<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', '121071555287839'); fbq('track', 'PageView'); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=121071555287839&ev=PageView&noscript=1" /></noscript>
<!-- End Facebook Pixel Code -->
</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-222098-Z7UGOMG4SI4TMMVP/index.html', });
</script>


<script>
myLandbot.on('fbLandbot',function(data){ fbq(data.args); });
</script>

</html>

What to edit in the Site (container):
  1. Be sure you're using a standard Google Analytics implementation like this one:
In the code below, please change the 121071555287839 for your Facebook Pixel ID


<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', '121071555287839'); fbq('track', 'PageView'); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=121071555287839&ev=PageView&noscript=1" /></noscript>

  1. Add your Landbot to your container’s webpage using the snippet provided by the app:

<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-222098-Z7UGOMG4SI4TMMVP/index.html', });
</script>
  1. Add this code to the footer of your container’s webpage where landbot will be located (add it after the Landbot snippet of step 1):


<script>
myLandbot.on('fbLandbot',function(data){ fbq(data.args); });
</script>

What to edit in your bot (Landbot builder):
  1. In your chatbot builder, add this code to a Code block after your “thank you block” - the one that goes right after what you consider a conversion, (e.g. Ask a question > Email). This is the point in the flow when you want to send the event to Google Analytics. Replace the parameters with your own values:
Landbot.send('fbLandbot', {args: ['track', 'Lead']});

Change the example values with your own values. You can use landbot variable there.

Bot is not embedded, using a standalone url (share url) given by Landbot)

If you are not planning to embed Landbot in any of it's shapes, you just will share the url with the Landbot domain, this is the way to add tracking to events:

  1. You’ll start in the Ads Manager, which you reach by visiting facebook.com/ads/manage. (This is assuming that you already have a Facebook advertising account connected to your regular profile. If you’ve ever boosted a post or run an ad, you have this account.)
  2. Click on the button that says Create a Pixel. Give it a name like “[Your Company Name] Facebook Pixel.” Then click the Create Pixel button. 
  3. Click on Manually Install the Code Yourself
  4. Copy the entire pixel code to your Clipboard.
  5. Add your code as well from  Settings > SEO and Tracking > Custom Tracking Snippets: 

  1. Now you have to Add the events you'd like to track to your Facebook Pixel. Let's say you want to trigger a "New Lead" event every time your Landbot gets a new entry. You should create this event in your Facebook Pixel setup.*NoteDon't use this code in the start block (first Landbot block).
Be sure to check that there are no extra spaces when you paste the code, it should look like this: <script>fbq('track','Lead');</script>
  1. And paste this code in the Landbot block after the field you want to get. Let's suppose you want to drive a new event every time you get an email in your Landbot. You should create a new Code block after your email-capture-block and paste there your event code.

  1. To test that you installed the pixel correctly, install the Chrome Pixel Helper extension (it’s free!) and then visit your site.


How did we do?