I'm trying to set up conversion tracking for Pardot forms set up in iFrames. I've added the HTML code to the forms thank you page and set up 2 tags in Google Tag Manager. It looks like my second tag is not firing and I'm not sure why. I will post code and steps I've taken so far.
Thank you page code:
<script>
try {
parent.postMessage(‘iframeTestPageLoad’, ‘https://www.websitename.com‘);
} catch(e) {
// Something went wrong…
window.console && window.console.log(e);
}
</script>
Listener Tag 1 in Google Tag Manager:
tag with custom HTML
trigger fires on all pages
window.addEventListener(‘message’,function(){ if (event.origin === “https://go.pardot.com“ && event.data === ‘iframeTestPageLoad’) { window.dataLayer.push({‘event’: ‘formSubmit’}); } else { console.log(‘the tag did not work’) } }, false)
Tag 2 to send info to GA:
- track type is Event
- custom event trigger named 'formSubmit'
When testing in preview mode and submitting form Tag 1 is being fired but not Tag 2. When running this with Dev tool I see the following errors: "Failed to load resource: net::ERR_NAME_NOT_RESOLVED" associated with website in iFrame code. When I click "view frame source" on form I can find this website used in code....
<link rel="stylesheet" href="https://xxxxxxxx.azurewebsites.net/Static/_fonts.css">
Any help on this would be much appriciated!