Event creativeDisplayed for Fullpage Interstitials

August 6th 2021

What’s new?

Publishers and Advertisers alike often need to know in real-time when the Desktop Fullpage Interstitial or Mobile Fullpage Interstitial (DFI/MFI) ads are actually being displayed to the final user.

On the Publisher side, this could be to track user behavior or simply pause a video player that would remain playing in the background of a page.

As an Advertiser, this information could be used to dynamically trigger specific creatives.

With this feature, Publishers can add a listener to Ad Zones to trigger a custom event that can then be consumed when the ad is displayed to the user.

Similarly, for Advertisers, a listener can be added to iframe campaigns to trigger custom events when the ad is displayed.

What can this new feature do for me?

A new event called ‘creativeDisplayed’ is now available to be used in both Publisher Ad Zones and Advertiser Campaigns.

For Publishers, this event is suffixed with the relevant zone id ('creativeDisplayed-<ZONE_ID>').

As an Advertiser, since you can track events in your Ads, you can add an event listener inside your iframe to programmatically catch the sent message by this event once the ad is displayed to the user.
As a Publisher, you can add an event listener to this event to programmatically execute any action you may need on your website, such as pause a playing video when the Fullpage Interstitial is being displayed to the user.

Details

Advertisers

By using the script below, you track the event creativeDisplayed inside your iframe.

<script>
        function readMessage(event) {
            console.log("readMessage event");
            console.log("origin: " + event.origin);
            console.log("data: " + event.data);
        }
        if (window.addEventListener) {
            // For standards-compliant web browsers
            window.addEventListener("message", readMessage, false);
        } else {
            window.attachEvent("onmessage", readMessage);
        }
</script>

Example - Fullpage Interstitial

<!DOCTYPE html>
<html>
    <head>
        <!-- EVENT PART -->
        <script>
            function readMessage(event) {
                console.log("readMessage event");
                console.log("origin: " + event.origin);
                console.log("data: " + event.data);
                var message = "We got message: '" + event.data + "' from '" + event.origin + "' (we are on advertiser iframe now)";
                console.log(message);
                document.getElementById("received-message").innerHTML = message; // ie advertiser wants to update some element
            }
            if (window.addEventListener) {
                // For standards-compliant web browsers
                window.addEventListener("message", readMessage, false);
            } else {
                window.attachEvent("onmessage", readMessage);
            }
        </script>
        <!-- END OF EVENT PART -->
    </head>
    <body>
        <h1>My test iframe heading</h1>
        <p>My test iframe paragraph</p>
        <p id="received-message">Waiting for the message</p>
    </body>
</html>

Publishers

By using the script provided in the message box below your new zone script, you can execute any action you may need on your website.

screenshot

Example - Fullpage Interstitial

Added idzone = 4362883

Action to execute = Display message Creative shown!

<script type="application/javascript" data-idzone="4362883"  data-ad_frequency_count="20"  data-ad_frequency_period="60"  data-type="desktop" data-browser_settings="1" data-ad_trigger_method="3" src="https://a.examplesite.com/fp-interstitial.js"></script>
<a href="https://www.exads.com">Visit exads.com!</a>
<script type="application/javascript">
    document.addEventListener('creativeDisplayed-4362883', function (e) {
        console.log("Creative shown!");
    }, false);
</script>