在《AMP页面投放百度联盟广告的办法》一文中我们当时采用的是第三种办法，也就是“在AMP页面直接放置百度联盟的JS代码”，虽然后续观察中流量也没有明显减少，但作为一个技术开发者，不能通过AMP验证始终让人觉得有些不规范、不爽🤔
于是在另外一个系列网站上，今天尝试了上文中的第二种办法：“用amp-iframe投放百度联盟广告”，下面进行一些要点记录：
首先，需要在百度联盟后台新生成几个需要的广告单元，之所以新生成而不是用以前的广告单元代码，是希望能方便地单独监控后续效果，可以使用反屏蔽代码，例如：
<script type="text/javascript" src="//domain.example.com/common/res/resource/mgk.js?kfx11no=bz1"></script>
然后，在某个域名下新建几个需要的页面（以后供amp-iframe调用嵌入），嵌入以上的百度联盟广告单元反屏蔽代码，例如https://example.com/amp-baidu-1.html 中放置这样的代码：
<!DOCTYPE html> <html lang="zh-hans" dir="ltr" > <head> </head> <body> <!-- Baidu Union Top AMP 2019 --> <script type="text/javascript" src="//domain.example.com/common/res/resource/mgk.js?kfx11no=bz1"></script> </body> </html>
再来修改AMP页面，在head和body中分别添加下面的代码：
<!doctype html> <html amp lang="zh-hans" dir="ltr"> <head> <meta charset="utf-8"> ...... <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script> ...... </head> <body> ...... <amp-iframe width="300" height="250" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" layout="responsive" frameborder="0" src="https://example.com/amp-baidu-1.html"> <amp-img layout="fill" src="https://example.com/amp-blank.png" placeholder></amp-img> </amp-iframe> ...... </body> </html>
这样就可以了👌。关于AMP页面使用iframe的说明，请看官方文档：amp-iframe。
遇到的两个坑记录如下：
- 刚开始，第一屏中的广告不显示而屏幕下方的广告显示，chrome调试窗口显示报错信息：An amp-iframe may not appear close to the top of the document. The iframe must be either 600 px away from the top or not within the first 75% of the viewport when scrolled to the top, whichever is smaller. 也就是需要距离顶部有一定距离才行，但再仔细看文档，发现使用 placeholder 可以解决，于是我们加入了一个空白图片 <amp-img layout="fill" src="https://example.com/amp-blank.png" placeholder></amp-img> ，就可以在屏幕任何地方显示这个iframe了；
- 随后，又发现点击amp-iframe中的广告后，居然显示的内容也局限在小的iframe中，而不是跳出进行全屏显示，这显然也不是我们需要的效果，再查资料，加入allow-popups和allow-popups-to-escape-sandbox，具体还可以看更多sandbox属性文档介绍，加入后清理浏览器缓存，刷新页面后再点击amp-iframe的广告就可以跳出这个iframe了，在安卓手机和苹果手机上测试都可以，但暂时还没有做更多浏览器的测试。
这样就基本上实现了我们需要的效果，准备先观察几条，看看百度联盟的后台统计情况，再进行完善和推广到更多网站中。不能把百度给我们AMP页面带来的流量浪费了，希望会带来与普通Web页面和MIP页面投放百度广告效果差不多的收益。✌😃
补充：上周折腾了一番、写了上面的记录，在amp页面算是可以正常看到百度联盟的广告而且符合amp验证规则，但从这几天百度联盟的数据来看完全没有展示量，今天又反反复复看amp-ad的文档，包括尝试remote.html，始终无法让amp的广告显示，再又尝试把src链接到自身域名更不行，只好放弃，先改用《AMP页面投放百度联盟广告的办法》一文中方法三：直接投放百度联盟广告代码、破坏amp验证。
另外，本周一5月27日去北京谷歌办公室参加交流会，给Juliana反映了amp广告在国内不显示的问题，她和Google团队的人基本上都不知道还有这样的情况。我在网上也搜索到这样一条：3p ad frame (*.ampproject.net/) not accessible in China，是中国站长反映的情况，但也没有看到解决办法的下文。不知道给Juliana反映后能否有解决办法。
评论