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:

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.

Set up the trigger:

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

Connect this trigger to a tag:

Send the data to parent frame with Google Tag Manager. For that create special sender tag for postMessage.

Create a new tag:

Go with Custom HTML tag:

Enter the code:
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);

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

dataLayer.push method enables one to add/update data that is stored in the Data Layer. You put in any kind of key value pairs, this would then be transmitted to parent frame.
In our case we have: vent: 'iframeFormSubmit', form: 'Form name'.

Connect it to trigger:

Now you can save this, refresh and preview 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 any kind of postMessages.

Go over to Google Tag Manager, back to parent frame and install a listener for postMessages.
In parent website account, create custom HTML tag again.

Enter the code:
<script type="text/javascript">
(function(window) {

addEvent(window, 'message', function(message) {
var data = JSON.parse(message.data);
var dataLayer = window.dataLayer || (window.dataLayer = []);
if (data.event) {
'event': data.event,
'postMessageData': data

// 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);


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.

Create new page-view

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.

So now you can 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:

Go to your Google Analytics account, find your measurmentID, and 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 recieved from our Parentframe:

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

Add trigger:

Now Google Analytics is setted up. Google analytics event fires. Check it in Debug mode.
Was this article helpful?
Thank you!