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:
Create new trigger
Choose trigger type
Name the trigger and set it up for hitting on page with your form url
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.

Create a new tag
Go with Custom HTML tag
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.
Enter the code

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

Connect tag to trigger
Choose a trigger which was created on a step 2
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.

Connect to preview mode
GTM FormSubmit on iframe

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.

Tags =&gt; New =&gt; Choose a tag type...=&gt; Custom HTML

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.
Create new trigger for this tag
Trigger type = 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.
Choose pages to listen to
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):

Tags =&gt; New =&gt; Choose a tag type...=&gt; Google Analytics: GA4 Configuration

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.

Setting Up GA 4 Configuration tag

Add trigger:
Create new Page View type trigger

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

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


Settings for Google Analytics Universal:
Create new Tag in your parent frame account for Google Analytics:
Tags =&gt; New =&gt; Choose a tag type...=&gt; Google Analytics: Universal Analytics

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


Add parameters
Add trigger
Add event to fire on

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

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.