How to detect if AdSense has loaded an ad in JavaScript?

Question

I'm trying to integrate AdSense into our Svelte/Sapper project using the code snippets from their docs:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>

<ins class="adsbygoogle"
  style="display: inline-block;"
  data-ad-client="ca-pub-**************"
  data-ad-slot="**********"
  data-ad-format="horizontal"
>
</ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

The ads do show up sometimes but at other times there is just a big blank slot left on my page.

I thought that I'd be able to check whether an ad's being displayed by looking for it in AdSense's iframe programmatically with JavaScript; however, I cannot do this because the iframe has a src pointing to Google's domain and not ours, thus throwing a DOM exception.

Does anyone know how I can check if AdSense successfully loaded an ad or not so that I could decide whether to show something else in the blank spot that was supposed to be taken by the ad?

Answer 1

You can check for data-ad-status=“filled” with javascript to know if an ad has rendered More info: https://support.google.com/adsense/answer/10762946?hl=en