AdvertServe Cloud Ad Server Solution

Crawler Demo

Try scrolling down the page and observe that the crawler remains fixed at the bottom of the page until you click on the optional close button to make it disappear.

Gold Star Since the crawler maintains visibility by keeping itself positioned above the fold at all times, it guarantees 100% viewable impressions!

Customization

  • The close button is optional.
  • You can customize the alignment and background color of the crawler to match the layout and color scheme of your web sites.
  • The crawler 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
  • 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 crawlers 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 enable the close button and customize the background color of the crawler.

Recommendations

  • Crawlers are best implemented with 970x90 or 728x90 banners because they offer a lot of creative real estate without taking too much vertical screen space away from your web site. If you need to make a lasting impact try a larger 970x250 banner. Try refreshing this page. You'll see that we have 728x90, 970x90 and 970x250 banners in rotation on this page to give you a better idea about their size.
  • Tablet users are best served a 728x90 banner, so that should be taken into consideration if you opt for the larger 970x90 banner size.
  • Smaller sizes such as 320x50 can be substituted for mobile phones users, which will improve the usability of your web site on those devices.
  • Add some extra padding to the bottom of your web page with CSS body{ padding-bottom: 200px; } to ensure it isn't covered up by the crawler.
  • To make the crawler 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.

Advanced Techniques

Border

Want to add a border to the top of your crawler? Simply add the following CSS to your stylesheet or place it just above the code for the crawler:

<style type="text/css">
#crawler { border-top: 2px solid #000000; }
</style>

For a live demonstration of this, click here to add the border and then click here to remove the border.

Close Button

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

Maybe you want the close button to be on the left side instead of being on the right side?

<style type="text/css">
#crawler_close { right: inherit !important; left: 0 !important; margin-left: 20px !important; }
</style>

For a live demonstration of this, click here to move the close button to the left and then click here to move it back to the right again.

Close Callback Function

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

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

Remember this needs to be a global function in order for it to be visible to the crawler wrapper code.

Header / Footer

Want to add a message or branding above or below the banner inside the crawler? You can add a custom header and/or footer by going to Settings > Basic > Code Wizard

Transparency

How about making the background of the crawler partially transparent? Again, it just takes a little additional CSS to accomplish it:

<style type="text/css">
#crawler, #crawler > div { background-color: rgba(224, 224, 235, 0.7) !important; }
</style>

For a live demonstration of this, click here to make it transparent and then click here to make it opaque again.

Quirks Mode Considerations

If your web site happens to render in Quirks Mode you will need to correct that in order for the crawler 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!