Tracking Cross Domain-Iframe embedded

[Ashok_Adiyolil]

Hi fellas,

My Case:

I have a scenario which i want to track form submissions, form is getting loaded within a iframe .This iframe is a different domain say Domain B and the parent page is Domain A.We want to track the variables and events inside the iFrame.

As in my case its different domain,i might not face any challenges while implementing the DTM on it and Mid will be passed with respect to the domain.

Can anyone suggest, do we need to try this: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.

So do we need to follow postMessage  method to communicate and retrieve the values from iframe or do we need to  paste the this code inside the iframe  and the parent page to get the values?

//Instantiate Visitor 
var visitor = Visitor.getInstance("Insert Experience Cloud Organization ID here",{ 
 ... 
 //Add parent page domain name and iFrame domain names 
 whitelistParentDomain: "parentpageA.com", 
 whitelistIframeDomains: ["iFrameDomain1.com","iFrameDomain2.com"], 
 ... 
 } 
);

Reference: whitelistParentDomain and whitelistIframeDomains | Adobe Experience Cloud Services

Please help me to give suggestions for this issue.

Thanks

[yuhuisg · Accepted solution]

whitelistParentDomain and whitelistIframeDomains will help you ensure that the same visitor gets tracked with the same ID in both the parent and Iframe pages. But this assumes that your Iframe page at domain B also runs ECID and AA.

If the Iframe page at domain B doesn't run ECID and/or AA, then postMessage() would be your best choice. In that case, you'd get domain B's developers to post a message for every user interaction. Then in the parent page at domain A, your tracking code would listen for the messages and fire the appropriate beacon(s). So all tracking happens in domain A only, and the Iframe page at domain B is invisible to AA.