Google Analytics - How to send events from landbot to a container page

This article corresponds to the V2 (Classic) of the app. You can check the equivalent for the new version V3 (Bricks) here

Learn how to send events from Landbot to a container webpage and track conversions’ source in the right way!

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, send events and create goals in Google Analytics with a correct source/medium channel attribution.

Important: Deactivate the Google Analytics tracking code on the Landbot side (leave the Google Analytics ID field blank on Settings > SEO & Tracking) to make sure it doesn’t duplicate visitors.

We’ll cover now the generic step-by-step process and then a WordPress-specific one. Stay tuned!

Generic Process

  1. Add your Landbot to your container’s webpage using the snippet provided by the app (if you want to embed it as a widget/banner you can adapt it’s height, width, and position depending on how you want it to be displayed), and remember to change Landbot's URL for yours!
<script src="https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"></script>
<div id="landbot-1552919751573" style="width: 100%; height: 500px"></div>
<script>
var myLandbot = new LandbotFrameWidget({
container: '#landbot-1552919751573',
index: 'https://landbot.io/u/H-14766-613KWJL5A9WGBBE4/index.html',
});
</script>
  1. Add this code to the footer of your container’s webpage where landbot will be located: (you should always add it after the Landbot snippet of step 1).

<script>myLandbot.on('gaLandbot',function(data){ga.apply(this,data.args);});</script>

Replace "myLandbot.on" to match it with your snippet display (full-page, embed or live-chat), it can be: myLandbot.on, myLandbotFullpage.on, myLandbotPopup.on, myLandbotFrame.on

Check you are using same variable name in "myLandbot.on" (script 2.) in order to match it with "var myLandbot" (script 1.)

  1. In your chatbot builder, add this code to 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:

{html}<script>Landbot.send('gaLandbot', {args: ['send', 'event', 'Category', 'Action','Label' ]});</script>{/html}

Change only 'Category', 'Action' and 'Label' with your own values. You can use landbot variable there.

Important: If you are going to embed Landbot into your website, do not put two Google Analytics codes! The one of the container page will be more than enough! So please, deactivate your GA id in Landbot section.

Be sure you're using an standard Google Analytics implementation like this one:
    <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');ga('create', 'UA-000123123-1', 'auto');ga('send', 'pageview');
</script>


How did we do?