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

(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

部落格廣告相關文章：