新時代的網頁版面設計 – 廣告怎麼放?

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

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

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

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

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

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

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

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

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

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

Google adsense 廣告尺寸範例

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

2.原生廣告(Native Ads)

圖片來自 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?

例如國外的知名新聞媒體網站 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 的設定為例

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

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

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

於是一些網站就有偵測機制，必須要停用或設定擋廣告工具，才能正常瀏覽網站。

攝影日報 http://photo.popart.hk/

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