Assuming you have followed the steps to implement AST banners, you will need to add a new ad unit OR choose an existing ad unit that will be 'lazy loaded' after the DOM has loaded.
As a publisher you have two options:
Step 1: Call apntag.defineTag() for all placements on the site; including both page load units and lazy loaded units
apntag.anq.push(function() {
//set global page options
apntag.setPageOpts({
member: 958
});
//define page load ad tag
apntag.defineTag({
tagId: 12886199,
sizes: [
[300, 250]
],
targetId: 'apn_ad_slot_1'
});
//define lazy loaded ad tag; to be loaded after page load
apntag.defineTag({
tagId: 12992714,
sizes: [
[728, 90]
],
targetId: 'apn_ad_slot_2'
});
//start loading tags
apntag.loadTags();
});
Step 2: Define the divs, noting that the placement/div that will have the ad loaded within it later on does not have a showTag() call just yet. Like all tags, this lazy loaded DIV should have an id of the same value as set in the 'targetId' property in Step 1.
Also note that this is just an example, these divs will likely be in separate locations in your HTML template.
<div id="apn_ad_slot_1">
apntag.anq.push(function() {
apntag.showTag('apn_ad_slot_1');
});
</div>
<div id="scrolldiv">
<div id="apn_ad_slot_2">
</div>
</div>
Step 3: This step is highly nuanced and depends on the results you desire, but for this example we'll set up a script to fire showTag('apn_ad_slot_2'); when the div scrolldiv is in view. Once it's detected as in view by our sciprt and the showTag() method is fired, the method tells AST that the placement is being showed and it's time to load the ad in the div. The impression is also marked as transacted at this time and a notification is sent to AppNexus to track the impression.
function VisibilityMonitor(element, showfn, hidefn) {
var isshown= false;
function check() {
if (rectsIntersect(getPageRect(), getElementRect(element)) !== isshown) {
isshown= !isshown;
isshown? showfn() : hidefn();
}
};
window.onscroll=window.onresize= check;
check();
}
function getPageRect() {
var isquirks= document.compatMode!=='BackCompat';
var page= isquirks? document.documentElement : document.body;
var x= page.scrollLeft;
var y= page.scrollTop;
var w= 'innerWidth' in window? window.innerWidth : page.clientWidth;
var h= 'innerHeight' in window? window.innerHeight : page.clientHeight;
return [x, y, x+w, y+h];
}
function getElementRect(element) {
var x= 0, y= 0;
var w= element.offsetWidth, h= element.offsetHeight;
while (element.offsetParent!==null) {
x+= element.offsetLeft;
y+= element.offsetTop;
element= element.offsetParent;
}
return [x, y, x+w, y+h];
}
function rectsIntersect(a, b) {
return a[0]b[0] && a[1]b[1];
}
VisibilityMonitor(
document.getElementById('scrolldiv'),
function() {
apntag.showTag('apn_ad_slot_2');
console.log('div in view!');
},
function() {
console.log('div out of view');
}
);
Step 4: Scroll to the bottom of this page to see our lazy loaded 728x90 bottom rail banner load only after it is in view. To see what network calls are made when lazy loading a placement occurs, see the network tab in your browser's developer console.
You can find more detailed information about the base implementation here: Microsoft Learn - Set up Placements with AST.
For further AST API references, you can also refer to the following documentation: Microsoft Learn - AST API Reference.
Further things to note:
As a reminder, regularly checking on the AST release history is encouaged so that you can see the latest releases and adjust the code accordingly if needed (due to breaking changes, for example).
Step 1: Create a new apntag.defineTag() call that only defines the lazy loaded ad units that will be rendered. In this example, there will already exist a apntag.defineTag() call that is made on page load, this call below is going to be inserted in Step 3 within the code used to lazy load the ad unit.
apntag.defineTag({
enableSafeFrame: true,
tagId: 12992714,
sizes: [[738,90]],
targetId: 'apn_ad_slot_2'
});
Step 2: Define the div that will have the ad loaded within it. This DIV should have an id of the same value as set in the 'targetId' property in Step 1
<div id="scrolldiv">
<div id="apn_ad_slot_2">
</div>
</div>
Step 3: This step is highly nuanced and depends on the results you desire, but for this example we'll set up a script to fire apntag.defineTag(), apntag.loadTags(), and then showTag('apn_ad_slot_2'); when the div scrolldiv is in view. Once it's detected as in view and the showTag method is fired which tells AST that the placement has been defined and it's time to load an ad in the div. The impression is also marked as transacted at this time and a notification is sent to AppNexus to track the impression.
//boolean used to load ad only once
var nevershown
function VisibilityMonitor(element, showfn, hidefn) {
var isshown = false;
function check() {
if (rectsIntersect(getPageRect(), getElementRect(element)) !== isshown) {
isshown = !isshown;
isshown ? showfn() : hidefn();
}
};
window.onscroll = window.onresize = check;
check();
}
function getPageRect() {
var isquirks = document.compatMode !== 'BackCompat';
var page = isquirks ? document.documentElement : document.body;
var x = page.scrollLeft;
var y = page.scrollTop;
var w = 'innerWidth' in window ? window.innerWidth : page.clientWidth;
var h = 'innerHeight' in window ? window.innerHeight : page.clientHeight;
return [x, y, x + w, y + h];
}
function getElementRect(element) {
var x = 0,
y = 0;
var w = element.offsetWidth,
h = element.offsetHeight;
while (element.offsetParent !== null) {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
}
return [x, y, x + w, y + h];
}
function rectsIntersect(a, b) {
return a[0] < b[2] && a[2] > b[0] && a[1] < b[3] && a[3] > b[1];
}
VisibilityMonitor(
document.getElementById('scrolldiv'),
function() {
if(nevershown != false){
apntag.anq.push(function() {
//set global page options
apntag.setPageOpts({
member: 958
});
apntag.defineTag({
tagId: 12992714,
sizes: [
[728, 90]
],
targetId: 'apn_ad_slot_2'
});
//start loading tags
apntag.loadTags();
apntag.showTag('apn_ad_slot_2');
nevershown = false;
});
}
},
function() {
}
);
Step 4: Scroll to the bottom of this page to see our lazy loaded 728x90 bottom rail banner load only after it is in view. To see what network calls are made when lazy loading a placement occurs, see the network tab in your browser's developer console.
You can find more detailed information about the base implementation here: Microsoft Learn - Set up Placements with AST.
For further AST API references, you can also refer to the following documentation: Microsoft Learn - AST API Reference.
Further things to note:
As a reminder, regularly checking on the AST release history is encouaged so that you can see the latest releases and adjust the code accordingly if needed (due to breaking changes, for example).