Quantcast
Channel: WFU BLOG
Viewing all articles
Browse latest Browse all 784

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

$
0
0

(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 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 -->


延伸閱讀:

Viewing all articles
Browse latest Browse all 784

Trending Articles