2014年5月17日

Blogger 行動版範本擺放 Adsense 廣告的簡易技巧彙整

A+

(Pic from: aardvarky.com)
現在手機的螢幕越來越大,使用手機搜尋資訊的比例越來越高。站長們應該可以理解,網頁版的廣告收益,勢必會有一部分的流失;而如果 Blogger 行動版的 Adsense 廣告經過適當地配置,相信能夠平衡網頁版的流失。

Blogger 行動版要正常顯示 Adsense,其實一點都不困難;不過想要隨心所欲的配置,卻又不是那麼地簡單。本篇歸納出一些簡易的操作技巧,絕對讓讀者能輕易上手。



一、行動版最簡單的安裝方式


Blogger 行動範本分為「自訂版」與「官方版」,請參考「Blogger 行動版範本修改技巧」,由於「自訂版」需要不小的語法門檻,不符合本文「簡易操作」的原則,因此請注意,本文只針對「官方版行動範本」進行說明。

讓行動範本出現 Adsense 最簡單的方式有下面兩種:

1. Adsense 小工具

Blogger 後台 → 版面配置 → 新增小工具 → 選擇「AdSense」小工具



只要曾經做過以上流程,那麼無論如何「官方版行動範本」一定會出現 Adsense 廣告,只不過位置、尺寸都會跟想像的不一樣,例如行動版 Adsense 絕對不會出現在上圖小工具的位置。


2. 設定收益

Blogger 後台 → 收益 → AdSense → 在網誌上顯示廣告 → 選擇「是」→ 任選一個擺放位置



只要做過以上流程,那麼無論如何「官方版行動範本」一定會出現 Adsense 廣告,只不過位置、尺寸都會跟想像的不一樣。


3. Adsense 出現位置

不管在前面的流程安裝過一個 Adsense、還是五個 Adsense 小工具,無論是何種尺寸,在行動版一律會出現兩個 Adsense 廣告──




一個固定在網頁的最上方,約 320 x 50 大小




一個固定在網頁的最下方,約 300 x 250 大小



二、在文章中顯示 Adsense 廣告


如果覺得 Blogger 官方行動版能顯示的廣告太少,想要增加廣告曝光的機會,那麼可以在文章中插入 Adsense 安裝碼。

不過每篇文章都要手動貼上 Adsense 安裝碼,操作上是一件麻煩的事,有沒有比較省事的技巧呢?

有的,請到 Blogger 後台 → 設定 → 文章和留言 → 文章範本 → 貼上「Adsense 安裝碼」→ 儲存設定



如上圖完成後,將來每開一篇新文章時,預設的文章內容就會出現 Adsense 安裝碼,我們再將安裝碼移動到想顯示的位置即可。(以下為參考用的安裝碼形式)

<script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 336 ad -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-8931???????????9"
data-ad-slot="6910?????4"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>




三、不安裝 Adsense 小工具的方法


其實 WFU 完全沒有安裝任何 Adsense 小工具,版面上出現的 Adsense 廣告都是使用安裝程式碼的方式,無論是放在文章、或是放在 HTML/Javascript 小工具之中。

理由應該算是個人因素,因為只要在 Blogger 後台安裝了 Adsense 小工具,那麼在 Adsense 官網的管理畫面,會類似下面這樣子:



每個項目的名稱是由系統自行命名及決定,一堆密密麻麻的英文字串看了有點不舒服,很難迅速辨認,因此對 WFU而言不是很好管理。如果是在 Adsense 官網新增 Adsense 廣告,就能自己命名,管理畫面可以清爽不少。

現在問題來了,不安裝任何 Adsense 小工具,Blogger 官方行動版要怎麼出現廣告呢?


1. 設定收益

如前所述,除了安裝 Adsense 小工具,在後台還能從「收益」這個項目來顯示 Adsense 廣告,借用一下前面的圖:



因為我們的目的只是要在官方行動版顯示廣告,而不要影響到原本網頁版的廣告版面配置與數量,因此建議選擇「在我的文章下方顯示廣告」

這麼做之後,網頁版的文章下方也會顯示廣告。如果原本網頁版已經設置了三個廣告,這樣會讓廣告總數超過三個,可能導致某個重點位置的廣告無法顯示,因此必須讓這個文章下方的廣告在網頁版不顯示。


2. 隱藏文章下方的 Adsense

為了讓文章下方的廣告在網頁版不顯示,必須從範本下手,請在範本中搜尋以下這一串程式碼,這就是文章下方的 Adsense:

<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>


使用判斷式就能讓這個 Adsense 在網頁版不顯示,在以上程式碼的前後分別加入以下的紅色字串即可:

<!-- 行動版才顯示廣告 start-->
<b:if cond='data:blog.isMobile'>

<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>

</b:if>
<!-- 行動版才顯示廣告 end -->



Blogger 行動版相關心得:

4 則留言:

  1. Fu 大,為何我把 Adsense 程式碼貼到 html 範本中,一直顯示剖析錯誤?
    Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.

    回覆刪除
  2. <6525513777176975902>(以上內容請勿刪除,從括號之後開始留言)原來你貼到範本裡了,提醒一下,這篇的內容是行動版,所以把 adsense 安裝碼貼到範本裡,如本文所提,對於 "官方" 行動版沒有任何用處喔!(除非使用"自訂"行動版)

    回到你的問題,直接貼到範本的確會顯示錯誤訊息,但貼在文章內則不會,因為Blogger範本要求的規範不一樣,只要將原本的字串 async 改成 async='async' 這樣就行了。(我更新了一下內容,可同時套用於"文章內"與"範本")

    回覆刪除
  3. <4399073193028064003>(以上內容請勿刪除,從括號之後開始留言)謝謝答覆~我是想應用一下 Fu 大的教學,自型調整 Adsense 在版面中的位置 XD

    回覆刪除
  4. <2393063956387029154>(以上內容請勿刪除,從括號之後開始留言)要調整「Adsense 在版面中的位置」的話,可以參考這篇「Blogger 自訂安裝 Google Adsense 的各種位置及方式」,有各種舉例及應用的方式。

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。