這故事發生在設計一個區域論壇的網站版面…
「年輕人啊,你這個版面還沒做完。」
「喔? 有哪邊還沒完成呢?]
「少了放廣告的地方,我要讓在地的商家來我們網站刊廣告,像某網站一樣靠廣告營利。」

雖然論壇內一些具有文化價值的原創內容,但一個新架設,流量從零開始、訪客群相對小眾的網站,是否真的有本事跟商家談登廣告?

站在商家的角度想,如何讓花錢的效益最大化?
同樣一筆錢,為什麼要在你這邊投廣告?
拿去辦活動,拿去投搜尋引擎關鍵字廣告,拿去請寫手?
都比在一個名不見經傳又沒流量的網站投廣告好吧?
現實通常是殘酷的。

以內容平台型網站、訊息型網站,版面上放廣告,不只是時代趨勢,已經是經營策略,這種充滿廣告的型態也被許多人拿來調侃:

在微信瘋傳的一系列「互聯網人才到其他行業面試」系列搞笑漫畫的其中一張,出處不詳,但肯定不是萬萬沒想到。
在微信瘋傳的一系列「互聯網人才到其他行業面試」系列搞笑漫畫的其中一張,出處不詳,但肯定不是萬萬沒想到。

如果真的要在網站上放廣告,在版面設計上需要考慮哪些事情呢?

一、廣告的創意展示形式與媒介
這年頭的裝置類型越來越多,使用者也越來越聰明,還有如 ConversionXL – Don’t Use Automatic Image Sliders or Carousels, Ignore the FadFancy Formatting, Fancy Words = Looks Like a Promotion = Ignored 等多篇國外研究都指出,使用者瀏覽網頁時,眼睛會自動忽略廣告,而讓廣告成效降低,或是忽略看起來像廣告的東西,讓重要的視覺元素失去作用。

所以要如何重新讓使用者好好看廣告,也是一個問題。這就讓廣告的花招更加千奇百怪,以下介紹幾種這年頭的廣告類型:

1.響應式尺寸的廣告(Responsive Ads)
如果我們不想花心思找廣告主,可以放現成的聯播網廣告,我們只要去查詢聯播網廣告供應商的廣告規格,跳選適合的放在網站內即可。兩欄式、三欄式是常見的網頁版面形式,在這些側邊欄找一個地方放廣告,是很輕鬆的一件事。

但在現代當然沒有這麼好解決,許多行業的網站,超過六成瀏覽者都使用行動裝置,網頁在小小的手機螢幕上當然是不會有「側邊欄」的,要嘛側邊欄內容被移到網頁的最下面去,或是併在漢堡選單內,甚至根本沒有側邊欄。主要內容區中寬 970, 700像素的水平橫幅廣告,當然也要想辦法讓它顯示在小小的手機螢幕上。

所以要產生兩段廣告碼,請工程師依 useragent 或螢幕尺寸顯示對應的廣告? 不需要,有些聯播廣告已經提供自動縮放尺寸的廣告,只要開通選項即可。

Google adsense 廣告尺寸範例
Google adsense 廣告尺寸範例

如果網站是自訂規格,讓別人來投放廣告,則要考慮不同螢幕尺寸的展示策略,是一則廣告要做兩張圖,電腦螢幕與手機螢幕分開顯示。還是電腦螢幕與手機螢幕的網頁廣告版位分開出售? 總之就是避免業主付錢買廣告,然後用手機的使用者看不到,或是瀏覽效果不佳,自適應縮放時,讓圖片上的文案看不清楚…之類的情況。

2.原生廣告(Native Ads)
圖片來自 Yahoo! 奇摩廣告介紹 https://tw.emarketing.yahoo.com/ysmacq/project.html
圖片來自 Yahoo! 奇摩廣告介紹

除了一看就知道是廣告的廣告,還有以為是分享訊息或使用心得,看到最後才發現是廣告的業配文,現在還流行一種叫原生廣告的東西,就是邪惡的使用者介面的技法之一,將廣告圖文排得跟網頁上原有的訊息流長得有九成像,使用者以為是最新訊息列表,裡面卻夾了廣告;以為是相關文章推薦,裡面卻夾了廣告。

BuzzFeed執行長派瑞提 顛覆傳統廣告 抓緊網民眼球 甚至說,與報導內容相配合的「原生廣告」(native advertising)是 BuzzFeed 的主要營收來源,這種新形態的廣告係指客戶付費請媒體公司為其量身打造廣告內容,或是讓廣告品牌融入新聞頁面。

Yahoo 也有這種原生廣告服務(Yahoo Gemini),如果要投放這種廣告的話,在圖文都有規範與審核機制,跟 Facebook 廣告一樣,廣告圖片上不能放太多文字。投放了之後有機會在 Yahoo 首頁,或是一些蘋果日報之類的聯播網出現,是個不錯的選擇。

3.畫布式全版廣告(Canvas Ads)
廣告的體驗可以更好、更新鮮、更有趣、而不是一堆干擾畫面、惱人、閃動礙眼的小圖片、浮動視窗嗎?

圖片出自 http://thenextweb.com/voice/2015/05/07/whats-the-deal-with-tnws-new-canvas-ads/#gref What’s the deal with TNW’s new Canvas ads?
圖片出自 http://thenextweb.com/voice/2015/05/07/whats-the-deal-with-tnws-new-canvas-ads/#gref What’s the deal with TNW’s new Canvas ads?

例如國外的知名新聞媒體網站 TNW (The Next Web),就有一種 Canvas Ad 廣告形式,如果使用電腦瀏覽網站,新聞內文中間是白背景,但更下層會有一層花花綠綠的廣告背景,當點擊廣告背景,內文區塊就會滑開,呈現整頁滿版的廣告。可以再點擊右手邊的按鈕,讓內文區塊變回來。(此效果可能隨網站改版,而改變形式。)

此功能當初推出時,該網站有許多範例可看,但目前卻沒看到,不過還是可以從 A Look Canvas Ads from The Next Web – News47ell ,看一下之前截圖的一些效果範例。

Facebook 也在 2016 年正式推出類似名稱的廣告形式 Facebook Canvas Ads,一樣講求創意的廣告型態、沉浸式的美好洗腦體驗,我們可以在 Youtube 找到許多範例:

4.再行銷(Retargeting)
近年來就是資安意識抬頭,還有社會不安定,讓使用者變得疑神疑鬼,在一些資安文章底下很容易看到像是這樣的留言:

「為什麼我去過某旅館訂位,或是逛過某購物網站,然後某部落格的廣告就會顯示我剛剛訂位的旅館或購物網站? 是不是那個部落格會偷我的資料?」

不是部落格偷你個資,而是購物網站設定讓廣告一直纏著你!

其實那個是一種叫再行銷的廣告技術,例如某旅館或購物網站的廣告主有設定「再行銷廣告」,只要看過某商品或進行過某動作,就會記錄在廣告商的系統內,然後此使用者只要瀏覽有使用此廣告商的新聞網、部落格、APP的廣告版位內,就會顯示旅館或購物網站設定的再行銷廣告內容,盡力把使用者再帶回去。

這功能常常讓新聞網、APP、部落格背上汙名,廣告商應該要登報,或是在 line 群組放一些謠言體來說明。使用者也可以用清 cookies,或是提交不顯示此廣告,表示抗議。

二、留意設定,避免網站內顯示不適當的廣告
內文放廣告是情有可原,但不適當的廣告,可能會降低網站使用者的好感度。例如心靈成長文章出現一堆情趣用品廣告,補教網或題庫網出現色情遊戲廣告等等,或是像下面這個例子:
資訊新聞跟打砲的關聯是? 是因為比對到"軟"這個字嗎
資訊新聞跟打砲的關聯是? 是因為比對到”軟”這個字嗎

像上圖中使用的那種廣告系統,是可以設定的,內容提供者可以封鎖不適當,或是沒成效的廣告類型。
以 Google adsesne 的設定為例
以 Google adsesne 的設定為例

三、仰賴廣告生存的網站 vs. 幫使用者擋廣告的瀏覽器套件
像台灣最大的部落格網站痞客幫,後來推出許多強制性的廣告功能,例如瀏覽者一進部落格,會強制性跳出廣告,按掉之後才能瀏覽文章。如果停留太久沒動,也會彈出廣告,按掉之後才能繼續瀏覽文章。甚至管理者在後台,也會看到廣告。

廣告如此氾濫,就有了一些可以擋掉廣告的瀏覽器套件,讓使用者得到乾淨的瀏覽體驗,iOS 9 也讓 Safari 瀏覽器內建擋廣告功能,還有一份關於阻擋網頁廣告統計報告 The 2015 Ad Blocking Report | Inside PageFair,在 2015 年,擋廣告套件在全世界有將近兩百萬的 MAU,而且遊戲業、社群網站的瀏覽者最愛使用擋廣告工具。

網站是要生存的,有一堆專家建置美好的內容,但是讓人看文章卻不用錢。還要使用一定水準的伺服器設備,不然網站跑很慢,三天兩頭壞掉,這樣是沒有人會來的。設備要成本,產生內容要成本,維護要成本,但看文章不用錢,加入會員不用錢,這樣網站要如何生存呢?

於是一些網站就有偵測機制,必須要停用或設定擋廣告工具,才能正常瀏覽網站。
攝影日報 http://photo.popart.hk/
攝影日報 http://photo.popart.hk/

這是如何做到的呢? 例如 Adblock 會阻擋網頁上與特定關鍵字相關的樣式名稱、圖片檔名、媒體檔名,我們可以用擋廣告工具的特性,製作一段簡易的 js 程式。
1.製作 ads.js,內容是 var canRunAds = true;
2.網頁內放置
< script src="/js/ads.js"</ script >
< script
if( window.canRunAds === undefined ){
// 顯示一些提示訊息...
}
< /script>

ref : adsense – How to detect Adblock on my website? – Stack Overflow

207.05 update: 上面那招已經沒效了,目前改用這招 Answer:How to detect Adblock on my website (Cumulo Nimbus – Stack Overflow)

最後再來一張調侃…

Every website these days... 出處: Twitter@cowbellerina
Every website these days… 出處: Twitter@cowbellerina