Table of Contents

GTM - How Track Google Analytics Events in Landbot with Google Tag Manager

Pau Sanchez Updated by Pau Sanchez

Google Tag Manager is a tag management system that allows you to quickly and easily update tags and code snippets on your website or mobile app. 

This article explain how to send Events from Landbot to a container page using GTM and being tracked by Google Analytics.

In Landbot 3

Part Zero: In your page where the bot will be embedded

Make sure the snippets given for your workspace are ready in place in your site:

Part One: In GTM (Trigger Creation)

  1. Go to your Workspace and Select Triggers

  1. Select New

  1. Then a modal to create our new trigger will pop up. In this case we will call it LandbotEvent

  1. Now we click in Trigger Configuration

  1. And Select Custom Event:

  1. And we call the event "LeadCaptured"

And press Save

Part Two: In GTM (Tag Creation)

  1. Select Tags

  1. Select New

  1. We will call it GA event from LandbotEvent

  1. For Tag Configuration we select "Google Analytics: Universal Analytics"

  1. Select Event

  1. And fill the rest of the parameters according to your needs:

Like this:

Note make sure to fill your Google Analytics settings

  1. Now go to the Triggering Section

  1. Where we are going to select the Trigger that we just created:

  1. And now the Tag configuration is ready to Save

Now your Tag is ready:

Make sure to Publish the changes:

Part Three: In Landbot add custom event
  1. Add a Code block

  1. Add the Following code:

window.dataLayer.push({'event':'LeadCaptured'});

And testing the Bot with the Google Tag Assistant, you can see how the event is captured:

And in Google Analytics Registered:

In Landbot 2

Bear in mind that in order to do that you will need two different accounts (the Landbot container (where the bot is embedded) / the Landbot iframed (our bot)) : 

Landbot iframed
  1. To start create a new account for your the Landbot Iframe:

  1. Select Install Google Tag Manager

  1. A new window will open and you will find two HTML snippets to copy and paste only the number 1 the SEO section:

  1. Click on Apply changes, Save and go to your Builder.

  1. Create a new Code Block to track the event:
dataLayer.push({'event': 'Ebot'});

As you can see in this example, we will name the event "Ebot". 

  1. Now, return to your GTM account, select Triggers and create a new Trigger:

  1. It will be a “Custom Event” trigger type.

  1. Name it Ebot as you did in your Code block: 

  1. Now, go to your GTM main page and select Tag:

  1. Select Custom HTML: 

  1. Add the following code in Custom HTML tag and change the url (in red) to your container page root.  Do not change the event name:

<script>
  try {
      var postObject = JSON.stringify({
        event: 'Ebot', 
        bot: 'Marketing'
      });
      parent.postMessage(postObject, 'http://example.com');
} catch(e) {
  window.console && window.console.log(e);
}
  </script>

Note that you need to change the 'http://example.com' for your domain

  1. For the trigger you will use Ebot event

  1. That’s all in the embedded iframe. Now, go to preview mode:

 

  1. Check it with your Landbot url in the same browser you have the GTM opened:

  1. Then submit all your changes to your GTM account:

Landbot container

At this point, let’s set up the Container/Parent GTM

This is the GTM account of your container page (the one that has the Landbot embedded into it). 

  1. Click on “Create Account” and name it as you want, ie: Landbot container.Note: it is possible that you will embed your Landbot into your website already with a GTM account. In this case you will not need to create a new account at this step, but add all these elements:

  1. In this new GTM account, select Triggers and create a new Trigger:

  1. Now create an Ebot “CUSTOM EVENT” Trigger that fires on All Custom Events:

  1. Done this, we will need to create 3 Tags:

  1. We will start the process working with Tag number 3: 
  2. This tag is your Google Analytics Page View tag (you may already have it) but in case you don’t have it yet follow these simple steps:

- Create a New Tag

  • Tag Type: Universal Analytics
  • Track Type: Page View

  1. Google Analytics Settings: 

Select “New variable” and insert your GA tracking ID. (must be in the form UA-XXXXX-X.) If you were already using GTM is possible that you already have this Tag. 

  1. Done the set up of the Google Analytics Page View tag we go ahead with setting up Tag number 1. This Tag is used when you need to send an event to Google Analytics using GTM.First of all, we will need to create a New Tag (you’ll need a tag type and a trigger tag type): 

Tag type = Universal Analytics

Track Type = Event

  1. You will need to specify a Category and Action, use your own values like Category: Bot / Action: Lead:

  1. And finally, select your Custom event Ebot as a trigger:

  1. As last step, we will need to set up Tag number 2, the listener for the iframe event. 

- Create a New Tag > Custom HTML Tag and add the following code:

<script type="text/javascript">
(function(window) {

    addEvent(window, 'message', function(message) {
      try{
      var data = JSON.parse(message.data);
      var dataLayer = window.dataLayer || (window.dataLayer = []);
      if (data.event) {
        dataLayer.push({
          'event': data.event,
          'postMessageData': data
        });
      }
      }catch(e){}
    });

    // Cross-browser event listener
    function addEvent(el, evt, fn) {
      if (el.addEventListener) {
        el.addEventListener(evt, fn);
      } else if (el.attachEvent) {
        el.attachEvent('on' + evt, function(evt) {
          fn.call(el, evt);
        });
      } else if (typeof el['on' + evt] === 'undefined' || el['on' + evt] === null) {
        el['on' + evt] = function(evt) {
          fn.call(el, evt);
        };
      }
    }

  })(window);
</script>

  1. After saving it, you should have your two accounts ready.NOTE:Probably you’ll need to activate these variables on your GTM account. In this case,  go to Variables in left menu and click on Built-in Variables:

  1. Submit all your changes to your GTM account:

  1. Open the parent/container url in incognito, go where your landbot iframe is embedded and make an interaction until your thank you message with Ebot event is triggered.

In your GA Real time report you should see your event working, just like this one:

Channel Type compatibility

for Web

This feature is fully compatible with Web.

for WhatsApp

This feature is not compatible with WhatsApp.

for Messenger

This feature is not compatible with Messenger.

How did we do?

Landbot in your web with Google Tag Manager

Contact