Ishita Chawra

GTM, Google analytics events and Marketo forms(iframe) tracking

Discussion created by Ishita Chawra on Sep 27, 2019
Latest reply on Sep 27, 2019 by Sanford Whiteman

Hi there!

I'm aware of the various solutions in the community regarding the topic but not sure which to follow, therefore sharing my problem and implementation here.  

 

Problem: Below implementation works in debug mode (data in realtime analytics events) and after publishing (in analytics events tab) but just for me. However, it is not working for a visitor filling out the form. Also, when testing in realtime from another browser/computer it works but no data in the final events tab. 

 

Current implementation:

1. Marketo form is on a Marketo landing page and the page is within an Iframe in the hosting domain (both the domain ends with "example.com")

2. Two containers of Google Tag Manager(GTM), Container 1 embedded in the main domain and Container 2 in Marketo Landing page.

3. Container 2 has a "sender-postmessage" tag sending data to Container 1. Here is the script:

<script>
MktoForms2.whenReady(function (form) {
form.onSuccess(function(){
var vals = form.vals();
dataLayer.push({
'event': 'marketoFormSubmit',
});
try {
var form_origin;
if (window.location.href.includes('Request-For-Product')) {
form_origin = 'Request-For-Product';
} else {
form_origin = window.location.href;
}
var postObject = JSON.stringify({
event: 'marketoFormSubmit',
form: form_origin
});
parent.postMessage(postObject, 'https://www.example.com');
} catch(e) {
window.console && window.console.log(e);
}
});
});
</script>

 

4. Container 1 has a "listener-postmessage" tag to receive the data

a) Page view is the trigger

b) Data layer variable 

c) fireGTM variable


d) Listener tag:

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

Outcomes