AdvertServe Cloud Ad Server Solution

Full Page Overlay Demo

If you're seeing this page you either clicked the close button to make the overlay disappear or it automatically disappeared after the configurable 15 second timeout.

Gold Star Since the overlay appears in focus, it's highly effective at capturing attention and inherently optimized for viewable impressions!

Advisory

We are aware that overlays may require site changes to be compliant with the Better Ads standards because they cover up page content. Failure to achieve compliance may result in all of your ads being blocked by Google Chrome starting in early 2018. For more information about how you can deal with this situation, please read this article which explains everything in detail.

Customization

  • By default the overlay is automatically closed after 15 seconds, but you can adjust this from 1 to 900 seconds.
  • You can create a custom header/footer as well as customize the background color of the overlay to match the look and feel of your web sites.
  • The overlay can easily be made responsive to show appropriately sized ads to desktop/laptop users, tablet users and mobile phone users for a better user experience.

Media Support

  • Graphic banners (GIF/JPG/PNG)
  • Flash banners
  • HTML5 banners
  • Custom HTML banners, including forms with CSS and JavaScript
  • Third-Party banners from agencies and ad networks such as Atlas, DoubleClick, MediaMind, PointRoll, Zedo and most others

Deployment

Deploying overlays on your web site couldn't be easier. Our code wizard will generate all of the HTML code for you. All you have to do is copy and paste that code into the bottom of your web page near the </body> tag.

The code wizard also gives you the option to customize the background color of the overlay and adjust the auto-close timeout if the default 15 seconds is not suitable.

Recommendations

  • Overlays are best implemented with large-scale banners since they can utilize a good portion of the browser window area, but you don't want to go too large as not all users will have high-resolution screens!
  • We recommend serving 300x600 or 550x480 banners to desktop/laptop users and tablet users since they fit nicely on all such screens.
  • Smaller sizes such as 300x250 or 180x150 can be substituted for mobile phones users, which will improve the usability of your web site on those devices.
  • To make the overlay a bit more polite you can optionally set it to disable itself for the remainder of the current browsing session if a visitor clicks the close button.

Further Customization

Close Button

Don't like the default close button? You can change it by going to Settings > Basic > Code Wizard

Close Callback Function

The ability to include a JavaScript callback function in custom creatives is useful to stop audio or video from playing promptly when the overlay is closed by the user:

<script type="text/javascript">
function overlayCloseCallback() {
// your custom close logic here...
}
</script>

Remember this needs to be a global function in order for it to be visible to the overlay wrapper code. Using this callback is not necessary with HTML5 banners or video banners. Those types of banners are designed to destroy any audio/video components upon closing so they stop playing automatically.

Header and Footer

Adding a custom header and footer to the overlay simply involves including an initially hidden <div id="overlay_header"> tag and/or a <div id="overlay_footer"> tag ahead of the ad serving tag for the overlay.

Header
<div id="overlay_header" style="display: none; text-align: center; margin-bottom: 24px">
<img src="/images/logo.png" border="0" width="116" height="50" alt="AdvertServe" />
<span style="padding: 32px">Click here to continue to www.advertserve.com</span>
</div>
Footer
<div id="overlay_footer" style="display: none; text-align: center; margin-top: 24px">
<span>This advertisement from our sponsors will close in <span id="overlay_countdown"></span> seconds...</span>
</div>

Notice that we've included a special <span id="overlay_countdown"></span> tag in the footer. It will be dynamically updated with the number of seconds remaining before the overlay is closed. This is completely optional, of course, but it may be included in the header or the footer.

Advanced Techniques

You might have actualy noticed that the example overlay on this page used a subtle gradient rather than a solid background color. How did we do that? We simply override the CSS for the <div id="overlay_container"> tag to use a background image as follows.

<style type="text/css">
#overlay_container {
background-color: #EFEFEF !important;
background-image: url("/images/subpage_background.png") !important;
background-repeat: repeat-x !important;
}
</style>

Just make sure that you include !important in your CSS rules so that they override any styles that the overlay might already inherit.

Quirks Mode Considerations

If your web site happens to render in Quirks Mode you will need to correct that in order for the overlay to show up correctly in Internet Explorer, however, this can usually be accomplished by simply specifying a doctype if one is missing or by switching to a standards compatible HTML doctype.

The HTML5 doctype as well as all of the XHTML 1.0 or 1.1 doctypes, which are the most commonly used for modern or relatively modern web sites are already rendered in standards compliant mode and require no changes.

On older web sites that use HTML 4.01 you must use the complete doctype with system identifier which would be one of the following:

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Should you have any questions, please don't hesitate to reach out as we'd love to hear from you. Get Started Today!