Cross-Domain Tracking of iFrames

Created by Calenso Support, Modified on Thu, 17 Aug, 2023 at 11:32 AM by Calenso Support

In order for the iFrame widget to be tracked within a landing page with a different domain, the following structure must be used in the website. The iFrame sends the tracking events to the parent landing page. This landing page can then process these events or transmit them to GTM.

<script>
   function onLoadIframe() {
       const frame = document.getElementById('smart-widget-obj');
       console.log('Inside onLoadIframe()');
       setTimeout(function() {
           console.log('Inside onLoadIframe() before firing');
           frame.contentWindow.postMessage({
               name: 'from parent to child',
               eventName: 'PARENT_TO_CHILD_WEBSITE_EVENT'
           }, '*');
       }, 3000);
   }    
   
   window.addEventListener('message', (eventData) => {
       if (eventData.data.event === 'CALENSO_CHILD_TO_PARENT_EVENT') {
           console.log('Calenso Tracking Data is ', eventData.data.step);
       }
   });
   
</script>

<iframe id="smart-widget-obj" src="LINK_ZUM_WIDGET" height="1000px" width="100%" scrolling="no" allowfullscreen onload="onLoadIframe()"></iframe>

Was this article helpful?