After lots of trials and errors, here is what I've found out. At least, those were my results.
It seems that adsbygoogle.js
will not render ads on localhost
. You'll probably will get something like the following:

So, the first thing you need to do is to set up a local custom domain for your localhost
.
Here is what I do on Windows:
- Run NotePad as Admnistrator.
- Open C:\Windows\System32\drivers\etc\hosts
- Add your custom domain to the list


Then you should be able to access your localhost
by hitting dev.mydomain.com
After you've set up your local domain, you should go to your AdSense account and add it as a subdomain under the main domain of your registered website.

From the tests I've run. It seems that AdSense will not render real nor test ads if the domain/subdomain has not been added to your AdSense account.
In this example, I've added the main domain without the www
and I've added two subdomains. One is the www.
variation and the other one is the dev.
that I've just added to my localhost
.
Then you can render it on your code, just like you would on a real add and use the data-adtest
flag set to on
to run your tests.
<ins className="adsbygoogle"
style={{display:"inline-block", width:"100%", height: "100%"}}
data-ad-client={AD_SENSE_ACCOUNT}
data-ad-slot={AD_SENSE_SLOT}
data-adtest={ON_DEV ? "on" : "off"}
>
</ins>
I have an ON_DEV
flag that automatically sets it to on
, whenever I'm on my dev.
domain.
EXTRA
This is out of the scope of this question, but is necessary for everything to work.
You also need to push it to the adsbygoogle
array. This is how I do it in React.
useEffect(()=>{
(window.adsbygoogle = window.adsbygoogle || []).push({});
},[]);
And of course, you need the adsense
<script/>
tag on your index.html
as well.
<script data-ad-client="XXXXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>