Skip to content

Instantly share code, notes, and snippets.

@pbroschwitz
Created June 25, 2021 13:23
Show Gist options
  • Save pbroschwitz/9c8c1173e380769e9026bbebebce6207 to your computer and use it in GitHub Desktop.
Save pbroschwitz/9c8c1173e380769e9026bbebebce6207 to your computer and use it in GitHub Desktop.
Stage testing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent iframe</title>
</head>
<body>
<h1>Parent iframe</h1>
<textarea id="log" width="40" height="30"></textarea>
<!--
NOTE
- Domain in `src` attribute must match `iframeUrl` variable
- `isPartnerLink` parameter is necessary in order to send events to the parent
-->
<iframe
id="iframe"
allowfullscreen="true"
frameborder="1"
src="https://d3sx0vtgtx7z8n.cloudfront.net/checkout/reiseversicherung?isPartnerLink=true&brokerid=20503003"
style="width:100vw;height:100vh"
></iframe>
<script>
// Listen to message from child
window.addEventListener("message", (event) => {
const dataLayer = []
// console.log('event.data is :>> ', event.data)
// Check origin
const iframeUrl = 'https://d3sx0vtgtx7z8n.cloudfront.net'
if (!event.origin.startsWith(iframeUrl)) { return }
//
// Deal with scrollDimension messages
//
if (JSON.parse(event.data).hasOwnProperty('scrollWidth')) {
dataLayer.push(event.data)
const log = document.getElementById('log')
if (dataLayer.length) {
log.append(JSON.stringify(dataLayer)
.replace(/\\/g, "")
.concat("\n\n"))
}
console.log('dataLayer :>> ', JSON.parse(dataLayer))
return
}
//
// Start tracking here
// ...
//
// DEBUG
//
// dataLayer.push(event.data)
// const log = document.getElementById('log')
// if (dataLayer.length) {
// log.append(JSON.stringify(dataLayer)
// .replace(/\\/g, "")
// .concat("\n\n"))
// }
// console.log('dataLayer :>> ', JSON.parse(dataLayer))
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment