PHP Randomly sorted ad implementation code

People who serve ads are very concerned about where their ads will be placed, because this may affect the number of clicks, or even whether they are displayed on the first screen. This problem is actually very easy to solve, just randomly display the ads.

How to implement the code? Here I recommend two ways to deal with random display ads.

Processing in the backend
After sorting in the backend, output the page. Store the advertising nodes in an array, sort the arrays randomly, and then output the sorted arrays. The reference code (PHP) is as follows:

Copy the codeThe code is as follows:

 
// Use array to store ad list
$ads = array('<a href="#"><img src="" alt="Advertisement 1" width="125" height="125" /></a>'
,'<a href="#"><img src="" alt="Advertisement 2" width="125" height="125" /></a>'
,'<a href="#"><img src="" alt="Advertisement 3" width="125" height="125" /></a>'
,'<a href="#"><img src="" alt="Advertisement 4" width="125" height="125" /></a>'
); 

// Randomly sort the array
shuffle($ads); 

// Output a sorted array
$html = ''; 
foreach ($ads as $ad) { 
$html .= $ad; 
} 
echo $html; 

Let’s expand. If I am a webmaster and have reserved 4 ad slots, but now only 3 are serving; I want to place an "empty position" ad rental link in the vacant ad slot and display it at the end. What should I do? Just insert the ad rental link after the sorting is completed.

Copy the codeThe code is as follows:

 
// Use array to store ad list
$ads = array('<a href="#"><img src="" alt="Advertisement 1" width="125" height="125" /></a>'
,'<a href="#"><img src="" alt="Advertisement 2" width="125" height="125" /></a>'
,'<a href="#"><img src="" alt="Advertisement 3" width="125" height="125" /></a>'
); 

// Randomly sort the array
shuffle($ads); 

// Output a sorted array
$html = ''; 
foreach ($ads as $ad) { 
$html .= $ad; 
} 

// Add ad rental link
$html .= '<a href="#"><img src="" alt="Virtual position to wait" width="125" height="125" /></a>';
echo $html; 

I used this method to output 125x125 ads because it is intuitive and reliable and easy to handle. However, if you want to static the page, it is recommended to use JS random sorting method.

Processing on the front end
Output in the original sequence on the backend, and reorder the page through JavaScript. Assume that the HTML fragment of the page outputs the advertisement area is as follows.

Copy the codeThe code is as follows:

 
<div > 
<a href="#"><img src="" alt="Advertisement 1" width="125" height="125" /></a>
<a href="#"><img src="" alt="Advertisement 2" width="125" height="125" /></a>
<a href="#"><img src="" alt="Advertising 3" width="125" height="125" /></a>
<a href="#"><img src="" alt="Advertising 4" width="125" height="125" /></a>
</div> 

We can reorder ads through JS. The reference code is as follows:

Copy the codeThe code is as follows:

 
<div  style="display:none;"> 
<a href="#"><img src="" alt="Advertisement 1" width="125" height="125" /></a>
<a href="#"><img src="" alt="Advertisement 2" width="125" height="125" /></a>
<a href="#"><img src="" alt="Advertising 3" width="125" height="125" /></a>
<a href="#"><img src="" alt="Advertising 4" width="125" height="125" /></a>
</div> 
<div  style="display:none;"> 
</div> 

<script type="text/javascript"> 
//<![CDATA[ 

var source = ('ads'); 
var target = ('random-ads'); 
var ads = ('a'); 

// Subscript array
var arr = new Array(); 
for(var i=0; i<; i++) { 
arr[i] = i; 
} 

// Random sorting
function randomSort(a, b){ 
var tmp = parseInt((() + 0.5), 10); 
return tmp ? a-b : b-a; 
} 

// Randomly insert nodes in the old advertising area into the new advertising area
(randomSort); 
for(var i=0; i<; i++) { 
(ads[arr[i]].cloneNode(true)); 
} 

// Show new ad area and remove old ad area
(source); 
 = 'block'; 

//]]> 
</script> 

If there is an expansion requirement like Method 1, display the empty ad space at the end and display the ad rental link, what should I do? This is used as an after-class exercise...