Adding HTML Events for Fullpage Interstitials

The Desktop Fullpage Interstitial and Mobile Fullpage Interstitial ad formats can interact with your website through some HTML events. You can listen to these events to trigger additional actions in your website.

creativeDisplayed

When a Fullpage Interstitial ad is loaded in the user's browser, it generates the event creativeDisplayed-XXXXXXX, where XXXXXXX is the zone id corresponding to that Fullpage Interstitial ad zone.

This event listener allows you to programmatically execute any action you may need on your website and get more information about the element that triggered the event, such as the URL, id, classes and text.

In the example below we are displaying the Creative shown! message in Console when the Fullpage Interstitial is shown and we are listing all the details from the element that triggered the event:

<script async type="application/javascript" src="https://a.example.com/ad-provider.js"></script> 
 <ins class="abcde12345" data-zoneid="1234567"></ins> 
 <script>(AdProvider = window.AdProvider || []).push({"serve": {}});</script>

<a href="https://www.example.com">Visit example.com!</a>

<script type="application/javascript">
    document.addEventListener('creativeDisplayed-1234567', function (e) {
        console.log("Creative shown!");
        console.log(e.detail);
    }, false);
</script>

message

If your Fullpage Interstitial ad zone serves an iframe campaign, then you can add an event listener to the event message. This allows you to programmatically execute any action you may need on your website after the iframe is loaded on user's browser.

The event data contains the properties id, which is an md5 of the iframe url parameter, and loaded being true. In the example below, we are displaying the Iframe loaded! message in Console when the Iframe is shown to the user's browser:

<script async type="application/javascript" src="https://a.example.com/ad-provider.js"></script> 
 <ins class="abcde12345" data-zoneid="1234567"></ins> 
 <script>(AdProvider = window.AdProvider || []).push({"serve": {}});</script>

<a href="https://www.example.com">Visit example.com!</a>

<script type="application/javascript">
    window.addEventListener('message', function(event) {
        if (event.data.id && event.data.loaded) {
            console.log("Iframe loaded!")
        }
    });
</script>