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

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

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 

Datalayer variable.png

c) fireGTM variable

pastedImage_6.png
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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Tags (1)
3 REPLIES 3

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

Can you please highlight your code using the Syntax Highlighter so it's readable?

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

Sanford Whiteman‌ please check now, I have highlighted the code. Thanks!

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

And the page where you're trying this please?

I can already see that

  • the addEvent polyfill is unnecessary -- surely you're not supporting IE 8
  • you're using String#includes, which is not supported in IE at all, you must use something
  • you haven't added sufficient security to the event listener, as it's not checking origin
  • you're not parsing the JSON string consistently