Skip to content

Interstitial

Integration

While banners are small ads which typically take the user to a landing page in a new browser window when clicked or tapped on, Interstitials immediately present a rich HTML5 experience when loading a webpage or when switching between two pages.

Preload vs Interstitial

A preload will show up on website launch while an interstitial will show up between two pages.

Implementation for an interstitial ad is very similar to banner implementation, except that it is displayed fullscreen.

To add an interstitial to your webpage it takes only a few lines of code.

  • First, you implement the WebSDK via adding the CDN into the <head> tag.
<!DOCTYPE html>
<html>
   <head>
      ...
      <script src="https://advantage.digitalsunray.com/v2/ADvantage_WebSDK.class.js"></script>
   </head>

Adding the WebSDK.class.js file

The link to the js file has to be implemented as CDN. Never download the WebSDK or other components from the WebSDK to your servers.

  • Create a new ADvantage instance and pass your license key, siteId and position.
banner = new ADvantage_WebSDK( 'ad_space_container' )
.setLicenseKey( '[LICENSE KEY]' )
.setSiteId('[SITE ID]')
.setPosition('[POSITION]')
  • Set the width and height to 100%
.setWidth( '100%' )
.setHeight( '100%' )
  • Set setInterstitial to true
.setInterstitial( true )
  • Add the EventHandler in order to handle ADvantage events.
.addEvent(function(ev){
  switch (ev.status) {
     case "ADvantageNoCampaignEvent":
       // adserver didn't deliver a campaign
       // in this case you can use a backfill service e.g. Google adsense, etc.
       this.hide(); // hide the ADvantage ad space
       //do something
       break;
     case "ADvantageUpdateLayoutEvent":
       //the creative is using update layout for the current instance
       //do something
       break;
     case "ADvantageAdvertisementEvent":
       //an ADvantage advertisement is loaded
       this.show(); // show the advertisement
       //do something
       break;
     case "ADvantageCloseEvent":
       // advertisement closed
       //do something
       break;
  }
})
  • Load and display your ad via the initialize() method.
//Request ad
.initialize();

General tip

The best place to do all this is in the window.onload = function() located in your<body> after your website has been rendered.

We strongly recommend the use of a Consent Management Platform (CMP) compliant with TCF 2.0 if your audience on your website/app, in whole or in part, is located within the EU.

Click here for instructions on how to hand over TCF 2.0 Consent to ADvantage.