Skip to content

Banner

A banner uses a small portion of the screen and allows the user to interact (touch, wipe, click, etc.) with the advertisement, which triggers an event such as leading to a landingpage (in a new browser window) or opening up the app store.

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

  • First, you implement the WebSDK via adding our WebSDK 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 with the DIV-container where the ad should be displayed and pass your license key, siteId and position as provided by us.
banner = new ADvantage_WebSDK( 'ad_space_container' )
    .setLicenseKey( '[LICENSE KEY]' )
    .setSiteId('[SITE ID]')
    .setPosition('[POSITION]')
  • Add a default width and height for the ad space. If you don't define a default value, 320x50 will be used.
    .setWidth('320px')
    .setHeight('250px')
  • 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":
        //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();

Tip

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

And that's it! You can also take a look at how to implement a Sticky Banner.