Posiciones de anuncios aleatorias | Programar Plus

Si tiene varios anuncios gráficos del mismo tamaño en un bloque en su sitio, lo mejor que puede hacer es aleatorizar su posición en el bloque. Es más justo para los anunciantes y los diferentes diseños reducen la ceguera de los anuncios. Los anuncios actualmente en este sitio de BuySellAds hacen esto automáticamente, pero si tiene su propio sistema manual, aquí hay tres formas diferentes de aleatorizar.

Ver demostración Descargar archivos

Técnica n. ° 1) Aleatorizar con PHP, imagen inicial aleatoria

Creo que hacer el lado del servidor de aleatorización es ideal para que los anuncios ya estén aleatorizados cuando se carga la página. Mi primera idea fue generar un número aleatorio entre uno y el número total de anuncios. Luego ejecute 2 bucles for, uno desde 1 hasta ese número aleatorio y otro desde ese número aleatorio hasta el total.

<?php
      $totalImages = 6;
      
      $randomFirst = rand(1,$totalImages);
      
      for ( $i=$randomFirst; $i <= $totalImages; $i++ ) {
          echo "<img src="https://css-tricks.com/random-ad-positions/images/ad-$i.png" alt="ad" /> ";
      }
      
      for ( $i=1; $i < $randomFirst; $i++ ) {
          echo "<img src="https://css-tricks.com/random-ad-positions/images/ad-$i.png" alt="ad" /> ";
      }
?>

Funciona bien, pero no es tan aleatorio como podría ser. Solo el anuncio inicial es aleatorio, pero el orden es siempre el mismo.

Técnica # 2) Aleatorizar con PHP, orden aleatorio

Para ser más aleatorio, PHP tiene una función incorporada para aleatorizar una matriz. Así que simplemente configure la matriz usando la función de rango desde 1 hasta el número total de anuncios, aleatorice y luego escúpelo con un bucle foreach:

<?php
      $totalImages = 6;
      
      $all = range(1,$totalImages);
      shuffle($all);
      
      foreach ($all as $single) {
          echo "<img src="https://css-tricks.com/random-ad-positions/images/ad-$single.png" alt="ad" /> ";
      }
?>

Técnica n. ° 3) Aleatorizar con jQuery

Esto es menos ideal debido a la posibilidad de que las imágenes se carguen y luego JavaScript se active y las mezcle (incómodo). Aunque, la aleatorización ocurre en DOM listo, por lo que teóricamente debería ocurrir antes de que se carguen las imágenes. Esto sería más útil cuando PUEDE controlar JavaScript en la página pero NO controlar el HTML.

La técnica aquí es cargar jQuery y cargar el complemento aleatorio de James Padolsey, luego solo apuntar a las imágenes y llamar a la función:

(function($){
 
    $.fn.shuffle = function() {
 
        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
           });
 
        this.each(function(i){
            $(this).replaceWith($(shuffled[i]));
        });
 
        return $(shuffled);
 
    };
 
})(jQuery);

$(function() {

    $("#ad-group-one img").shuffle();

});

¿Alguna otra técnica de aleatorización por ahí?