当前位置

用amp-iframe投放百度联盟广告

James Qi 在 2019年5月24日 - 23:50 提交

  在《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

  遇到的两个坑记录如下:

  1. 刚开始,第一屏中的广告不显示而屏幕下方的广告显示,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了;
  2. 随后,又发现点击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反映后能否有解决办法。

添加新评论

Plain text

  • 不允许使用HTML标签。
  • 自动将网址与电子邮件地址转变为链接。
  • 自动断行和分段。