在《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反映後能否有解決辦法。
评论