Cross⁠-⁠domain iFrame Tracking

To enable cross-domain iFrame tracking, you need to add the crossdomain.enabled option to the tracker’s constructor, then add domain area via data-domain to all desired iFrames like so:

<iframe
  title="test"
  src="http://iframe1.website.com/iframe-path"
  width="300"
  height="300"
  data-domain="iframe1.website.com"
></iframe>

Add the crossdomain option following to your tracker constructor:

const tracker = new OpenReplay({
  projectKey: PROJECT_KEY,
  crossdomain: {
    enabled: true
  },
  captureIFrames: true
});

Then initialize the tracker instance inside the desired iFrame and add crossdomain.parentDomain to its constructor:

const tracker = new OpenReplay({
  projectKey: PROJECT_KEY,
  crossdomain: {
    // Specifies the domain of the parent window
    // If not specified, it will be set to '*'
    // Which means that child window will send messages to all domains inside the browser window
    // Consult your CSP settings to ensure that '*' is allowed or specify the parent domain
    parentDomain: '*',
    enabled: true
  }
});

Please note that if you’re using tracker snippet, we recommend using regular (openreplay.js) instance instead of openreplay-assist.js for child iframes (since assist session should connect to parent instance only).

Have questions?

If you encounter any issues, connect to our Slack or check out our Forum and get help from our community.