It is typically recommended for the OM SDK Service Script and Session Client Script to be loaded directly in the creative window in script tags, as described in the main guide. However, you may choose to put one or both of these scripts in an IFrame in order to isolate them from other code, for example if you are concerned that multiple copies of the OM SDK may be loaded in the same window. Such usage is subject to certain restrictions; otherwise OMID measurement will not work.
The <iframe> loading the Service Script must not have display:none as its style, since some browsers (including Firefox) throttle <iframe>s with display:none in ways that break OM SDK’s measurement. As an alternative, visibility:hidden; width: 0; height: 0; position: absolute; may be used to prevent the <iframe> from interfering with the creative while preserving measurement capability.
The OM SDK Service Script must be same-origin relative to ad creative’s HTML (e.g. the <video> element) in order to measure it correctly. Additionally, it must also be loaded in a non-null origin.
This means that Service Script and the creative may be <iframe>‘d from the top window, but they must share the same non-null origin. The following configurations are acceptable:
<iframe> (ads.example), cross-origin to the top window (publisher.example)The following configurations will not work:
<iframe> (ads.example).<iframe> created with srcdoc= or src=about:blank.The OM SDK JS Session Client has no restrictions on which origin or window it is loaded in.
However, if it is loaded in a window with a different origin from the window loading the Service Script, you must call an API present on the Service Script’s window object that allows the Service Script to accept communication from the JS Session Client. This API is located at window.omidSessionInterface.setSessionClientWindow.
If this API is not called, the integration will not work with version 1.4.9 and later of the Service Script.
An example implementation is provided below in which the Service Script is loaded in the top window and the JS Session Client is loaded in a cross-origin IFrame (more complicated setups, such as loading the Service Script in an iframe, may require a slightly different approach).
https://publisher.example/index.html (top window):<html>
<body>
<script src="https://mycdn.example/omweb-v1.js"></script>
<iframe id="session-client-frame" src="https://ads.example/frame.html"></iframe>
<script src="https://mycdn.example/my-top-integration.js"></script>
</body>
</html>
https://mycdn.example/my-top-integration.js:const sessionClientFrame = document.getElementById('session-client-frame');
const sessionClientWindow = sessionClientFrame.contentWindow;
window.omidSessionInterface.setSessionClientWindow(sessionClientWindow);
https://ads.example/frame.html (IFrame):<html>
<body>
<script src="httsp://mycdn.example/omid-session-client-v1.js"></script>
<script src="https://mycdn.example/my-session-client-integration.js"></script>
</body>
</html>
https://mycdn.example/my-session-client-integration.js:const sessionClient = window.OmidSessionClient['default'];
const {AdSession, Context} = sessionClient;
const myServiceWindow = window.parent;
const context = new Context(...); // see main guide for more details
context.setServiceWindow(myServiceWindow);
const adSession = new AdSession(context);