从“广告能不能显示”进入“广告位到底应该多宽”
前一阶段，我已经在 A Tour of Go 的课程页面中加入了手动 AdSense 展示广告。
现在的整体广告结构已经基本稳定：
- AdSense Auto Ads；
- 课程页面手动展示广告；
- Angular SPA 页面切换时自动 mount / unmount；
- 局部 AdSense layout protection；
- 不再使用全局 DOM observer。
基础问题基本解决以后，新的问题变成了：
课程页这个手动广告位，到底应该给 Responsive AdSense 多大的可用宽度？
而今天开始 ABCD 自然流量实验，并不是单纯为了“试试不同尺寸”。
真正的原因，是之前一次宽度调整以后，我观察到了非常明显的广告展示变化。
原来的广告位最大宽度是 620px
此前课程页的手动广告虽然使用的是 Responsive AdSense，但前端广告容器设置了：
max-width: 620px;当时我在自己的电脑上反复测试课程页面，广告实际出现得相当频繁。
我印象比较深的是，那时经常显示尺寸比较小、接近正方形的广告。
点击“下一页”切换课程以后，新页面通常也很容易再次看到广告。
按照我当时自己的人工测试体感：
超过 90% 的课程页面似乎都能看到实际填充的广告。
这里的“超过 90%”并不是 AdSense 后台正式统计出来的 Fill rate，只是我自己连续浏览课程页面时非常直观的感受。
但至少有一点非常明显：
那时候广告很容易出现。
为什么后来删除了 max-width: 620px
广告经常能够出现以后，我又开始注意到另一个问题。
A Tour of Go 的桌面课程页面本身比较宽。
尤其是在我的桌面环境下，课程正文和代码编辑器之外仍然存在不少可以利用的横向空间。
如果 AdSense 总是在中间显示一个比较小的正方形广告，会给我两个感觉。
第一，页面还有不少横向空间，但实际广告只占其中很小一块，看起来似乎有些浪费。
第二，我也开始考虑：
如果允许 AdSense 显示更宽、更大的长方形广告，会不会有机会获得更高的单次广告价值？
所以后来我删除了原来的：
max-width: 620px;不再人为限制课程广告容器的最大宽度。
当时的思路其实很简单：
既然页面有足够空间，就尽量把尺寸选择权交给 Responsive AdSense，让它根据实际页面空间、设备和广告库存选择合适的广告。
从逻辑上看，这似乎是一个很合理的方向。
取消宽度限制以后，广告反而很少出现了
但实际修改以后，我很快发现结果并没有想象中那么理想。
在自己的多轮 production 人工测试中，课程页手动广告实际出现的频率明显下降。
以前使用 max-width: 620px 时，我的感觉基本上是：
点击下一页，很容易继续看到广告。
而删除最大宽度限制以后，同样连续切换课程页面，真正能够看到广告的概率体感上甚至不到 5%。
前后的反差非常大。
大致可以描述成：
此前：
Responsive + max-width 620px
人工测试体感：广告出现概率 > 90%
后来：
Responsive + 不限制最大宽度
人工测试体感：广告出现概率 < 5%不过这里必须强调：
这不是正式统计数据。
这是我自己访问 production 页面、连续点击下一页后形成的体感。
自己的测试流量很少，而且发布者本人反复访问广告，也不能直接等同于真实自然流量。
所以我不能根据这个现象直接得出：
删除 max-width: 620px
=
AdSense 填充率从 90% 降到了 5%这样的结论并不严谨。
但前后的差异已经大到足以让我认真怀疑：
问题可能不只是屏幕大小，而是当前手动广告位能够提供给 Responsive AdSense 的尺寸空间。
1920×1080 用户并不是少数
我自己的电脑分辨率是：
1920 × 1080从现有访问统计来看，1920×1080 大约占 40%。
这至少说明：
像我这样处于较宽桌面环境中的用户，并不是非常少的一小部分。
当然，不能简单推导成：
1920×1080 占 40%
=
40% 用户都会遇到和我完全相同的广告情况即使屏幕分辨率一样，实际环境仍然可能不同，例如：
- 浏览器窗口不一定最大化；
- viewport 宽度不同；
- 浏览器缩放比例可能不同；
- 页面实际可用区域不同；
- 广告请求时的库存和竞价环境也不同。
所以屏幕分辨率只能作为一个参考。
但至少它让我觉得：
宽屏桌面环境下，课程广告位变宽以后，广告展示机会是否反而下降，是一个值得认真验证的问题。
更大的广告可能更值钱，但展示少了未必更赚钱
我之前删除 620px 限制，还有一个很现实的考虑：
如果可以展示更大的长方形广告，会不会获得更高的单次广告价值？
这个想法本身并没有问题。
最终广告收入可以非常粗略地理解成：
总收益
≈
有效广告展示数量
×
每次展示的平均价值假设更大的广告平均价值确实更高，但广告真正展示出来的次数却大幅减少，那么最后的总收益仍然可能下降。
例如：
单次价值即使提高几十个百分点，也未必能够弥补展示数量下降一个数量级。
而我人工测试中观察到的变化，已经大到让我无法继续忽略这一点。
所以现在真正需要回答的已经不是：
“大广告是不是更贵？”
而是：
“不同的广告位宽度，在真实自然流量中会怎样共同影响展示数量、RPM 和最终收益？”
为什么不直接恢复原来的 620px
既然以前 max-width: 620px 时人工测试体验明显更好，一个最简单的处理方案当然是直接恢复：
max-width: 620px;但我最终没有这样做。
因为这样实际上还是在凭自己的有限测试做决定。
即使恢复 620px 以后广告再次大量出现，我仍然不知道：
- 620px 是不是最佳宽度；
- 更小的广告位会不会拥有更多可填充库存；
- 中等宽度是否能在广告数量和单次价值之间取得更好的平衡；
- 更宽的广告是否虽然展示少，但 RPM 更高；
- unrestricted Responsive 在真实自然流量中是否真的像我的人工测试表现得那么差。
所以这次我没有简单地：
删除 620px
→ 发现效果不好
→ 恢复 620px而是决定把这个问题真正变成一轮自然流量实验。
建立 A、B、C、D 四个独立广告单元
这一次，我保留当前“不限制最大宽度”的 Responsive 广告作为 D 对照组，同时新增 A、B、C 三个广告单元。
四组分别是：
- A：336
- B：468
- C：728
- D：Responsive，不限制最大宽度
需要特别说明的是：
A、B、C 并不是固定尺寸 AdSense 广告。
四个广告单元本身全部仍然使用 Responsive。
区别只是在前端限制广告容器的最大可用宽度。
具体配置为：
A：Responsive + max-width 336px
B：Responsive + max-width 468px
C：Responsive + max-width 728px
D：Responsive + unrestricted也就是说，这次真正测试的不是：
固定尺寸广告
vs
Responsive 广告而是：
同样使用 Responsive AdSense，当广告位分别只能使用 336px、468px、728px 和不限制宽度时，真实表现会有什么不同。
原来的 620px 正好位于 468 和 728 之间。
所以第一轮实验先把范围拉开一点，看随着广告可用宽度增加，各项指标到底有没有比较明显的趋势。
如果未来真实数据表明最佳区域恰好位于 468～728 之间，那么第二轮再针对 600px、620px 一类的宽度做更细测试，也会比现在直接猜一个数字更有依据。
从 AdSense 后台可以看到当前四个独立广告单元：
go-dev Tour 课程页展示广告 A 336go-dev Tour 课程页展示广告 B 468go-dev Tour 课程页展示广告 C 728go-dev Tour 课程页展示广告 D Responsive
这样设计还有一个很实际的好处。
后面不需要自己额外建立一套广告收益统计。
直接通过 AdSense 的 Ad unit 报表，就可以分别观察 A、B、C、D 四组的数据。
四组自然流量各占 25%
前端第一次创建课程页广告时，会从 A、B、C、D 中随机选择一个实验组。
四组概率相同：
A：25%
B：25%
C：25%
D：25%实际广告单元对应关系为：
A → 3362554728 → max-width 336px
B → 1260537939 → max-width 468px
C → 4220340824 → max-width 728px
D → 4728596962 → unrestricted Responsive四组全部保持：
data-ad-format="auto"
data-full-width-responsive="true"所以并没有为了这轮实验改用固定尺寸广告。
这次实现最终提交为：
b6551ac feat: 增加课程广告 ABCD 自然流量实验整个 ABCD 实验只是在现有共享课程广告实现上增加分组能力。
之前已经验证过的广告架构没有重新设计：
- Auto Ads；
- Angular SPA mount / unmount；
- 局部 layout protection；
- 不使用全局 DOM observer。
SPA 页面切换以后不能重新随机
A Tour of Go 的课程页还有一个比较特殊的问题。
它本质上是 Angular SPA。
点击“下一页”以后，并不会像传统网站那样重新加载完整 HTML，而是在当前应用内部切换课程内容。
如果每次进入下一页都重新随机，那么同一个用户的一次学习过程可能变成：
第 1 页：A
第 2 页：D
第 3 页：B
第 4 页：A这样虽然总体上可能仍然接近 25% 平均分配，但同一次访问过程中实验条件一直变化，后面的数据会比较难解释。
因此，这次实验不是“每个页面重新随机”，而是：
同一个浏览器标签页的一次访问过程保持同一个实验组。
第一次选中实验组以后，会写入：
sessionStorage使用的 key 是：
goDevCourseAdExperimentGroup例如第一次得到 C，那么随后在同一个标签页中点击：
welcome/1
→ welcome/2
→ welcome/3
→ ...都会继续使用 C。
如果当前环境无法使用 sessionStorage，还有一个当前 window 内存 fallback。
这样既能够进行自然随机分组，又能保证一次 SPA session 内的实验条件稳定。
正式环境中的实际验证
ABCD 实现上线以后，我最后在真实 production 浏览器中进行了轻量验证。
中文站这一次随机到了：
C对应：
slot = 4220340824
max-width = 728px首先进入：
/tour/welcome/1记录当前实验组，然后只点击一次“下一页”，进入：
/tour/welcome/2为了方便比较，我把切换前后的结果整理到了同一个 Console table 中。
实际结果为：
welcome/1 → C → 4220340824 → max-728
welcome/2 → C → 4220340824 → max-728可以看到：
- 页面已经从
welcome/1变成welcome/2； - group 仍然是 C；
- AdSense slot 没有改变；
data-ad-format仍然是auto；- Responsive 配置没有改变；
- 宽度 class 仍然是
max-728。
也就是说：
Angular SPA 切换课程以后，没有重新随机实验组。
而且比较巧的是，这一次截图时页面实际还填充出了一条广告。
不过，是否真正看到 filled 广告并不是这次验证的硬性条件。
AdSense 请求本来就可能：
filled也可能：
unfilled这里真正需要确认的是：
- production 正在运行新的 ABCD 逻辑；
- 实验组与 AdSense slot 对应正确；
- SPA 页面切换后实验组保持稳定；
- 下一页仍然可以正常工作；
- 页面布局没有明显异常。
这些条件已经满足。
ja-JP 也运行了同一套实验
随后我又对日语站进行了同样的轻量验证。
这一次 ja-JP 随机到了：
A实际结果是：
welcome/1 → A → 3362554728 → max-336
welcome/2 → A → 3362554728 → max-336也就是说，当前两个 production locale 都已经开始运行这套 ABCD 实验。
这里对我来说更重要的不是恰好一个抽到了 A、一个抽到了 C。
而是两边都证明：
真实 production 页面正在按照预期分组，而且 SPA 下一页以后不会重新随机。
没有为了验收而人工刷齐四组
Production 验收时，我没有为了证明 A、B、C、D 都能出现，而不断：
- 新开标签页；
- 删除
sessionStorage； - 强制刷新；
- 重复进入课程页。
这样做没有必要。
四组逻辑已经由自动化测试覆盖。
真实 production 浏览器验收只是确认：
正式环境真正运行的是已经测试过的这套实现。
实际结果已经有：
zh-CN → C
ja-JP → A而且两边 SPA 下一页以后组别都保持稳定。
这已经能够完成 production 层面的确认。
更重要的是，这是一轮广告实验。
如果继续由我自己不断刷新页面、制造大量广告请求，反而会让自己的测试行为混入接下来真正想观察的自然流量。
所以从这里开始，我会停止主动刷实验组。
接下来真正需要看的，是 AdSense 自然流量数据
技术实现到这里已经基本结束。
后面真正有价值的，是等四个广告单元逐渐积累自然流量。
主要关注：
- Impressions；
- Impression RPM；
- Estimated earnings；
- 实际广告展示机会；
- 不同广告单元的长期表现；
- 数据是否随着样本增长逐渐形成稳定趋势。
这里最值得关注的其实不是单独某一个指标。
假设未来出现：
A 展示很多，但 RPM 较低而：
C 展示更少，但 RPM 较高那么真正需要比较的仍然是最终收益，而不是只看哪一组广告更容易出现。
D 组也非常重要。
它相当于继续保留当前 unrestricted Responsive 方案作为对照。
如果未来自然流量数据真的证明：
D 的展示数量明显低于 A/B/C，同时更高的单次价值又不足以弥补展示损失，
那么我才能比较有把握地认为：
此前人工测试中发现的问题，确实可能与广告位可用宽度有关。
反过来，如果 D 在真实自然流量中的表现并没有明显变差，那么也说明自己的人工测试并不能代表真实用户。
无论是哪一种结果，都比直接凭感觉恢复 620px 更有价值。
暂时不会根据一两天数据下结论
目前 A Tour of Go 本身的自然访问规模还不算特别大。
现在又进一步平均分成四组：
25% / 25% / 25% / 25%所以每一组积累样本都会更慢。
刚开始几天，很可能出现某个广告单元只有几个 impressions，而另一个暂时更多的情况。
这种阶段没有必要马上判断：
336 最好或者：
728 RPM 最高，所以 728 胜出数据太少时，几个广告请求就可能造成非常大的百分比波动。
我更希望等四组都积累出一定规模的真实 impressions，再综合观察：
- 展示数量；
- RPM；
- 收益；
- 随着时间增长是否仍然保持相同趋势。
如果最后数据显示最佳区域可能落在：
468 ～ 728px之间，那么后面甚至还可以考虑第二轮实验，再针对原来的：
620px附近做更细的比较。
那时候再测试 600、620 或其他值，就比现在直接恢复 620px 有依据得多。
最后
这一次 ABCD 实验并不是凭空开始的。
它实际上来自一段很具体的变化过程：
原来：
Responsive + max-width 620px
↓
人工测试中经常出现较小的正方形广告
↓
广告出现非常频繁
↓
觉得桌面横向空间没有充分利用
↓
希望获得更宽、可能价值更高的长方形广告
↓
删除 max-width 620px
↓
人工测试中实际广告出现频率明显下降
↓
但自己的测试不能作为正式结论
↓
不直接恢复 620px
↓
建立 ABCD 自然流量实验当前四组正式配置为：
A：Responsive + max-width 336px
B：Responsive + max-width 468px
C：Responsive + max-width 728px
D：Responsive + unrestricted自然流量：
25% / 25% / 25% / 25%中文站和日语站都已经正式运行这套实验。
这次真正想回答的问题并不是：
哪一种广告看起来最大。
甚至也不仅仅是：
哪一种广告最容易填充。
而是：
在课程页面这种特殊布局下，什么样的 Responsive 广告可用宽度，最终能够在展示数量、广告价值和用户体验之间取得更好的平衡。
接下来暂时不再修改广告宽度，也不再人为刷测试请求。
剩下的问题，交给真实自然流量来回答。
WordPress 网站维护、性能优化与博客运营咨询
本站已持续运营超过 10 年，累计发布 1000+ 篇原创技术文章，长期实践 WordPress 网站建设、CDN / Cloudflare 配置、缓存优化、Google SEO、广告变现和多语言网站运营。
如果你的 WordPress 网站遇到访问慢、缓存异常、插件冲突、广告不显示、SEO 基础结构混乱、CDN 配置不确定等问题，可以联系我做一次远程技术排查。
适合以下用户：
✅ 个人博客站长
✅ WordPress 网站运营者
✅ 独立开发者与内容创作者
✅ SaaS 产品官网运营团队
✅ 希望优化网站速度与稳定性的站点
服务内容：
✅ WordPress 速度优化
✅ Cloudflare / CDN / 缓存配置排查
✅ 插件冲突与页面异常排查
✅ AdSense 广告显示问题排查
✅ SEO 基础结构检查
✅ 博客运营与商业化咨询
如需了解方案或交流相关问题，请直接联系我，并注明：WordPress 维护咨询。
联系方式：
Telegram：@shuijingwan
微信：13980074657
邮箱：shuijingwanwq@gmail.com