Lazy Load AdSense Ads on Page scroll JQuery
M.Muzammil

Lazy Load AdSense Ads on Page scroll JQuery

By M.Muzammil | February 03, 2023

Lazyload AdSense Ads on Scroll

This code uses the scroll event to detect when the user has scrolled to the area of the page where an ad is located. When this happens, the code uses each method to iterate over all elements with the class ad-unit, and the push method to load the ad.

To use this code, you will need to include the jQuery library in your website and place the ad unit code provided by Google into elements with the class ad-unit.

It's worth noting that this is just one example of how you can lazy load multiple AdSense ads on a website, and there are many other ways to achieve the same result. It's important to carefully evaluate the specific needs and goals of your website and choose the approach that best meets those needs.

JQuery Code

$(window).on('scroll', function() {
  $('.ad-unit').each(function() {
    if ($(this).offset().top < $(window).scrollTop() + $(window).height()) {
      (adsbygoogle = window.adsbygoogle || []).push({});
    }
  });
});
Make sure you have a JQuery library added to your site, or else the code won't work.

Wrap your ad code in the following way:

<div class='ad-unit'> 
    <!--    Adsense Ad Code Here    -->
</div>

Benifits of lazyloading:

Lazy-loading AdSense ads can have several benefits:

Improved page loading speed: Lazy loading AdSense ads means that the ads are only loaded when the user scrolls down to them, rather than loading all the ads on the page at once. This can improve the overall loading speed of the page, especially on mobile devices where the connection may be slower.

Increased ad impressions: Since lazy loading ads are only loaded when the user scrolls down to them, it is more likely that the user will see the ad and it will count as an ad impression. This can increase the overall ad impressions for the website, which can lead to higher revenue.

Better user experience: Lazy loading ads can improve the user experience by reducing the initial load time of the page and making it feel more responsive. This can lead to higher engagement and retention on the website.

However, it is important to note that lazy loading AdSense ads can also have some drawbacks, such as the potential for lower ad revenue if the ads are not seen by the user. It is important to carefully consider the pros and cons of lazy loading AdSense ads and determine if it is the right choice for your website.

Related Posts

M.Muzammil
M.Muzammil

I am Muzammil, a Self-taught Web Designer & Developer. I haven't yet completed my college degree. Started learning programming at the age of 12 and still learning. I love to work in Javascript and make eye-catchy designs. Free for your calls :)

Be The First To Comment