Lazy loading ads
Lazy loading is the practice of loading content and other resources only when they are needed. For web content such as images and ads, this often entails deferring loading until the viewer is about to scroll through the content. You can implement lazy loading in zones where you used an asynchronous JavaScript zone tag to connect AdButler to the publisher's platform.
How to implement lazy loading
To implement lazy loading on ads served through AdButler, you must add a script in the <head> element of the page to which your zone is assigned. The script has two configurable parameters:
renderViewportPercent
This parameter tells the browser when to load the ad based on how near the ad is to the viewport, or the visible part of the page. It uses a percentage of the viewport's height as a unit of measurement. At its default value of 100, ads will load only when they should be partially or fully visible, i.e. when they are within the viewport. Increasing the value will make the trigger area taller, which means ads will load sooner. Its value must not be lower than 100.
mobileScaling
This parameter defines how the ad will be scaled on mobile devices. Its default value is 1.0. You may want to adjust it to account for mobile users' tendency to scroll through webpages faster compared to desktop PC users.
Example scripts
This script enforces lazy loading using the default values of the configurable parameters.
<script type="text/javascript">if (!window.AdButler){(function(){var s = document.createElement("script"); s.async = true; s.type = "text/javascript";s.src = 'https://servedbyadbutler.com/app.js';var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(s, n);}());}</script>
<script>
var AdButler = AdButler || {}; AdButler.ads = AdButler.ads || [];
AdButler.ads.push(function(){
AdButler.enableLazyLoading();
});
</script>
This script enforces lazy loading with custom values specified for the configurable parameters.
<script type="text/javascript">if (!window.AdButler){(function(){var s = document.createElement("script"); s.async = true; s.type = "text/javascript";s.src = 'https://servedbyadbutler.com/app.js';var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(s, n);}());}</script>
<script>
var AdButler = AdButler || {}; AdButler.ads = AdButler.ads || [];
AdButler.ads.push(function(){
AdButler.enableLazyLoading({
renderViewportPercent: 200,
mobileScaling: 2.0
});
});
</script>
