How do I use the postMessage method with cross-site iframes?
Вставка
- Опубліковано 31 лип 2024
- When you embed content from another site with an iframe, it creates a separate browser window context that just happens to be embedded within the main page.
This embedded window needs to follow all the rules that web communications adhere to, including how to work with storage access.
Because it's a cross-site iframe (so the main domain of the iframe is different from the domain of the page the iframe is embedded in), any cookie access that happens within the iframe happens in a third-party context. Many browsers today block third-party cookies outright.
This, in turn, means that tools that require cookie access, such as Google Analytics 4, will not work in a cross-site iframe in these browsers.
To tackle this, we'll address a very popular Simmer Community question:
"How do I work with third-party iframes when browsers block storage access in them?"
The answer is the window.postMessage() method. With postMessage, you can send messages from the iframe to the parent page. The parent page can then take those messages and forward them to whatever service the iframe itself was incapable of communicating with, such as Google Analytics 4.
In this video, I'll show you how postMessage works, and how you can build both the receiver and the dispatcher with some simple JavaScript methods.
I really recommend you check out the related article, too:
www.teamsimmer.com/2023/05/02...
This article includes a more elaborate walkthrough of postMessage together with all the code samples from the video. I'll also share with you a full Custom HTML tag setup (one for the parent page and one for the iframe page) to make GA4 tracking work with cross-site iframes.
KEY MOMENTS
00:00 Intro
00:25 The question we'll be discussing in this video
00:33 How iframes work and overview of postMessage
01:39 Send messages from the iframe to the top window
02:17 Build the event listener that detects the messages
03:20 How to check the event came from a reliable source
04:00 Switch to the iframe context
04:20 Build the message dispatcher in the iframe
06:00 Test that it works
06:32 Send messages from the top window to the iframe
07:10 Find a reference to the iframe before dispatching messages to it
08:30 Test that it works
08:45 Recap and outro
LINKS
🔗 Simmer Newsletter
www.teamsimmer.com/newsletter/
🔗 Simmer Blog
www.teamsimmer.com/blog/
🔗 JavaScript For Digital Marketers (online course)
www.teamsimmer.com/all-course...
🔗 Technical Marketing Handbook Podcast
www.teamsimmer.com/tmh-podcast/
🔗 Standard Deviation Podcast
standard-deviation-podcast.si...
CONNECT WITH US
🔔 Twitter / team_simmer
🔔 LinkedIn / simmeroy
🔔 Instagram / team.simmer
#javascript #marketing #measure
Thank you. I've been stuck on cors policies issues for 2 weeks, this video helped me understand incredibly quick how post message works!
Simple and straight to the point. PERFECT!
Thank you for sharing the excellent post😊. I encountered a similar issue during one of my projects, but at that time I was unaware of it because the tags were firing in the Tag Assistant, but the hit was not being sent. Fortunately, my developers were able to identify and resolve the issue.
Thank you so much! I've been struggling with this over the past few weeks, as I've been working with a couple of clients who use a 3rd-party scheduling system embedded in an iFrame. Working with the developers of the 3rd-party system, we mostly got this working, but now I have a way to really understand this on my own for future reference. I'll probably watch this a couple of times before it all sinks in, but this will help me with future clients.
Thank you, hopefully it will all be clear after watching the video and reading the article ☺️
Thanks a lot!
This + article is really helpful
Thanks. This was a great video .
Tks master!
Perfecto :)
Hi, Can capture data when it is still in the process of loading? or does it need to be completely loaded to receive data from parent? I'm working on analytics I need data to be passed to an form parent before it loads. Because I need to send onload page details to adobe as soon as it loads. the method will automatically triggered on load of so i need data before it loads.
Hi, the does not need to be loaded completely, no. The listener and the dispatcher just need to be loaded for the channel to work.
What browser do you use? im using firefox but don't have top option in console
We use Google Chrome whenever developer tools are needed. Chrome has many downsides but its developer tools are the best.
How to post a message from the parent window to the looker which is appended to div element
Hi, I'm not sure what you mean with "looker", but the placement of the is irrelevant - you just need to use a CSS selector to locate it on the page to be able to post to it.
Hi! Thanks for the video. When you capture at the end of it dataLayerReady, status:true I have this message --> VM1607:1 Uncaught TypeError: Cannot read properties of null (reading 'contentWindow')
at :1:33 . Is it needed to do a changes from dev team in the datalayer? Could you upload a video to know how it works in GTM? This could help to understand it better rather than reading a long document with so technical points that can you can get lost.. Thanks!!
Will this work if you don't own the source code of the main website that is embedding the ?
You don't need to own the source code but you do need to be able to run your scripts in both the and the parent page.