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?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article