Google Analytics - How to track events inside your bot with GA

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

As an alternative you can also use the public Brick Workaround already built for this: Google Analytics - Events v0.1

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. Grab the tracking ID from Google Analytics

  1. Go to Setting section of the Bot

  1. Go to the SEO & TRACKING section

  1. On the right side, add your Google Analytics ID under the field with the same name:

  1. Click Apply changes at the bottom and then Save & Publish on the top-right corner to save your ID:
  2. Back in the builder we will add the Google Analytics block after the block we want to track, in this example after the Email question:

Make sure you put the Google Analytics Event right after the block that means the conversion for you!
  1. First, create a new Google Analytics type block:

  1. All you have to do is:
    1. Add an Event Category.
    2. Add an Event action.
    3. Click on Advanced Options, where you'll be able to:
  2. If you're done configuring your event, click Save to save your changes. Every time a user goes through - triggers - that block, the event you've just configured will trigger too!

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:


How did we do?