2012年9月26日

部落格廣告(BloggerAds)卡住網頁載入的完整解決方案

A+

(Pic from: htcexperiments.org)
目前台灣部落格的前兩大廣告商為「Google Adsense」與「BloggerAds」,Google Adsense 挾帶自家龐大資料庫的優點,因此廣告相關性很精準;BloggerAds 的好處是只要放的位置高,就算沒有點擊數也是有固定收入。而如果部落格有放這兩個廣告一段時間的話,應該可以感受到這兩家在網頁載入效能的差別──

1. Google Adsense:龍頭老大的程式碼當然是專業、沒話說,javascript 使用動態載入,完全不會阻礙頁面其他區塊的載入

2. BloggerAds:台灣的公司要多加油,程式碼使用同步載入,這樣只要伺服器一出問題或是網路塞車,那麼網頁所有在 BloggerAds 後面的 HTML 程式碼就只能眼睜睜地被塞住,完全無法執行。

以下為尋找解決 BloggerAds 此問題的過程及原理,想跳過請直接看「三、最佳安裝解決方案」。


一、各種解決方案

以下是 google 到的一些解決方案:

1. 使用 Iframe:將 BloggerAds 的安裝碼存成一個 html 檔,上傳到自己的網路空間,再連結到 Iframe 標籤的 src 裡面,如此 Iframe 與我們的部落格就像是平行的程序,彼此之間不會互相干擾。實做的方法在這兩個網頁「天殺的 BloggerAds」、「Blog側邊欄改用iframe以提升網頁載入速度」。

這個方法的缺點是,要找到適合放 html 檔、而且能順利外連的網路空間有點麻煩,我把 html 檔放到 hinet 空間還會被植入廣告;而且程式碼寫入 html 檔後上傳,以後要修改、變動時又是一個麻煩事,有太多步驟要進行。

2. 使用延遲載入:如「這個網頁」 所展示的各種技巧,將 BloggerAds 區塊隱藏起來,等頁面載入完再將區塊顯示;或是將使用 DOM 搬動區塊的技巧,讓 BloggerAds 在網頁最後面載入,載入後搬到需要擺放的地方。

以上兩種技巧都能有效提升網頁載入速度,但是──當 BloggerAds 的伺服器出問題、或是網路塞車時,延遲載入並無法解決網頁塞住的問題,因為就算 BloggerAds 擺在頁面最後才載入,一些 "動態載入" 的小工具(如網站計數器)、社交外掛(如讚、+1)執行順序是在最後面,只要 BloggerAds 塞住了,所有 "動態載入" 的程式一樣全部卡住。

3. 改用動態載入技巧:使用「這個網頁」 的技巧,嘗試將 BloggerAds 的安裝方式改為動態載入,結果──均無法顯示廣告。


二、Iframe 安裝方式最佳化

嘗試了各種方法後,真正有效的只有 Iframe 方案,但由於其安裝方式跟日後維護都很麻煩,因此我的構想是,能否直接把程式碼寫入 Iframe 裡面,而不是用外連 html 檔的方式呢

1. Iframe 加入 HTML 內容的方法:實際上使用 javascript 語法是做得到這一點的,但是又得搞定各大瀏覽器相容性的問題,最後找到了「這個網頁」,其回答的語法經測試之下,果然能成功的把 HTML 內容寫入 Iframe 並順利執行。

2. 變更 script 字串的技巧:別以為這樣就能把 BloggerAds 的安裝碼寫入 Iframe,因為安裝碼有 <script> 標籤,由於網頁安全性的限制,瀏覽器不允許將 <script> 標籤動態寫入其他標籤之內。

變通的方法為,將 '<script>安裝程式碼</script>' 這樣的字串,拆開成為下面的形式:

'<scr' + 'ipt>安裝程式碼</scr' + 'ipt>'
這樣就能騙過瀏覽器了,而將以上 2 點組合起來,就是下面第三大點的解決方案。



三、最佳安裝解決方案

1. 拆開 BloggerAds 安裝碼:首先找到自己的 BloggerAds 安裝碼,大概長得像下面這個樣子:

<script type="text/javascript" src="http://js1.bloggerads.net/showads.aspx?blogid=20120921000013&charset=utf-8"></script>
接著利用「二、Iframe 安裝方式最佳化」→ 第 2 點的技巧,將 script 字串拆開來,像下面這般:

'<scr' + 'ipt type="text/javascript" src="http://js1.bloggerads.net/showads.aspx?blogid=20120921000013&charset=utf-8"></scr' + 'ipt>'
2. 安裝程式碼:接著在想要擺放 BloggerAds 安裝碼的地方,加入以下程式碼──


3. 調整參數:請參照以上行號──

A、E:A 行與 E 行紅字的 "bloggerAds1" 字串必須一樣,可改為自訂的 id 名稱。如果部落格有放置第二個 BloggerAds 廣告,第二個必須使用不同的 id。

A:綠字部分的高度、寬度請依自己的廣告尺寸調整,必須比廣告尺寸稍微大一點,以免某些部分會被 iframe 外框遮住。

G:請按照「1. 變更 BloggerAds 安裝碼」,將自己拆開後的安裝碼字串,置換本行的紅色字串

4. Blogger 安裝:以上程式碼可直接貼在 HTML / Javascript 小工具內就能執行。


四、結語

