Lazy load and infinite scroll for DFP

Ad Layers supports building ads dynamically for lazy loading, infinite scroll, and so on, via its Javascript API. This is an advanced integration that requires some coding.

Admin Configuration

When you add the ad slot to your ad layer, there is a checkbox which says "Do not render the ad on load".

When you check this, the ad slot will not be defined or rendered by the ad layers plugin at runtime. The ad's various properties (path, targeting, sizes, etc.) will be stored so that you can render an ad later using any of this information. The rendered object might look something like this:

var dfpAdDetails = {
  "sidebar": {
    "path": "/6355419/Travel/Europe/France/Paris",
    "sizes": [300, 250],
    "targeting": {
      "test": [
        "infinitescroll"
      ]
    }
  }
};

Code

Your code can use the unrendered ad's information however you need via the Javascript API.

Suppose I have a button "Add Ad" (with the ID add_ad) which will do nothing more than add an ad to a page. We'll hook into the "click" event for that button:

$( '#add_ad' ).click( function( e ) {
    // build our ad here
}

Next, we'll need to add a <div> element to the page to hold the ad. The id attribute of this div is quite important; it needs to be the concatenation of the global ad prefix adLayersDFP.adUnitPrefix and the ad slot name. It's important to remember that the slot name must be unique. In this example, since the button can be clicked an unlimited number of times, we'll suffix it with an incrementing integer:

var slotName = 'sidebar_ad_' + slotNum++;

Now that we have our slot name, building our div this might look like this:

$( '#sidebar' ).append( $( '<div />' ).attr( 'id', adLayersDFP.adUnitPrefix + slotName ) );

AdLayersAPI provides a helper method lazyLoadAd() which will assist in rendering your ad. See the Javascript API Reference page for the full reference, but the two properties we'll use are slotName and format. slotName is the unique name for the ad slot we're rendering (and the suffix for the ad div), and format tells the helper which ad unit in the ad layer we want to model this off. Another way to look at this is, this should match one of the properties of the dfpAdDetails object detailed above. In our example, we want to base this new ad on the "sidebar" ad unit in the ad layer, so we'll pass that to the format parameter.

( new AdLayersAPI() ).lazyLoadAd( { slotName: slotName, format: 'sidebar' } );

That's all there is to it! Putting it all together, our code might look something like this:

var slotNum = 1;
$( '#add_ad' ).click( function( e ) {
	var slotName = 'sidebar_ad_' + slotNum++;
	$( '#sidebar' ).append( $( '<div />' ).attr( 'id', adLayersDFP.adUnitPrefix + slotName ) );
	( new AdLayersAPI() ).lazyLoadAd( { slotName: slotName, format: 'sidebar' } );
} );

When the button is clicked, a new div with an incrementing ID will be added to our #sidebar node, and an ad will be rendered there, modeled off of the sidebar ad in the current page's ad layer.

Further Customizations

Let's say that each time the button is clicked, the ad path should change to indicate which click number this is. Even though we're using the 'sidebar' format for this ad, we can optionally override any of its properties. Here's a modified version of our example where we do just that:

var slotNum = 1;
$( '#add_ad' ).click( function( e ) {
	var slotName = 'sidebar_ad_' + slotNum;
	$( '#sidebar' ).append( $( '<div />' ).attr( 'id', adLayersDFP.adUnitPrefix + slotName ) );
	( new AdLayersAPI() ).lazyLoadAd( { slotName: slotName, format: 'sidebar', path: '/6355419/Travel/Europe/France/Paris/' + slotNum } );
	slotNum++;
} );