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. Other terms include: lazy, in-view, smart 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 can help the web page loads faster if you have many ad placements.

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

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="https://g.adspeed.net/ad.php?do=js&zid=ZONE_ID&oid=ACCOUNT_ID&wd=-1&ht=-1">
</div>
```

At the end of the page, you would include the lazy loading library and enable it for the DIV ad containers:

<script src="https://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.

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-zone5678a" class="AdSpeedVisibleAd">
<code type="text/javascript"><!--
AdSpeed_jQuery('adplacement-zone5678a',5678,0);
//-->
</code>
</div>
...
<div id="adplacement-zone5678b" class="AdSpeedVisibleAd">
<code type="text/javascript"><!--
AdSpeed_jQuery('adplacement-zone5678b',5678,1);
//-->
</code>
</div>

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="https://g.adspeed.net/ad.php?do=js&zids=1234-3456-5678x2&oid=ACCOUNT_ID&wd=-1&ht=-1" type="text/javascript"></script>

<script src="https://g.adspeed.net/js/jquery.viewablead.min.js" type="text/javascript"></script>

<script>
jQuery(document).ready(function($){
  jQuery('div.AdSpeedVisibleAd').setupViewableAd();
});
</script>

Mixed Requirements

If you have a mix of advertisers with only some require viewability then you can detect if the ad DIV container is visible or not (above-the-fold vs. below-the-fold) and then choose to fetch a suitable ad tag:

If the ad placement is above-the-fold/visible then request the ad tag with a certain keyword targeting (eg: keywords=inview-ads) and tag ads of the required advertiser with that keyword.
Otherwise, the ad placement is below-the-fold and/or not yet visible then request the regular ad tag.

Troubleshooting

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.