Table of Contents

Google Analytics - Track Events (Embedded)

Pau Sanchez Updated by Pau Sanchez

This process is only suitable for Embedded landbots. If you're landbot is not embedded in your website, check our guide here

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).

Landbot 3

Google Analytics (analytics.js)

Important: Do not use 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.

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.

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

<html>
    
    <head>

        <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-143070961-1', 'auto');ga('send', 'pageview'); 
        </script>

<script SameSite="None; Secure" src="https://cdn.landbot.io/landbot-3/landbot-3.0.0.js"></script>
<script>
  var myLandbot = new Landbot.Livechat({
    configUrl: 'https://chats.landbot.io/u/H-469156-KZP5BY06MTWL17OY/index.json',
  });
</script>

    </head> 
    
    <body> 
    </body>

        

</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 UA-143070961-1 for your Google Analytics ID


        <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-143070961-1', 'auto');ga('send', 'pageview'); 
        </script>

  1. And of course, add your Landbot to your container’s webpage using the snippet provided by the app:

       <script SameSite="None; Secure" src="https://cdn.landbot.io/landbot-3/landbot-3.0.0.js"></script>
<script>
  var myLandbot = new Landbot.Livechat({
    configUrl: 'https://chats.landbot.io/u/H-469156-KZP5BY06MTWL17OY/index.json',
  });
</script>

What to edit in your bot (Landbot builder):
  1. In your chatbot builder, add this code to a Code block, right where you want the tracking be triggered This is the point in the flow when you want to send the event to Google Analytics. Replace the parameters with your own values:
window.ga('send', 'event','Category','Action','Label');

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

Google Analytics 4 (GA4)

Important: Do not use 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.

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.

Get tracking code from GA:
  1. First you need to make sure your site has the tracking snippet from GA4, to find the snippet go to ADMIN > Setup Assistant > Tag Installation > Web and select your site > Tagging Instructions:
  2. Select Global Site Tag (gtag.js) and copy the snippet
What to edit in the Site (container):
  1. Paste the snippet in your site in the <head> section

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

<html>
    
    <head>

        <script async src="https://www.googletagmanager.com/gtag/js?id=G-KR858PEP3L"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-KR858PEP3L');
        </script>
    </head> 
    
    <body> 
    </body>

        

</html>

  1. And of course, add your Landbot to your container’s webpage using the snippet provided by the app:

       <script SameSite="None; Secure" src="https://cdn.landbot.io/landbot-3/landbot-3.0.0.js"></script>
<script>
  var myLandbot = new Landbot.Livechat({
    configUrl: 'https://chats.landbot.io/u/H-469156-KZP5BY06MTWL17OY/index.json',
  });
</script>

What to edit in your bot (Landbot builder):

  1. In your chatbot builder, add this code to a Code block, right where you want the tracking be triggered This is the point in the flow when you want to send the event to Google Analytics. Replace the parameters with your own values:
window.gtag('event', 'start chat')

Change "start chat" for the name of the event desired

Test the event:
  1. Once the setup above is complete you can test the event by using the bot and arrive to the step where the code block is. After few seconds (15 seconds more or less) you should be able to see your event in the real time section:

Optional: Track bot displayed (On Welcome Message displayed)
One thing to keep in mind when using scripts in the welcome message is that they will trigger twice

If you want to track when the bot is displayed to the user, before the conversation is started. You can add a event trigger like this:

<script> if (!window.pushedEvent) { window.gtag('event', 'welcome loaded') window.pushedEvent = true; } </script>

Landbot 2

Important: Do not use 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.

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.

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

<html>
    
    <head>

        <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-143070961-1', 'auto');ga('send', 'pageview'); 
        </script>

    </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-206937-H01JO4AEOMBZBTHI/index.html', }); 
        </script> 
        

        <script> 
            myLandbot.on('gaLandbot',function(data){ ga.apply(this,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 UA-143070961-1 for your Google Analytics ID


        <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-143070961-1', 'auto');ga('send', 'pageview'); 
        </script>

  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-206937-H01JO4AEOMBZBTHI/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('gaLandbot',function(data){ ga.apply(this,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('gaLandbot', {args: ['send', 'event','Category','Action','Label']});

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

FAQ & Troubleshooting

How can I check if the tracking is working correctly?

When using Google Chrome extension Google Tag Assistant if the tracking of an event has been done correctly you will see a screen similar to this one:

Channel Type compatibility

for Web

This feature is fully compatible.

for WhatsApp

This block/functionality is not compatible with WhatsApp.

for Messenger

This block/functionality is not compatible with Messenger.

How did we do?

Google Analytics - Track Events (Not embedded)

Contact