加载内容后加载广告答案

【问题标题】：Load ads after content is loaded加载内容后加载广告
【发布时间】：2023-04-08 12:56:02
【问题描述】：

我试图在从 Firebase 加载内容后加载 AdSense 响应式广告，但是没有广告显示，只是空白。将代码放到网上后出现错误：

availableWidth=0 没有插槽大小

我在谷歌浏览了大约 4 个页面来寻找解决方案，但找不到一个，所以我想你可以帮助我。

我正在应用 AdSense 代码，如下所示：

    <head>
       <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    </head>
    <body>
       <div id="demo" style="display: none;">
       <!-- SnusPedia automatic size add -->
       <style>
          .example_responsive_1 { width: 320px; height: 100px; }
          @media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
          @media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
       </style>
       <ins class="adsbygoogle example_responsive_1"
          style="display:block"
          data-ad-client="ca-pub-8297030761327810"
          data-ad-slot="9809929086"
          data-ad-format="auto"></ins>
       <script>
             window.onload = function(){
            (adsbygoogle = window.adsbygoogle || []).push({});
             }
       </script>
  </div>

    </body>

什么可能导致问题？

【问题讨论】：

所有内容都包含在<div id="demo" style="display: none;"> 中吗？我没有看到关闭 </div> 标签
是的，所有内容都包含在<div id="demo" style="display: none;"> 中，实际上我也有结束标签，也只是输入问题。
那么你什么时候删除display: none？
Firebase 查询完成后的@Morpheus。

标签： jquery html css twitter-bootstrap adsense

【解决方案1】：

如果广告被隐藏或宽度/高度为 0，AdSense 将不会展示广告，在您的情况下会发生这种情况，因为您周围有 div#demo。它完全隐藏，因此 AdSense 无法填充广告，因为没有可用空间。尝试从#demo 中删除display: none。

此外，不允许在自定义事件上加载广告，这意味着在等待 firebase 查询后显示广告可能违反 Google 的 TOS。

我可以想象您可以删除加载 adsbygoogle.js 的脚本标签，然后等待您的 firebase 查询并加载 adsbygoogle.js——但我怀疑 Google 是否允许这样做。

我建议您只需从外部 div 中删除 display: none 并加载广告，无论您的 Firebase 查询是否已完成。

【讨论】：