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

In this article, we will cover the process we need to follow to connect our chatbot to Google Analytics to track the events, for example, to get information about new leads. 

In this case, we will focus on those cases where the chatbot is embedded on a site, whether it is as a Fullpage, Popup, Embed or Livechat (with custom domain).

Screenshot that shows how to embed a chatbot in your website

Google Analytics 4 (GA4)

As previously mentioned, this process applies when the chatbot is embedded on your website, using a domain different from ‘landbot.io’. It is very useful for tracking conversions and events and creating goals in Google Analytics, as well as for establishing a correct source/medium/channel attribution.

Important: Do not use the Google Analytics tracking code on the Landbot SEO & Tracking settings. Leave the Google Analytics ID field blank to make sure it doesn’t duplicate visitors on Google Analytics.

Screenshot that shows where to add the SEO and tracking set-up when creating a chatbot with Landbot
How to Copy the Tracking Code From GA:

First off, in order for Google Analytics to track the events from your chatbot, you will need to add the following snippet to the code of the webpage where you have embedded your chatbot right after the ‘Head’ tag:  need to copy the following snippet to add to your webpage, right after the <head> tag:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"></script>
<script>
   window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXX');
</script>
  1. Note that you'll need to change a small part of this code to match it with your Google Analytics information, the ‘G-XXX’ in the script, repeated twice.
  2. There, you will need to add your GA4 Measurement ID, which you can find in 'Data Streams' in the Admin section of your Google Analytics account:
    1. Go to ‘Admin’ at the left bottom of the page.
      Screenshot that explains where to find the GA4 Measurement ID
    2. Click on 'Data streams'.
      Screenshot of Google Analytics data streams
    3. Click on the domain you want to use, in our case, would be https://landbot.io
      Screenshot that shows part of the process to track chatbot events on Google Analytics
    4. You will find the GA4 Measurement ID there. Copy that ID and paste it into the snippet we shared above.
    Screenshot that shows where to find the measurement ID on Google Analytics

In this case, the snippet would look like this, changing the G-XXXX, for your Measurement ID: 

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

What You Need to Edit On Your Site (the Container)

Now that we have the snippet ready with our GA4 Measurement ID, let’s go back to the website where we have placed the chatbot. 

We have to add the snippet to the site's code, specifically in the ‘head section’. 

Here’s an example of how the code on your site is going to look like with the snippet, following the instructions above:

<html>
    
    <head>

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

        

</html>

In case you haven’t done that already, remember that you also need to add the chatbot code to the webpage where you want to place it. To do that, copy the snippet provided by Landbot in the builder's ‘Share’ section. There, you can choose how you want to display the chatbot, as we have seen before (full page, popup, embed, or live chat). Select the option that better suits your needs and paste the code you will find anywhere in the ‘body’ section of your website.

Screenshot that shows how to embed a chatbot in a website by adding the script

This is an example of code you will need to paste to your site in order to add your chatbot:


       <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-XXX-KZP5BY06MTWL17OY/index.json',
  });
</script>

What You Need to Edit in Your Bot on the Landbot Builder

In your chatbot builder, you will need to add a Code block right where you want the tracking to be triggered. For example, you could add right after the lead generation questions, such as when we ask for their name, phone number, or email. This is the point in the flow when you want to send the event to Google Analytics to track it.

Screenshot that shows how to add a code block to trigger an event in your chatbot

Once you have created the ‘Code block’ as part of your bot flow, you will have to replace the existing parameters with your own values as follows: 

window.gtag('event', 'start chat')

You also have to add the name of the event you have set on Google Analytics to the code. In our case, we have selected the ‘start chat’ event, as you can see below.

Test the Bot and the Event

Once the setup we have described is complete, it’s time to test your bot and make sure the event is tracked properly on Google Analytics. Keep in mind that if you test your bot in the preview mode, the events will not be triggered. Therefore, you have to test the bot in production to ensure everything works smoothly.

We recommend you start interacting with your bot until you get to the step of the flow where you added the code block. After a few seconds (15 seconds approximately), you should be able to see your event in the real-time section of Google Analytics:

Find here an example of how we can add GA4 to WordPress:

How to Track When the Bot Is Displayed to the User

You need to keep in mind, though, that whenever you use a script in the welcome message, it will trigger twice.

If you want to track and know when the bot is displayed to the user, even before the conversion has started, you can add an event trigger, like the one below, to the ‘welcome message’:  

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

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)

Meta Pixel - Track Events (only Embedded)

Contact