Overview
AdEngine features an internal module that allows lazy loading of ads. Lazy loading an ad means that it will only be shown in the page when the site user scrolls down to its placement. This kind of behavior leads to better ad performance and a speedier page, ultimately bettering ad cpms and site experience.
To enable lazy loading in AdEngine one has to enable the Lazy Load module in AdEngine-app and set the basic parameters, triggerMarginPercent
and mobileScaling
. This enables the module, but to set which ad units are going to be lazy loaded the publisher needs to declare them in either the Declarative configuration for AdEngine or through the startAuction command. For each one of them, we need to use the AuctionLot
structure with an additional field, called lazyLoad
. This means that for declarative configuration we need to set it through the field activeLots
and through the startAuction() function using an array of AuctionLot
.
Module parameters
enabled
Sets whether or not the module is globally enabled. If set to false, no lazy loading will occur.
triggerMarginPercent
This is a number that states at which percentage of the viewport should the ad be loaded. This parameter needs to be over 100%, otherwise it will consider that the ad is already in view, which means it will load the ad at once in the page. If a value is set to be below 100%, it will default to 100%.
mobileScaling
This is a number greater or equal than 1 that gives an insight of how much bigger is the scrolling speed in mobile devices when compared with desktop. Mobile devices tend to scroll a lot faster than desktop devices, and the module uses this estimation to trigger the lazy ads before they enter into view, so that when they enter view they are already loaded and visible, to avoid flickering. If this value is set to be below 1, it will default to 1.
Setting the adunit parameters
Through declarative configuration
When we are defining the activeLots
to be auctioned in AdEngine, just add a new lazyLoad
section for the given lot with either a value of true
, or an object which overrides the triggerMarginPercent
and mobileScaling
values for that lot.
window.snigelPubConf = adengine: { activeLots: [ {placement: "divId-0", adUnit: "adUnitName-0" }, {placement: "divId-1", adUnit: "adUnitName-1", lazyLoad: true}, {placement: "divId-2", adUnit: "adUnitName-2", lazyLoad: {triggerMarginPercent: 120, mobileScaling: 3}}, ] }
In the example given above, the first lot ("divId-0", "adUnitName-0") will be normally auctioned and the other two will be lazy loaded. In particular, the lot ("divId-2", "adUnitName-2") will be lazy loaded overriding the module parameters triggerMarginPercent
and mobileScaling
with the values 120 and 3, respectively.
Through startAuction()
function
For the same example given above, the syntax should be as follows:
adngin.cmd.startAuction([ {placement: "divId-0", adUnit: "adUnitName-0" }, {placement: "divId-1", adUnit: "adUnitName-1", lazyLoad: true}, {placement: "divId-2", adUnit: "adUnitName-2", lazyLoad: {triggerMarginPercent: 120, mobileScaling: 3}}, ]);
Description
After configuring, AdEngine will add the lazy lot configurations to the batch of ad units that will be lazy loaded. When the user scrolls down the page, when it hits the triggering thresholds for the given device and ad unit, the module starts a new auction for that ad unit and shows it on the page right before the user scrolls over the placement of the ad. This leads to showing the ad only when it's needed, avoiding unnecessary auctions and processing power to show an ad that may or may not be visualized.
Notes
Lazy loading of units needs to have a declarative configuration in place or a manual call to startAuction with the array of lots to auction and/or lazy load. This means that running AdEngine in fully automated mode currently doesn't allow to lazy load ad units.
If for some reason someone tries to lazy load an ad that is already loaded in the page, the lazy load module will signal this as a warning and won't lazy load the ad, given it is already present in the page.