Help Center Manage Your Account Ad Tag

How can I display an ad only when it is visible on screen?

Typically, when you first load a web page, all ads are loaded simultaneously along with all other components and contents located on the same page. This means an ad at the bottom of the page is loaded even when a visitor is only seeing the top half.

To ensure ad viewability, or ad visibility, you can implement an on-demand ad loading approach, also called: lazy ad loading or just-in-time ad loading. With this method, the ad is only loaded when it becomes visible on the screen. An ad impression is then a viewable impression. As an additional benefit, it also helps the web page loads faster as well.

Demo

Please view the demo of a viewable ad

Requirements

  • This ad loading approach needs jQuery, a popular JavaScript library, to be loaded on your site. If your site has some widgets or uses a CMS, it's likely that it already includes jQuery.
  • For an accurate detection of ad viewability, do not forget to declare a doctype at the beginning of your HTML: <!DOCTYPE html>

Setup

  1. To prevent the browser from loading the ad during the initial load, the ad tag (serving code) is not called inside a normal JavaScript tag. You need to enclose each ad call/tag inside a DIV container:
    <div class="AdSpeedVisibleAd" asreq="//g.adspeed.net/ad.php?do=js&zid=ZONE_ID&oid=ACCOUNT_ID&wd=-1&ht=-1">
    </div>
  2. At the end of the page, you would include the lazy loading library and enable it for the DIV ad containers:
    <script src="//g.adspeed.net/js/jquery.viewablead.min.js"></script>
    <script>
    $(document).ready(function(){
      jQuery('div.AdSpeedVisibleAd').setupViewableAd();
    });
    </script>

Setup with Multiple Ads

If you want to display multiple ads from different zones on the same page, you can combine the single-ad-call approach with lazy loading for a faster loading. In this example below, we fetch 4 ads from 3 zones: one ad from zone #1234, one ad from zone#3456 and 2 ads from zone #5678.
  1. Place the ad containers where you want to display the ads:
    <div id="adplacement-zone1234" class="AdSpeedVisibleAd">
    <code type="text/javascript"><!--
    AdSpeed_jQuery('adplacement-zone1234',1234);
    //-->
    </code>
    </div>
    ...
    <div id="adplacement-zone3456" class="AdSpeedVisibleAd">
    <code type="text/javascript"><!--
    AdSpeed_jQuery('adplacement-zone3456',3456);
    //-->
    </code>
    </div>
    ...
    <div id="adplacement-zone5678" class="AdSpeedVisibleAd">
    <code type="text/javascript"><!--
    AdSpeed_jQuery('adplacement-zone5678a',5678,0);
    //-->
    </code>
    </div>
    ...
    <div id="adplacement-zone5678" class="AdSpeedVisibleAd">
    <code type="text/javascript"><!--
    AdSpeed_jQuery('adplacement-zone5678b',5678,1);
    //-->
    </code>
    </div>
  2. Fetch ads from all the zones you want to display on this same page. You can place this code near the bottom of the page so the ad loading is deferred after page content.
    <script src="//g.adspeed.net/ad.php?do=js&zids=1234-3456-5678&oid=ACCOUNT_ID&wd=-1&ht=-1" type="text/javascript"></script>
    
    <script src="//g.adspeed.net/js/jquery.viewablead.min.js" type="text/javascript"></script>
    
    <script>
    jQuery(document).ready(function($){
      jQuery('div.AdSpeedVisibleAd').setupViewableAd();
    });
    </script>
  3. Troubleshooting

    You can turn on the debug option setupViewableAd({debug:true}) to see additional messages in the JavaScript Console.

    This ad loader might not be compatible with all ad formats, especially complex third-party ad tags and we recommend you to test with specific ad tags before going live.

    Other Articles in Ad Tag

    This section describes the ad tag (serving code) with basic and advanced settings. It includes common ad serving setup instructions and answers frequently asked questions when integrating the ad tag into your site, blog or app.

    Cannot find an answer for your question? Ask our Customer Care team

    Related