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

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.

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:


How did we do?


Powered by HelpDocs

Powered by HelpDocs