2012年9月26日

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

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

Wayne Fu 0 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


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

9 則留言:

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

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

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

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

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

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

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

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

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

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

    BloggerAds的廣告能改長,寬嗎?

    回覆刪除

張貼留言注意事項:

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

TOP