How to programmatically collapse space in empty div when google ad does not show

Question

Is there any way to programmatically collapse the empty space that results when a google ad does not show? If so, I would love to see an illustrative example of the same.

Searching around has led me to this official Google resource for accomplishing exactly what I've asked. However, that pertains to Doubleclick for Publishers, which is unfortunately a separate product. I'm pining to know how to handle this for AdSense - some of my users are staring at empty spaces at the moment.

---

In case it matters, here's an example ad snippet provided by Google AdSense (which I've center-aligned):

    <div style="text-align:center">
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-client="ca-pub-0000000000000000"
             data-ad-slot="0044031319"
             data-ad-format="auto"></ins>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>

Answer 1

But now it is very simple, just insert this CSS;

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

Answer 2

I know this is old, but since I've been dealing with this now. A simple enough way to do this in jQuery is to check for all elements with the class adsbygoogle that have no child inside.

This selects all the elements with that class and hides them, effectively collapsing them.

$(".adsbygoogle:empty").hide();

You can do a lot of other stuff with it too, like if it's in a div and you need to hide that too, use the $(".adsbygoogle:empty").parent().hide() to collapse it further.

I'm sure this can be done with vanilla javascript as easily. I suggest to run this line of code after the DOM has loaded and even wait like 10 seconds just to see if google populates the ads.

Answer 3

I noticed that the AdSense code broadcasts a MessageEvent, so when I get a resize-me type event, with 'r_nh': 0 key/value pair, I hide the AdSense container (CSS class adsense-ad) manually.

If you have multiple AdSense containers on the same page, you could try to also parse the qid key from the same message.

window.addEventListener("message", (event)=>{
    try {
        let message = JSON.parse(event.data);
        if (message.msg_type === 'resize-me') {
            let shouldCollapseAd = false;

            for (let index in message.key_value) {
                let key = message.key_value[index].key;
                let value = message.key_value[index].value;

                if (key === 'r_nh' && value === '0') {
                    shouldCollapseAd = true;
                }
            }

            if (shouldCollapseAd) {
                $('.adsense-ad').hide();
            }
        }
    } catch (e) {

    }
});