2015年3月4日

[工具] 在 Blogger 文章各種位置插入 Adsense 廣告﹍安裝懶人包

[工具] 在 Blogger 文章各種位置插入 Adsense 廣告﹍安裝懶人包

Wayne Fu 0 A+
上一篇「Blogger 自訂安裝 Google Adsense 的各種位置及方式」,雖然內容很詳盡,只是對不熟悉語法與 Blogger 範本的讀者,可能看得有點吃力。

另外一點是,很多讀者想在文章中放入 Adsense 廣告,但得一篇篇手動加入安裝碼,這對網站有數百篇文章的站長而言,是非常頭大的一件事。還好根據「BLOGGER 繼續閱讀隱藏廣告和物件」的概念,這件事現在可以交給程式自動執行。

本篇的懶人包,能讓對語法及範本不熟的站長也可輕鬆安裝,如果你想讓 Adsense 廣告自動出現在以下四個位置,那麼就可繼續看下去:
  • 文章標題之前
  • 文章標題之後
  • 繼續閱讀的位置
  • 文末的位置


<< 請注意!本篇文章含會員加值文章內容,需點數兌換 >>



一、準備動作


1. 取得 Adsense 安裝碼

早期的 Adsense 安裝碼是同步執行,現在已經提供 "非同步" 執行的版本,可減少阻礙頁面載入的時間,如果要重新安裝的話,建議採用新的版本。如不清楚如何取得 Adsense 安裝碼,請依以下步驟:

進入「Adsense 官網」→「我的廣告」→ 選擇廣告單元 → 按下「取得程式碼」:



如上圖紅框,可取得「300 x 600 -- WFU BLOG」這個廣告的安裝碼。




選擇「非同步」後,複製所有程式碼。


2. 安裝碼格式

複製下來的程式碼大致長得像這樣:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 300 X 600 - WFU BLOG -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-8931283480311870"
data-ad-slot="3230842908"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>


  • 藍色的數字分別代表廣告區塊的寬、高像素值
  • 紅色字串為可辨識廣告的代號

請記下以上自己 Adsense 安裝碼的藍色、紅色字串,之後會用到。



二、Head 區塊程式碼


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>

第一段可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jquery,以免重複安裝。

第二段為 Adsense 的前導 js 碼,只需執行一次就好,就算一個網頁放了三~四個 Adsense,都不需再重複執行這一段,因此建議放在範本中 head 區塊即可。



三、安裝 Adsense


接著搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:


以下參數修改請參照以上程式碼行號:
  • E~O:文章標題之前
  • Q~AA:文章標題之後
  • AC~AM:繼續閱讀的位置
  • AO~AY:文末的位置
  • 程式碼共有以上四段,請留自己需要使用的部分即可,不需要的部分請刪除。
  • 紅字的參數,請依照「一、準備動作」→「2. 安裝碼格式」,改成自己的 Adsense 安裝碼參數
  • 藍字的參數,代表 Adsense 廣告會置中,與上、下分別距離 20px,可自行修改相關的 CSS 參數。
  • B、BB:這兩行代表 Adsense 只在文章頁面出現。如果想在首頁也出現的話,可移除這兩行,但不建議這麼做,因為一個頁面只能出現三~四個廣告單元,而在首頁出現的話,會超過額度,導致你某些位置想顯示的廣告,反而無法顯示。



四、聯絡表單


加值文章的會員,使用上有任何問題請用下面的表單與我聯繫:

稱呼:(必填)
電子郵件:(必填)
本文標題或網址:(必填)
會員編號:(必填)
請詳細描述您的需求、問題或意見,如提供的資訊不足,可能無法回覆:(必填)



Adsense 相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

10 則留言:

  1. 感恩.可正常使用...想請問如果我要換成回應式廣告(即長寬自動).要如何修改程式碼?

    回覆刪除
  2. 你好,我安裝了回應式廣告,結果是是沒問題的^^
    編碼裡面的廣告長、寬就變成想要怎樣比例的廣告,就設定怎樣的解析度即可。

    然後想請問一個問題,本篇教學文中廣告的位置有四類型,標題前、標題後、延伸閱讀、底部。

    這樣會遇到文章較長的時候""無法""將廣告自動出現在文章比較中段之處,不知道有無變通的方法呢?

    文章範例 http://beat-test-w.blogspot.com/2015/07/2.html#more

    我設定標題前、繼續閱讀這兩個廣告就會變得很貼近,再加上文章內也會有首頁圖,這樣好近呀。

    謝謝^^

    回覆刪除
    回覆
    1. 有的,我現在比較中間的就是用手動插入!!哈~

      所以目前就網站中現有的教學裡面,就是這四個區塊了對嗎?

      刪除
  3. 請問如果是要放兩個方形的並排要怎麼做呢?
    我放兩個 但是它是排上下(分行)

    回覆刪除
  4. 我按照了你的方法放置在文章文末,但未有看見廣告,是否要等一段時間才會出現?
    dse00.com
    十分感激

    回覆刪除
    回覆
    1. {getScript("http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js",init)}算是重複安裝嗎?

      刪除
  5. 我嘗試把google aesene自動插入文章的懶人包放到我的Blogger範本裡
    但是似乎沒有執行
    能幫我看一下問題可能出在哪嗎
    以下是我的blogger: https://zec100.blogspot.com/

    回覆刪除
  6. 你好
    我改用的另一個Blooger網誌做測試
    https://czacg.blogspot.com/
    這個版型是另外下載來用的
    應該不屬於官方的 RWD
    不過依然沒有顯示出google adsense

    回覆刪除
  7. 最近想要在文章中插入廣告,第一個想到就是WFU大的部落格,果然一下就找到了啊,等等就來安裝!!謝謝。

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP