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

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

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 2

But now it is very simple, just insert this CSS;
<style>
ins[data-ad-status=unfilled] {display:none!important}
</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

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 5

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>