单页面添加3个AdSense广告块出现控制台报错该如何解决

报错原因定位 #

• 两条No slot size for availableWidth=80报错：对应2个广告位的自身/父容器可用宽度仅为80px，低于AdSense响应式广告要求的最小宽度（120px），广告SDK无法计算出合规的广告尺寸完成渲染。
• All ins elements in the … with class=adsbygoogle already have ads in them报错：常见诱因为两个：一是3个广告位共用了同一个data-ad-slot值，二是初始化逻辑和广告位数量不匹配，重复触发了广告初始化请求。

排查步骤 #

• 核对3个广告位的data-ad-slot属性：确认三个值分别对应AdSense后台创建3个广告位时生成的独立slot ID，不能重复使用同一个ID。
• 检查广告位实际渲染宽度：打开浏览器开发者工具，选中每个<ins class="adsbygoogle">元素，查看计算样式中的宽度值，定位出宽度仅为80px的两个广告位对应的父容器。
• 校验初始化逻辑：当前你仅在页面末尾调用了1次adsbygoogle.push({})，该方法单次调用只会初始化1个未加载的广告位，和你3个广告位的需求不匹配。
• 确认没有重复加载adsbygoogle.js文件，也没有在其他位置重复执行push逻辑。

具体解决方法 #

1. 修复广告位宽度不足问题
   给每个广告位的<ins>元素或者父容器设置最小宽度，最低不小于120px，参考修改后的广告位代码：

<ins class="adsbygoogle"
     style="display:block;min-width:120px"
     data-ad-client="ca-pub-7744644029571866"
     data-ad-slot="替换为对应广告位的独立slot值"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

如果是父容器布局限制了宽度，调整对应父容器的布局规则，保证广告位有足够的展示空间。

2. 修正广告位ID配置
   将3个广告位的data-ad-slot值分别替换为AdSense后台对应三个广告的唯一slot ID，禁止共用同一个ID。

3. 调整初始化逻辑
   将原来的单次push调用改为遍历所有广告位初始化，替换页面末尾的原脚本为以下代码：

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

如果需要滚动到广告位再按需加载，可给每个广告位单独绑定视口监听事件，进入可视区域后再执行对应push操作即可。

4. 校验效果
   修改完成后清除浏览器缓存重新加载页面，确认控制台无报错，广告正常渲染即可。

内容的提问来源于stack exchange，提问作者jstuardo