您如何在 localhost 中呈现 Google 广告单元？

Question

Per research there was a previous question from 2014 ( Is Google adsense available for localhost? ) that suggested adding:

data-adtest="on"

and after testing and reading the comments the solution no longer works. In an ad unit:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- responsive_ad -->
    <ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-####"
        data-ad-slot="######"
        data-ad-format="auto"
        data-adtest="on"
        data-full-width-responsive="true">
    </ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

After testing in Chrome, Firefox and Safari a white box is rendered. After searching I'm not able to locate any solution in product forums or on any site. How can I test an ad unit in localhost?

Answer 1

I also tried the data-adtest="on" approach and it didnt work for me either. I found two different approaches for testing:

• Using Placeholders , the way most Google Adsense Forum Entry suggesting it. eg here: https://productforums.google.com/forum/#!msg/adsense/RLeUEq6na-w/i93-TFVRiHUJ (I've tried it on my own and I was satisfied with the solution)
• Use your own (dev) domain explained here: https://medium.com/@jeffersonlicet/testing-ads-on-localhost-300215b415d6 (I was not able to tried this on my own, because I dont have a domain)

If you have opened the developer console you would have saw that you got an 403 Error. The reasons for this error are further explained here: https://www.shoutmeloud.com/adsense-403-forbidden-error.html . To make it short: Adsense Crawlers reject Localhost . Thats why you got a white space instead of ads.

But if there is a third way I would also be glad to hear it.

Answer 2

As the other answer suggests, using a hostname other than localhost is important. Using 0.0.0.0 can be a simple option.

Since early 2021 Google appears to require explicit TCF v2.0 consent to load any ads. The following snippet can be included in application code or something like Violentmonkey :

window.__tcfapi = (command, parameter, callback) => {
    if (command === 'checkConsent') {
        callback(true);
    }
    if (command === 'addEventListener') {
        callback({eventStatus: 'tcloaded', gdprApplies: false}, true);
    }
};

Answer 3

I tried many options but they did not work.

I see white screen and 403 error.

I find that workaround "border:1px solid red;" and it works

<ins style=".....   border:1px solid red;"></ins>

I can see the ads area and I will try production without a border