随机排序广告

ray1980

博客流行在侧边栏放置 4 到 6 个 125x125 的广告, 但一般的摆放顺序存在问题. 如果广告位置被固定, 各个位置的天然关注度肯定是不一样的.

投放广告的人都很关注他的广告会放在哪个位置, 因为这可能影响点击次数, 甚至是否在第一屏显示. 就这个问题, 其实很容易解决, 只要随机显示广告即可.

代码如何实现? 在这我推荐两种随机显示广告的处理办法.

在后端处理

在后端排序好再输出页面. 将广告节点用数组存放, 对数组进行随机排序, 再输出经过排序的数组. 参考代码 (PHP) 如下:

// 用数组存放广告列表

1. $ads = array('<a href="#"><img src="ad-125x125.png" alt="广告 1" width="125" height="125" /></a>'
   
2.                         ,'<a href="#"><img src="ad-125x125.png" alt="广告 2" width="125" height="125" /></a>'
   
3.                         ,'<a href="#"><img src="ad-125x125.png" alt="广告 3" width="125" height="125" /></a>'
   
4.                         ,'<a href="#"><img src="ad-125x125.png" alt="广告 4" width="125" height="125" /></a>'
   
5. );

复制代码

// 对数组进行随机排序
shuffle($ads);

// 输出经过排序的数组

1. $html = '';
   
2. foreach ($ads as $ad) {
   
3.         $html .= $ad;
   
4. }
   
5. echo $html;

复制代码

我们来扩展一下, 如果我是站长, 预留了 4 个广告位, 但现在只有 3 个在投放; 我想在空置的广告位放置一个 "虚位以待" 的广告招租链接, 并显示在最后, 该如何处理呢? 在排序完成之后再插放广告招租链接就可以了.

// 用数组存放广告列表

1. $ads = array('<a href="#"><img src="ad-125x125.png" alt="广告 1" width="125" height="125" /></a>'
   
2.                         ,'<a href="#"><img src="ad-125x125.png" alt="广告 2" width="125" height="125" /></a>'
   
3.                         ,'<a href="#"><img src="ad-125x125.png" alt="广告 3" width="125" height="125" /></a>'
   
4. );

复制代码

// 对数组进行随机排序

1. shuffle($ads);

复制代码

// 输出经过排序的数组

1. $html = '';
   
2. foreach ($ads as $ad) {
   
3.         $html .= $ad;
   
4. }

复制代码

// 添加广告招租链接

1. $html .= '<a href="#"><img src="sell-ad-125x125.png" alt="虚位以待" width="125" height="125" /></a>';
   
2. echo $html;

复制代码

我就是用这个方法来输出 125x125 广告的, 因为它直观可靠, 处理方便. 但是如果你希望对页面做静态化, 建议选用 JS 随机排序的方法.
在前端处理

在后端按原有循序输出, 在页面通过 JavaScript 重新排序. 假设页面输出广告区域的 HTML 片段如下.

1. <div id="ads">
   
2.         <a href="#"><img src="ad-125x125.png" alt="广告 1" width="125" height="125" /></a>
   
3.         <a href="#"><img src="ad-125x125.png" alt="广告 2" width="125" height="125" /></a>
   
4.         <a href="#"><img src="ad-125x125.png" alt="广告 3" width="125" height="125" /></a>
   
5.         <a href="#"><img src="ad-125x125.png" alt="广告 4" width="125" height="125" /></a>
   
6. </div>

复制代码

我们可以通过 JS 来对广告进行重新排序. 参考代码如下:

1. <div id="ads" style="display:none;">
   
2.         <a href="#"><img src="ad-125x125.png" alt="广告 1" width="125" height="125" /></a>
   
3.         <a href="#"><img src="ad-125x125.png" alt="广告 2" width="125" height="125" /></a>
   
4.         <a href="#"><img src="ad-125x125.png" alt="广告 3" width="125" height="125" /></a>
   
5.         <a href="#"><img src="ad-125x125.png" alt="广告 4" width="125" height="125" /></a>
   
6. </div>
   
7. <div id="random-ads" style="display:none;">
   
8. </div>
   
9. 
   
10. <script type="text/javascript">
    
11. //<![CDATA[
    
12. 
    
13. var source = document.getElementById('ads');
    
14. var target = document.getElementById('random-ads');
    
15. var ads = source.getElementsByTagName('a');
    
16. 
    
17. // 下标数组
    
18. var arr = new Array();
    
19. for(var i=0; i<ads.length; i++) {
    
20.         arr[i] = i;
    
21. }
    
22. 
    
23. // 随机排序
    
24. function randomSort(a, b){
    
25.         var tmp = parseInt((Math.random() + 0.5), 10);
    
26.         return tmp ? a-b : b-a;
    
27. }
    
28. 
    
29. // 将老的广告区的节点随机插放到新的广告区
    
30. arr.sort(randomSort);
    
31. for(var i=0; i<arr.length; i++) {
    
32.         target.appendChild(ads[arr[i]].cloneNode(true));
    
33. }
    
34. 
    
35. // 显示新的广告区和移除老的广告区
    
36. source.parentNode.removeChild(source);
    
37. target.style.display = 'block';
    
38. 
    
39. //]]>
    
40. </script>

复制代码

原文：http://www.neoease.com/random-advertisements