如何讓博客來廣告的內容每次都顯示不同？

博客來網路書店有個分紅機制，叫做「AP策略聯盟」。你只需要註冊一個帳號，往後凡是經由這個帳號的推薦所完成的購物，你都可以獲得該筆交易金額的2%到4%作為分紅獎金。

你推薦的東西可以是書籍、CD、DVD或者其他，總之應該是你感興趣或者你覺得部落格讀者會感興趣的東西。

這些推薦商品可以是文字或者圖案形式的網址連結。關於後者，博客來本身就經常會針對相關的促銷活動，提供許多動畫格式的GIF圖檔（就是你會在各分類目錄的右側邊欄看到的那種150x68大小的圖案），你只需要去拿過來，然後在連結網址裡面套用自己的帳號資訊即可。

以侯文詠的新書《靈魂擁抱》為例，jarsing這個帳號的推薦網址應該是http://www.books.com.tw/exep/assp.php/jarsing/exep/activity/activity.php? id=0000010761&sid=0000010761&page=1；而相對應的圖案網址則是http: //addons.books.com.tw/G/ADbanner/2007/08/soul15068.gif。

問題是，你的部落格版面空間有限，而且更重要的是，讀者的注意力也非常有限。你當然可以一股腦地擺上五、六個圖案連結，但是只怕效果會大打折扣，至少不會像你所預期的那麼好。

也許能夠採用某種變通方式，使得每次只顯示一個廣告圖案，但是內容（活動）卻每次都不一樣。於是靈機一動之下，便想到了可以透過Javascript數學運算裡面的亂數功能，來隨機產生一組廣告。

運作模式基本上類似於Google最近推出的AdSense推薦2.0的「輪流播放」方式。原理很簡單，就是準備好一個商品網址陣列加上一個對應的圖案網址陣列（這些陣列是用來裝填你想要推薦的商品的連結網址），然後每次由亂數去決定要選取的是陣列清單當中的哪一件商品。

至於如何產生這份廣告清單呢？步驟一如往常：你可以在登入「AP維護查詢系統」之後，由左側邊欄的「銷售連結產生器」製作你想要推薦的商品的連結；或者進入「取得活動網址」直接挑選想要推薦的商品。

<!-- [輪播]博客來廣告 -->
<script type="text/javascript"><!--
// (1)商品網址陣列（含帳號資訊）
var links = new Array(
"商品網址1",
"商品網址2",
…
"商品網址N"
);

// (2)圖案網址陣列
var imgs = new Array(
"圖案網址1",
"圖案網址2",
…
"圖案網址N"
);

// (3)由亂數決定陣列索引
var theNum = Math.round(Math.random()*(links.length-1));
var theLink = links[theNum];
var theImg = imgs[theNum];

// (4)顯示廣告
document.write("<a href='" + theLink + "' target='_blank'><img src='" + theImg + "' alt='博客來廣告' width='150' height='68' /></a>");

// (5)註明此為博客來廣告
document.write("<br/><a href='http://www.books.com.tw/exep/assp.php/你的帳號/' target='_blank'>↑博客來廣告(" + links.length + ")↑</a>");
//-->
</script>

呈現出來的結果如下所示，其下方有一行文字標示著這是博客來的廣告，並且有個數字括號，註明目前總共有多少件商品在輪流播放。這個數字其實主要是寫給部落客自己看的，因為可想而知的是，推薦的商品數量越多，則每件商品被點閱的機會也就越小。

此外無可避免的是，因為是機率的問題，所以每次會顯示什麼廣告內容並不一定，甚至也可能好幾次看到的都是一樣的商品。希望這個程式的後續版本能夠想到辦法來解決這點。

【2007.09.30 加入程式失效時的處理方法】

注意囉，如果你發現本文所介紹的這段Javascript在你的網站裡面無法發揮功效的話，那麼可能是因為你的部落格系統無法容許在<script>和</script>之間出現「<」和「>」字元，所以請將用來括註程式碼的「<!--」和「//-->」當中的小於和大於符號置換為「&lt;」和「&gt;」。

【2007.11.15 加入實際展示範例】

這段展示範例是從右側邊欄的「工商服務」區移植過來的。必須留意的是，有些部落格系統會自動將換行置換為HTML的「<br/>」標籤，進而導致script程式碼無法正確執行。所以在移植這段程式碼的時候，在<script>和</script>之間是完全沒有分行的；此外「<!--」和「//-->」也一併被拿掉了。若想要測試效果的話，可以重新整理網頁試試看。