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

Updated 3 months ago by Fran

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

You should apply this process when landbot is embedded into your website - using a domain that’s different from “landbot.io”.

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 the following code to your webpage’s header, right before the closing tag (</Head>).

    <script src="https://static.landbot.io/umicore/UmiAccessPoint.js"></script>
  2. Add the iFrame to your container’s website using the following snippet (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!)

    <iframe style="position: absolute; left: 0; right: 0; bottom: 0; top: 0; border: 0;" src="https://landbot.io/u/H-27559-VVJCR83TJ7GYQCH/index.html" name="LANDBOT_NAME" width="100%" height="500px" frameborder="0"></iframe>
  3. Add this code to the footer of your container’s webpage where landbot will be located:

    <script> var myLandbot = new LandbotAP('LANDBOT_NAME'); myLandbot.on('gaLandbot',function(data){ga.apply(this,data.args);});</script>
  4. 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). Replace the parameters with your own values:

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

WordPress Process  

  1.  Add the following code to your webpage’s header, right before the closing tag (</Head>). Path: Appearance > Editor > Choose your template > Search for the header.php file > Insert the code before the closing tag </head>

    <script src="https://static.landbot.io/umicore/UmiAccessPoint.js"></script>




  2. Add the iFrame to your container’s website using the following snippet (you can adapt it’s height, width and position depending on how you want it to be displayed, and remember to change the bolded URL for yours!):

    <iframe style="position: absolute; left: 0; right: 0; bottom: 0; top: 0; border: 0;" src="https://landbot.io/u/H-27559-VVJCR83TJ7GYQCPH/index.html" name="LANDBOT_NAME" width="100%" height="500px" frameborder="0"></iframe>



  3. Add this code to the footer of the container’s website where landbot will be hosted. To do so, you can download and use the Script and Styles WordPress’ plugin. Once activated, it will add a new section to your pages editor. Insert the code in the bottom field just like in the image below:



    <script> var myLandbot = new LandbotAP('LANDBOT_NAME'); myLandbot.on('gaLandbot',function(data){ga.apply(this,data.args);});</script>
    Depending on the plugin or template you use, it will affect to <script> and {html} tags.
  4. 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. Replace the bolded parameters with your own values:

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




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!

How did we do?