投放廣告的人都很關注他的廣告會放在哪個位置, 因為這可能影響點擊次數, 甚至是否在第一屏顯示. 就這個問題, 其實很容易解決, 只要隨機顯示廣告即可.
代碼如何實現? 在這我推薦兩種隨機顯示廣告的處理辦法.
在後端處理
在後端排序好再輸出頁面. 將廣告節點用數組存放, 對數組進行隨機排序, 再輸出經過排序的數組. 參考代碼 (PHP) 如下:
復制代碼 代碼如下:
// 用數組存放廣告列表
$ads = array('<a href="#"><img src="ad-125x125.png" alt="廣告 1" width="125" height="125" /></a>'
,'<a href="#"><img src="ad-125x125.png" alt="廣告 2" width="125" height="125" /></a>'
,'<a href="#"><img src="ad-125x125.png" alt="廣告 3" width="125" height="125" /></a>'
,'<a href="#"><img src="ad-125x125.png" alt="廣告 4" width="125" height="125" /></a>'
);
// 對數組進行隨機排序
shuffle($ads);
// 輸出經過排序的數組
$html = '';
foreach ($ads as $ad) {
$html .= $ad;
}
echo $html;
我們來擴展一下, 如果我是站長, 預留了 4 個廣告位, 但現在只有 3 個在投放; 我想在空置的廣告位放置一個 "虛位以待" 的廣告招租鏈接, 並顯示在最後, 該如何處理呢? 在排序完成之後再插放廣告招租鏈接就可以了.
復制代碼 代碼如下:
// 用數組存放廣告列表
$ads = array('<a href="#"><img src="ad-125x125.png" alt="廣告 1" width="125" height="125" /></a>'
,'<a href="#"><img src="ad-125x125.png" alt="廣告 2" width="125" height="125" /></a>'
,'<a href="#"><img src="ad-125x125.png" alt="廣告 3" width="125" height="125" /></a>'
);
// 對數組進行隨機排序
shuffle($ads);
// 輸出經過排序的數組
$html = '';
foreach ($ads as $ad) {
$html .= $ad;
}
// 添加廣告招租鏈接
$html .= '<a href="#"><img src="sell-ad-125x125.png" alt="虛位以待" width="125" height="125" /></a>';
echo $html;
我就是用這個方法來輸出 125x125 廣告的, 因為它直觀可靠, 處理方便. 但是如果你希望對頁面做靜態化, 建議選用 JS 隨機排序的方法.
在前端處理
在後端按原有循序輸出, 在頁面通過 JavaScript 重新排序. 假設頁面輸出廣告區域的 HTML 片段如下.
復制代碼 代碼如下:
<div id="ads">
<a href="#"><img src="ad-125x125.png" alt="廣告 1" width="125" height="125" /></a>
<a href="#"><img src="ad-125x125.png" alt="廣告 2" width="125" height="125" /></a>
<a href="#"><img src="ad-125x125.png" alt="廣告 3" width="125" height="125" /></a>
<a href="#"><img src="ad-125x125.png" alt="廣告 4" width="125" height="125" /></a>
</div>
我們可以通過 JS 來對廣告進行重新排序. 參考代碼如下:
復制代碼 代碼如下:
<div id="ads" >
<a href="#"><img src="ad-125x125.png" alt="廣告 1" width="125" height="125" /></a>
<a href="#"><img src="ad-125x125.png" alt="廣告 2" width="125" height="125" /></a>
<a href="#"><img src="ad-125x125.png" alt="廣告 3" width="125" height="125" /></a>
<a href="#"><img src="ad-125x125.png" alt="廣告 4" width="125" height="125" /></a>
</div>
<div id="random-ads" >
</div>
<script type="text/javascript">
//<![CDATA[
var source = document.getElementById('ads');
var target = document.getElementById('random-ads');
var ads = source.getElementsByTagName('a');
// 下標數組
var arr = new Array();
for(var i=0; i<ads.length; i++) {
arr[i] = i;
}
// 隨機排序
function randomSort(a, b){
var tmp = parseInt((Math.random() + 0.5), 10);
return tmp ? a-b : b-a;
}
// 將老的廣告區的節點隨機插放到新的廣告區
arr.sort(randomSort);
for(var i=0; i<arr.length; i++) {
target.appendChild(ads[arr[i]].cloneNode(true));
}
// 顯示新的廣告區和移除老的廣告區
source.parentNode.removeChild(source);
target.style.display = 'block';
//]]>
</script>
如果有如同方法 1 那樣的擴展需求, 將空廣告位顯示在最後, 且顯示廣告招租鏈接, 該如何處理? 這個當作課後習題吧...
