pbroschwitz/index-stage.html

## index-stage.html
<!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>
	<!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>