AdSense Flying Carpet 滾動覆蓋廣告語法#電腦手機 AMP 適用

AdSense Flying Carpet 滾動覆蓋廣告語法#電腦手機 AMP 適用

最近注意到不少新聞媒體網站,都採用 Flying Carpet 滑動廣告 (俗稱:滾動覆蓋廣告),研究後發現其實在 AMP 網頁有相關語法支援,經過修改調整也能應用於電腦手機 Adsense 廣告,至於語法該如何產生與套用?簡單寫篇教學給站長們參考。

 

前言 & 效果展示:

 

Flying Carpet Ads 特色會在網頁捲動時以視差 Parallax 來顯示,最早爬文時發現應用於 AMP 平台【語法文件】,在這裡可以查詢到蠻多訊息,安裝好後便想讓電腦手機版也能運作,只是都沒有找到相關教學資訊。

 

後來直接透過 Chrome 瀏覽器按滑鼠右鍵檢查元素方式,發現到其實它是用 CSS 方式實現,沒想到也能直接套用到其他頁面,然後就把這篇文章給誕生,接著就看下方效果展示 DEMO 還有如何套用語法吧。

 

AdSense Flying Carpet 滾動覆蓋廣告語法#電腦手機 AMP 適用

 

Flying Carpet Ads 全螢幕滾動覆蓋廣告 – 我都稱之為滑動廣告,捲動時廣告會覆蓋螢幕,並且得要不斷滾動畫面廣告才會不見,透過友人與 Google Adsense 廣告經理確認後,這種型態與 Backdrop 都不違反政策類型是可以正常使用的。

 

電腦手機版語法教學:

 

首先在廣告單元點選 -> 多媒體廣告,接著按右上角產業別,並將廣告大小由回響式改為固定,寬 300 & 高 600 輸入好後按建立,產生語法其 HTML 是針對電腦與手機裝置,至於 AMP 則是有另外專屬代碼。

 

AdSense Flying Carpet 滾動覆蓋廣告語法#電腦手機 AMP 適用

AdSense Flying Carpet 滾動覆蓋廣告語法#電腦手機 AMP 適用

AdSense Flying Carpet 滾動覆蓋廣告語法#電腦手機 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 函數判斷。

 

AdSense Flying Carpet 滾動覆蓋廣告語法#電腦手機 AMP 適用

 

延伸閱讀:

 

參加過幾場 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 網頁層級違規處罰大不同,至於未來會如何處置或調整就靜觀其變囉!!

 

AdSense Flying Carpet 滾動覆蓋廣告語法#電腦手機 AMP 適用

AdSense Flying Carpet 滾動覆蓋廣告語法#電腦手機 AMP 適用

 

更多關於 Better Ads 概念與推廣目的,可以透過下方影片讓大家有更多了解,若聽不懂英文可以把字幕打開便有中文語系。

 

 

總結:

 

學會了擺放 AdSense Flying Carpet 滾動覆蓋廣告語法,最後要提醒雖然這種廣告很吸引目光,但最好別放太多個而造成礙眼情況,若要問我最理想擺放數目,我建議大概 1000 – 1200px 高度一個最剛好,以不超過兩個或是考量到良好用戶體驗為原則 (網址)。

 

以上就是今天 WordPress + 數位廣告小學堂,不知道站長們都學會了嗎?畢竟我非純網頁設計出身,也是詢問朋友東修西改才完成,大家有空就改看看,畢竟相信大家佈景多少有差異,建議最好還是多測試幾次確認能正常運作再上架會比較好。

 

若參考本文語法並且成功運作,歡迎斗內或是在本文下方留言告知,畢竟也想知道我花了數小時蒐集資料與截圖撰文,究竟能幫助到多少的朋友,否則每次都覺得發廢文高流量,認真寫文都沒人看這回饋與成就感不成比例啊 QQ

 

Avatar for 史密斯先生

史密斯先生

同時身兼站長與網管,校長兼撞鐘一職,史密斯是個熱愛科技三吸阿宅,尤其以 VPN & 翻牆類資訊,特別地感到有興趣,希望藉由「跳板俱樂部 VPN Club」平台讓大家掌握最即時又快速的網路動態。

臉書留言

多社群平台留言