检测谷歌响应式空 Adsense答案

【问题标题】：Detect google responsive empty adsense检测谷歌响应式空 Adsense
【发布时间】：2015-09-05 18:33:47
【问题描述】：

我正在使用 google adsense 自适应广告。有时 AdSense 找不到蚂蚁广告并留下空白。有没有办法，使用 javascript 来确定 adsense 块是否为空？然后我会隐藏整个 AdSense 容器。

这是我一直用于 AdSense 的代码：

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                        <!-- Sidebar skyscrapper -->
                        <ins class="adsbygoogle"
                            style="display: block; width: 300px; height: 600px"
                            data-ad-client="ca-pub-xxxxxx"
                            data-ad-slot="xxxxxx"
                            data-ad-format="auto"></ins>
                        <script>
                            (adsbygoogle = window.adsbygoogle || []).push({});
                        </script>

 <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                    <!-- Sidebar skyscrapper -->
                    <ins class="adsbygoogle"
                        style="display: block; width: 300px; height: 600px"
                        data-ad-client="ca-pub-xxxxxx"
                        data-ad-slot="xxxxxx"
                        data-ad-format="auto"></ins>
                    <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>

【问题讨论】：

我会将此作为答案发布，但由于我没有在网络上使用过 adsense，因此引用，“AdSense 总是在广告加载时创建/设置标志 adsbygoogle.loaded 为 true，” stackoverflow.com/a/29321408/4012266
不能使用它，因为我不能使用“异步”标志。另外，我的网页上有很多 AdSense 块，我需要知道哪个有空广告。
您写道：“我有很多 Adsense 块” - 每页的 Adsense 块不能超过三个。
相关：stackoverflow.com/q/5053317/12484

标签： adsense

【解决方案1】：

Google 实际上有关于如何处理此问题的信息 - https://support.google.com/adsense/answer/10762946。 ins 广告元素中有一个名为 data-ad-status 的属性，它告诉您广告是“已填充”还是“未填充”。他们建议使用 CSS 来隐藏未填充的广告：

<style>
ins.adsbygoogle[data-ad-status="unfilled"] {
   display: none !important;
}
</style>

如果他们的广告无法为您的网页找到任何内容，您也可以将其替换为您自己的图片，并在链接中进行如下操作：

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-1234567890"
     data-ad-slot="1234567890">
    <a href="/page"><img src="/backup.jpg" width="300px" height="250px"></a>
</ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<style>
ins.adsbygoogle a {
    display: none !important;
}
ins.adsbygoogle[data-ad-status="unfilled"] a {
    display: block;
}
</style>

【讨论】：

这绝对会破坏您的 CLS，这是一个重要的排名因素。将会发生的是，您将获得由谷歌生成的具有宽度和高度的内联样式，因此您的布局将第一次发生变化，然后您将再次消失，然后您的布局将再次发生变化。试过这个，太可怕了。 google 生成的属性的未填充值是该元素的最后一个属性。内联样式属性首先出现。灾难 CLS。