How to track third party Iframe content

[DhanA2]

Hey Experts,

I have a scenario which i want to track form submissions, form is getting loaded within a iframe  these form content is loaed from another third-party website.

Page A : We have control header and footer loaded from our side (www.mydomain.com)

Page B(iframe embeded on Page A): loaded within i frame from a third-party website.(www.3rdpartydomain.com)

I wanted to tack form submission  and also wants implement data layer to get the  values.

I have to implement these via adobe launch.

Please suggest me best practices and way to archive this

[yuhuisg · Accepted solution]

The short answer is: You can't.

The long answer is:

There are browser security restrictions that prevent messages and events from being passed between the parent frame and an IFrame, especially when the IFrame loads a page that is not in the same domain as the current web page. This is to prevent all sorts of malicious attacks that I won't get into here.

The only way you can know what is happening in an IFrame that loads a third-party page is if that third-party page posts "messages" back to the parent frame via the postMessage() browser API. But to do so, you need to be able to add code to that third-party page. In your situation, you don't have control of that third-party page, so you're basically out of luck.

Here is a tutorial on how to use postMessage() to communicate between the parent page and the IFrame: https://www.dyn-web.com/tutorials/iframes/postmessage/