How to lazy load new Google Adsense code using JS

Question

Google has replaced

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js</script>

with

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"</script>

ref: Google Adsense Announcement

Old Adsense Code was like:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:350px;height:90px"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

New Adsense Code is like:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:350px;height:90px"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Old JS code to load the Ad after the page load is complete was:

    <script type="text/javascript">
        function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
        document.body.appendChild(element);
        }
        if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
        else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
        else window.onload = downloadJSAtOnload;
    </script>

As ?client=ca-pub-xxxxxx" crossorigin="anonymous" is added in script tag of new Ad Code, now what would be the new JS code to load the ads?

Anonymous Girl · Accepted Answer · 2021-07-26 08:25:32Z

1

Well This is not really lazy load This is defer loading and not recommended, but here you go

<script>
function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX";
    element.async = true;
    element.setAttribute('crossorigin', 'anonymous');
    document.body.appendChild(element);
}
if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

If you are looking for lazy load AdSense check out Lazy Loading Adsense

edited Jul 26, 2021 at 8:25

Anonymous Girl

67210 silver badges28 bronze badges

answered Jul 24, 2021 at 21:11

Niresh

6776 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Anonymous Girl Over a year ago

For reference, does it violate Google Adsense Policy? As we are modifying Ad code.

Niresh Over a year ago

No, because when you check the dom of a lazy loaded AdSense adunit, it is the same code as provided by Google. I have used this code on my website for past 6 months, It worked without any issues or warnings from Google.

Anonymous Girl Over a year ago

Where can I find DOM of lazy loaded Adsense Unit? Clarify please.

Niresh Over a year ago

Right click and select Inspect element on an Adsense adunit. Which link is not working? I just edited the above script to add async attribute.

Niresh Over a year ago

It works for my end, Try to flush dns or try again after restarting router.

|

Collectives™ on Stack Overflow

How to lazy load new Google Adsense code using JS

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related