Google Tag Manager (GTM) Tracking for Forms Embed as Iframes

What is the Google Tag Manager used for?
Tag Manager gives the ability to add and update own tags for conversion tracking, site analytics, remarketing, and more.

What is the iframe?
An iframe is an inline frame used inside a webpage to load another HTML document inside it. Actually, this is a website into another website.

So how to use GTM for tracking of Forms Embed as Iframes:
Push Data From Your Iframe to Your Parent Frame.
Track iframe interactions by sending a JavaScript call "postMessage" from the iframe to the parent frame.
The parent frame will listen to the call with Google Tag Manager, then forward it to your marketing tools.

Here is a detailed description of how to set it up:

1. Install GTM on your Child Iframe:
Create a new Google Tag Manager account to associate with your child frame.
No need to create a separate Google login, but your parent frame should have its own account and container.

Even if you already have GTM installed on the website that contains the iframe, it won’t be able to pick up any user interactions that occur inside the iframe.

2. Set up the trigger:



DON`T forget to replace https://mf.mfs.gg/edited with your form URL.

3. Connect this trigger to a tag:
Send the data to parent frame with Google Tag Manager. For that create special sender tag for postMessage.



Enter the code:

<script>
try {
var postObject = JSON.stringify({
event: 'iframeFormSubmit',
form: 'Form name'/
});
parent.postMessage(postObject, 'https://mf.mfs.gg/edited');
} catch(e) {
window.console && window.console.log(e);
}
</script>

DON`T forget to replace https://mf.mfs.gg/edited with your form URL in the code, add your Form Name.


dataLayer.push method adds/updates data that is stored in the Data Layer. You can pass in any kind of key value pairs, this would then be transmitted to parent frame.
In our case we have: event: 'iframeFormSubmit', form: 'Form name'.



Now you can save this, refresh and preview in debug mode.

4. Check the result in debug mode:
Now in debug mode you can see that GTM formSubmit happened.




Data should now be sent to the parent frame, and in this parent frame nothing happens, because we have to build a listener for postMessages.

5. Install listener for postMessages in parent frame:
In parent website account, create custom HTML tag again.

New => Choose a tag type...=> Custom HTML

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

This code just listens for this postMessage, picks up what is in this postMessage, and pushes it to the dataLayer.
Now in order for this to work, we have to deploy it on the right page.


You can go with All Pages if you want to, also you can set up it to listen only for messages on Iframe page.

Now you can refresh page and Preview it in debug mode, to test the form, submit it to fire postMessage.
Now listener for postMessages created.

6. So now go ahead in Google Tag Manager and build a Google Analytics event tag for FormSubmits:

Settings for Google Analytics 4:
Create new Tag in your parent frame account for Google Analytics (for listening of events GA4 Event tag can be created):

New => Choose a tag type...=> Google Analytics: GA4 Configuration

Go to your Google Analytics account, find your measurmentID, paste it in settings:
To find measurment ID in Google Analytics Account, go to Admin, make sure that you have the desired account and property selected. In the Property column, click Data Streams, then click your web data stream. Your “G-” Measurement ID appears in the upper right portion of the panel.



Add trigger:


Run your parent frame in debug(Preview) mode to see if Tags Fire:


Go to your Google Analytics 4 account debug mode to inspect date which are received from our Parent frame:



Settings for Google Analytics Universal:
Create new Tag in your parent frame account for Google Analytics:

New => Choose a tag type...=> Google Analytics: Universal Analytics

Now Google Analytics is setted up. Google analytics event fires. Check it in Debug mode.