安裝完後,原來的網頁與 iframe 就等於是兩個各自執行的網頁,再也沒有塞車的問題了。本文的現象其實不光只是 BloggerAds 會發生,所有外連 js 檔的外掛程式都有可能引起網頁塞車,這也是如果本身判斷功力不夠時,網頁盡量少裝外連 js 檔的原因;但大公司的外掛 js 通常會使用動態載入的程式碼,那就可以安心使用。

由於本站目前處理 javascript 的功力比之前好很多,為了避免類似的狀況發生,近幾個月發佈的 hack、小工具都是採用動態載入的程式碼,不會影響網頁載入。

本文的技巧可用來處理無法動態載入的 javascript 程式碼,除了 BloggerAds 這家廣告商,如果部落格使用了其他家的廣告商,且其程式碼一樣不長進的話,那麼就使用本文的方法來處理吧!

一點小提醒:

Google Adsense 怕有人玩弄 javascript、改變 iframe 的尺寸或將 iframe 放到會被誤點廣告的地方來影響公平性,條款明文禁止將安裝碼放在 iframe 裡面,因此絕對不能在 Google Adsense 使用 iframe,否則會被永久停權的!

另外,Google Adsense 條款很細,很多人常常要領款前就被停權,最好詳細看一下細則、或 google 一下他人被停權的原因,其中一個就是不允許在網頁中出現鼓勵點擊廣告的暗示。

Set iframe innerHTML without loading page in it


部落格廣告相關文章:

17 則留言:

  1. 感謝此文~~~~ 好好用!!
    PRO級的就是不一樣(膜拜)~~

    回覆刪除
  2. <7132595434075718463>(以上內容請勿刪除,從括號之後開始留言)
    過獎了, 這是一篇幫前人構想優化的文章 :P

    回覆刪除
  3. 我也用了 真的好好用 ^O^

    回覆刪除
  4. <8792659165012930103>(以上內容請勿刪除,從括號之後開始留言)
    ^^ (.握手.)

    回覆刪除
  5. 我也弄好了!!OH YEAHHHHHHH~~~~~

    回覆刪除
  6. <5761899823125811526>(以上內容請勿刪除,從括號之後開始留言)
    恭喜啊~
    (都過了快三個月...)

    just kidding, 我知道妳很忙的 ^^

    回覆刪除
  7. 請問以前bloggerADS不是有禁止使用iframe拉廣告嗎?還是時過境遷,現在可以了?

    回覆刪除
  8. <1450707964534623432>(以上內容請勿刪除,從括號之後開始留言)
    使用iframe的發想是從本文「一、各種解決方案」-->「1. 使用 Iframe」的兩篇原始出處而來,因此並不清楚您提的「以前bloggerADS不是有禁止使用iframe拉廣告嗎」

    為了這一點我也曾在「bloggerADS」找他們的規定,不過沒看到 bloggerADS 有寫什麼規定,如果您在 bloggerADS 的官網看到禁止 iframe 的敘述,也歡迎提供網址,讓其他網友知悉此事。

    回覆刪除
  9. 你好,我並無意冒犯,剛好只是以前看過某部落客有詢問過客服相關的問題(網址所附如下,請參考文末),而bloggerADS也有回覆說不能使用iframe,所以才提出疑問,至於是否有明文規定,這是我的疏忽,並沒有去詳查,以上,謝謝部落格主回覆。

    http://desw.blogspot.tw/2008/10/iframebloggerad.html

    回覆刪除
  10. <8977750886304952672>(以上內容請勿刪除,從括號之後開始留言)
    謝謝提供網址,這個網址的確有參考價值,就留給所有網友參考了。

    而我個人的看法是,Google Adsense 在其官網的注意事項,關於 iframe 的部分寫得非常清楚;而 bloggerADS 倒是沒看到非常完整的注意事項規定,也沒提到 iframe 相關事宜。若 bloggerADS 日後要拿 iframe 的使用作為處罰,目前看不出官方有什麼站得住腳的地方。

    當然,如果將來 bloggerADS 把規定寫清楚了,自然就沒有爭議。

    回覆刪除
  11. 您好,想請問一下,我按照您上述的方式操作後,結果廣告欄底下有好大一塊空白,怎麼設定高度都還是一樣,不知道哪裡出問題了?
    我的Blog:http://gd-ant.blogspot.com/

    回覆刪除
  12. <3638981195373277922>(以上內容請勿刪除,從括號之後開始留言)hi~ ms. Ant,
    我注意到你有修改程式碼 A 行高度的參數了,你改成 600px。既然下方還是有空白的話,那就需要再測試小一點的數值,我測了一下,大約 370px 是剛剛好的數值,試試看吧!

    回覆刪除
  13. 哇!真是太謝謝你了,已經改好了^^

    回覆刪除
  14. <5999950481328125342>(以上內容請勿刪除,從括號之後開始留言)不客氣 :)

    回覆刪除
  15. 很實用!不只是部落客~一般網站也可以使用!最近來改改看

    回覆刪除
  16. 請問一下,板大..

    BloggerAds的廣告能改長,寬嗎?

    回覆刪除
  17. <5301785339014944237>(以上內容請勿刪除,從括號之後開始留言)你可以看看 BloggerAds 有沒有提供自訂尺寸的廣告

    回覆刪除

張貼留言注意事項:

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