7

I am using google adsense responsive ads. Sometimes adsense don't find ant ad and leave blank space. Is there a way, using a javascript to determine if an adsense block is empty? and than i will hide the entire adsense container.

Here is the code i've been using for the adsense:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                        <!-- Sidebar skyscrapper -->
                        <ins class="adsbygoogle"
                            style="display: block; width: 300px; height: 600px"
                            data-ad-client="ca-pub-xxxxxx"
                            data-ad-slot="xxxxxx"
                            data-ad-format="auto"></ins>
                        <script>
                            (adsbygoogle = window.adsbygoogle || []).push({});
                        </script>
 <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                    <!-- Sidebar skyscrapper -->
                    <ins class="adsbygoogle"
                        style="display: block; width: 300px; height: 600px"
                        data-ad-client="ca-pub-xxxxxx"
                        data-ad-slot="xxxxxx"
                        data-ad-format="auto"></ins>
                    <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
user1610208
  • 237
  • 1
  • 5
  • 14

1 Answers1

2

Google actually has information on how to handle this - https://support.google.com/adsense/answer/10762946. There is an attribute in the ins advert element called data-ad-status which tells you if the advert is "filled" or "unfilled". They suggest using css to hide unfilled ads:

<style>
ins.adsbygoogle[data-ad-status="unfilled"] {
   display: none !important;
}
</style>

And if their ad fails to find anything for your page, you can also replace it with your own image wrwapped in a link like so:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-1234567890"
     data-ad-slot="1234567890">
    <a href="/page"><img src="/backup.jpg" width="300px" height="250px"></a>
</ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<style>
ins.adsbygoogle a {
    display: none !important;
}
ins.adsbygoogle[data-ad-status="unfilled"] a {
    display: block;
}
</style>
mulllhausen
  • 4,225
  • 7
  • 49
  • 71
  • 4
    This will absolutely destroy your CLS, an important ranking factor. What will happen is that you will get inline style with width and height generated by google, so your layout will shift for the first time, then you will have it gone once more, then your layout will shift again. Tried this, it's terrible. The unfilled value of the google generated attribute is one of the last attributes of that element. The inline style attribute comes first. Disaster CLS-wise. – Catalin Mar 11 '22 at 09:20