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.

<

Answer 1

The link provided which refers to DFP Premium at this point redirects to documentation for Google Ad Manager, so it's possible this feature is available without DFP Premium at this point.

---

Aside from that...
Usually the existence of an iframe element where you expect it is enough to know whether an ad was put where you were expecting one to be put, or not, in my experience.

setTimeout(function () {
    if (!document.querySelector('#adcontainer').querySelectorAll('iframe').length > 0) {
        document.querySelector('#adcontainer').remove();
    }
},1000*2);

As to whether something useful was loaded into that iframe—that isn't something Google is concerned with, so good luck, you'll need it.

Answer 2

I tried to solve it with CSS as Adsense injects various iframe,ins, and divs with various properties.

This code will collapse whitespace but when you ad is in text, it will overflow some of the text, so inline this needs modification:

<style>
    iframe { height: auto !important}
    ins { height: auto !important}
    #google_ads_frame1 { height: auto !important}
    .adsbygoogle, #aswift_0_expand, #aswift_0_anchor { height: auto!important} /* there might be more of those */
</style>

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) {

    }
});

Answer 4

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.