How to send Events from Landbot iframe to a container page using Google Tag Manager

Updated 1 week ago by Enrico

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 iframe to a container page using GTM. In order to do that you will need two different containers: 


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




Select Install Google Tag Manager



A new window will open and you will find two HTML snippets to copy and paste:


Now, go to Landbot, Builder - Settings - Seo and Tracking and paste the first snippet as below:


Click on Apply change and go to Design - Advanced and paste the second snippet:


Click on Save and go to your Builder. Create a new Send Message to thank the users who left you an information and add this code into your block:

{html}
          <script>
          dataLayer.push({'event': 'Ebot'});
          </script>
          {/html}
          


We will name the event "Ebot"


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



It will be a “Custom Event” trigger type.


Name it Ebot as you did in your thank-you message: 



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

Select Custom HTML


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>



For the trigger you will use Ebot event





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


 

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


Then submit all your changes to your GTM account:


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

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:




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


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

Done this, we will need to create 3 Tags:


We will start the process working with Tag number 3

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


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. 



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



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


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


    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>

    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:

    Submit all your changes to your GTM account:


    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:






    How did we do?