What is an iFrame?
An iFrame can be thought of as a website inside a website, the iFrame’s source code is loaded by the parent website code, but it functions independently of the Parent website’s code. Neither GTM nor Factors tag can not track an iFrame event since both the tags are deployed on the parent website and not on the iFrame.
Checking if the form is an iFrame
Right-click on the form and click on Inspect.
You will see the element placed between <iframe> </iframe> tag
A. Tracking the iFrame with an event listener
We need to place an event listener in the source script of the iFrame form.
Place the following code and pass the right email Id parameter from the Form into the body of the iFrame script.
document.getElementById('pardot-form').addEventListener('submit', function(event) { const email = document.getElementById('413792_327983pi_413792_327983').value; console.log(email);const message = {origin: 'factors', type: '$form_submitted', message: {'$email': email,'$formType': 'demo-booking' },};window.parent.postMessage(message,'*'); });
Note- The script marked in bold should be modified according to your Pardot form implementation.
The script NOT in bold is static, we can add more parameters along with $email, $formType to be passed back to Factors.ai by modifying the dynamic script.
B. Tracking iFrame using Google Tag Manager
Refer to this video from MeasureSchool which explains how to set up GTM for iFrames.
Note- This approach is tedious compared to the previous method. Only use this method if you want to send events to GA4.