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?

score 1 · Accepted Answer · edited Jul 26 '21 at 08:25

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 '21 at 08:25

Anonymous Girl

582
8
22

answered Jul 24 '21 at 21:11

Niresh

611
5
16

For reference, does it violate Google Adsense Policy? As we are modifying Ad code. – Anonymous Girl Jul 24 '21 at 21:24
1

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. – Niresh Jul 25 '21 at 04:21
Where can I find DOM of lazy loaded Adsense Unit? Clarify please. – Anonymous Girl Jul 25 '21 at 06:43
Website link you provided is not accessible!! – Anonymous Girl Jul 25 '21 at 16:01
1

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 Jul 26 '21 at 08:02
lazy loading adsense link is inaccessible. – Anonymous Girl Jul 26 '21 at 08:20
1

It works for my end, Try to flush dns or try again after restarting router. – Niresh Jul 26 '21 at 08:27

How to lazy load new Google Adsense code using JS

1 Answers1

Linked