AdSense Flying Carpet 滾動覆蓋廣告語法#電腦手機 AMP 適用
最近注意到不少新聞媒體網站，都採用 Flying Carpet 滑動廣告 (俗稱：滾動覆蓋廣告)，研究後發現其實在 AMP 網頁有相關語法支援，經過修改調整也能應用於電腦手機 Adsense 廣告，至於語法該如何產生與套用？簡單寫篇教學給站長們參考。
前言 & 效果展示：
Flying Carpet Ads 特色會在網頁捲動時以視差 Parallax 來顯示，最早爬文時發現應用於 AMP 平台【語法文件】，在這裡可以查詢到蠻多訊息，安裝好後便想讓電腦手機版也能運作，只是都沒有找到相關教學資訊。
後來直接透過 Chrome 瀏覽器按滑鼠右鍵檢查元素方式，發現到其實它是用 CSS 方式實現，沒想到也能直接套用到其他頁面，然後就把這篇文章給誕生，接著就看下方效果展示 DEMO 還有如何套用語法吧。
Flying Carpet Ads 全螢幕滾動覆蓋廣告 – 我都稱之為滑動廣告，捲動時廣告會覆蓋螢幕，並且得要不斷滾動畫面廣告才會不見，透過友人與 Google Adsense 廣告經理確認後，這種型態與 Backdrop 都不違反政策類型是可以正常使用的。
電腦手機版語法教學：
首先在廣告單元點選 -> 多媒體廣告，接著按右上角產業別，並將廣告大小由回響式改為固定，寬 300 & 高 600 輸入好後按建立，產生語法其 HTML 是針對電腦與手機裝置，至於 AMP 則是有另外專屬代碼。
語法如下，可以直接參考套用，或是把 CSS 寫入 style.css 檔案內，才不會每次要顯示這廣告得重複呼叫情況。
＃備註：佈景欄寬 100% 數值會全屏絕對置中非單側置中，除非是沒有側邊欄 sidebar 情況，如有 sidebar 欄寬自調 XXXpx 數值設定
<style>
.ad{
height: 500px;
position: relative;
display: block;
overflow: hidden!important;
box-sizing: border-box!important;
}
.fixed{
position: absolute!important;
top: 0!important;
left: 0!important;
width: 100%!important;
height: 100%!important;
border: 0!important;
margin: 0!important;
padding: 0!important;
clip: rect(0,auto,auto,0)!important;
-webkit-clip-path: polygon(0px 0px,100% 0px,100% 100%,0px 100%)!important;
clip-path: polygon(0px 0px,100% 0px,100% 100%,0px 100%)!important;
}
.flying_carpet_ads{
position: fixed!important;
top: 0!important;
width: 100%; /* 備註 */
height: 100%;
-webkit-transform: translateZ(0)!important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
</style>
<div class="ad"><div class="fixed"><div class="flying_carpet_ads">
廣告代碼
</div></div></div>
AMP 語法教學：
至於 AMP 就簡單些，首先把 amp-fx-flying-carpet-0.1.js 貼到 <head></head> 之間。
然後在要呈現廣告位置貼上下圖步驟二語法，文章更新後大概 10 – 15 分鐘就會顯示了。
想必會有 WordPress 站長問說該如何區別電腦手機與 AMP 網頁，其實可善用 is_amp_endpoint 函數判斷。
延伸閱讀：
參加過幾場 Google Adsense 實體活動與線上講座，可以發現到他們現在與多個網路廣告巨擘，合推名為 Coalition for Better Ads 改善廣告聯盟 (俗稱：好廣告聯盟)，主要是在這數位浪潮中希望讓瀏覽用戶們，可以有良好的閱讀感受，並且告訴站長們那些廣告形式會有不好的互動與效果。
並且 Google於 2019 年 7 月 9 日起凡是使用 Chrome 瀏覽器用戶，它會遵循 Better Ads 好廣告聯盟規範，只要違反下圖 Better Ads Standards 都會被阻擋無法顯示，最嚴重甚至將 Adsense 帳號給停權不得不注意，最主要目的也是因為用戶有不好瀏覽體驗，反而會對該品牌有負面印象，甚至安裝 Ad Block 之類阻擋廣告外掛，這樣對廣告主與媒體間傷害甚大。
最新的案例莫過於全台灣最大 BSP 平台「痞客邦」，貼出【Google AdSense 廣告顯示異常公告】消息，隨後知名科技網癮科技寫了篇「搜尋文章終於不用跳過痞客邦 今天完全沒有蓋版廣告超清爽」，這篇文章寫出許多使用者們的心聲，畢竟他們採用蓋板廣告行之有年，可說是最大獲利者，現在 Google 大刀闊斧肯定他們也得針對這部分好好調整，否則無法繼續擺放 Adsense 與其他數位廣告。
至於這個浪潮已經成為全球趨勢，現在全世界已經再實施 ing，其實早在去年 2018 搜尋一哥 Google 就在歐美國家實行，當時採用 Chrome 阻擋政策便發現高達三分之一網站不符合規範，直到今年重新審查數百萬個網站均已獲得改善，依據外媒資料指出目前僅不到 3% 網站不合規定，並且只有 1％ 網站被阻擋廣告。
＃ 補充：聊到這想必有朋友問究竟 Google 該如何判定與阻擋？？ 目前除了會依據 Better Ads Standards 規範並採用已推行 Ad Experience Report 服務幫助用戶了解自家網站數位廣告是否符合規範，若不符合有 30 天可以改善，聽說 Google 評級將會影響整個域名，因此即使只有一兩個網頁犯規，其域名都會被判定無法投放廣告被封鎖，這和 Adsense 網頁層級違規處罰大不同，至於未來會如何處置或調整就靜觀其變囉！！
更多關於 Better Ads 概念與推廣目的，可以透過下方影片讓大家有更多了解，若聽不懂英文可以把字幕打開便有中文語系。
總結：
學會了擺放 AdSense Flying Carpet 滾動覆蓋廣告語法，最後要提醒雖然這種廣告很吸引目光，但最好別放太多個而造成礙眼情況，若要問我最理想擺放數目，我建議大概 1000 – 1200px 高度一個最剛好，以不超過兩個或是考量到良好用戶體驗為原則 (網址)。
以上就是今天 WordPress + 數位廣告小學堂，不知道站長們都學會了嗎？畢竟我非純網頁設計出身，也是詢問朋友東修西改才完成，大家有空就改看看，畢竟相信大家佈景多少有差異，建議最好還是多測試幾次確認能正常運作再上架會比較好。
若參考本文語法並且成功運作，歡迎斗內或是在本文下方留言告知，畢竟也想知道我花了數小時蒐集資料與截圖撰文，究竟能幫助到多少的朋友，否則每次都覺得發廢文高流量，認真寫文都沒人看這回饋與成就感不成比例啊 QQ
