Banner¶
Integration¶
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 landing page (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();
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.
And that's it! You can also take a look at how to implement a Sticky Banner.
Transparency Consent Framework 2.0 (TCF 2.0)¶
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.