Zufällige Anzeigenpositionen

Wenn Sie mehrere Display-Anzeigen gleicher Größe in einem Block auf Ihrer Website haben, ist es ratsam, ihre Position im Block zu randomisieren. Dies ist fairer für die Werbetreibenden und die unterschiedlichen Layouts reduzieren die Anzeigenblindheit. Die Anzeigen, die derzeit auf dieser Website von BuySellAds geschaltet werden, tun dies automatisch, aber wenn Sie ein eigenes manuelles System haben, hier sind drei verschiedene Möglichkeiten zur Randomisierung.

Demo anzeigen   Dateien herunterladen

Methode #1) Randomisieren mit PHP, zufälliger Startbild

Ich denke, die Randomisierung serverseitig ist ideal, damit die Anzeigen bereits beim Laden der Seite randomisiert sind. Meine erste Idee war, eine Zufallszahl zwischen eins und der Gesamtzahl der Anzeigen zu generieren. Dann zwei For-Schleifen laufen lassen, eine von 1 bis zu dieser Zufallszahl und eine von dieser Zufallszahl bis zur Gesamtzahl.

<?php
      $totalImages = 6;
      
      $randomFirst = rand(1,$totalImages);
      
      for ( $i=$randomFirst; $i <= $totalImages; $i++ ) {
          echo "<img src='images/ad-$i.png' alt='ad' /> ";
      }
      
      for ( $i=1; $i < $randomFirst; $i++ ) {
          echo "<img src='images/ad-$i.png' alt='ad' /> ";
      }
?>

Funktioniert gut, ist aber nicht so zufällig, wie es sein könnte. Nur die Startanzeige ist zufällig, aber die Reihenfolge ist immer die gleiche.

Methode #2) Randomisieren mit PHP, zufällige Reihenfolge

Um zufälliger zu werden, hat PHP eine eingebaute Funktion zum Randomisieren eines Arrays. Erstellen Sie also einfach das Array mit der `range`-Funktion von 1 bis zur Gesamtzahl der Anzeigen, randomisieren Sie es und geben Sie es dann mit einer `foreach`-Schleife aus.

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

Methode #3) Randomisieren mit jQuery

Dies ist weniger ideal, da die Bilder möglicherweise geladen werden und dann das JavaScript ausgeführt wird und sie neu anordnet (awkward). Obwohl die Randomisierung bei DOM-Bereitschaft erfolgt, sollte sie theoretisch vor dem Laden der Bilder geschehen. Dies wäre am nützlichsten, wenn Sie JavaScript auf der Seite steuern KÖNNEN, aber NICHT die HTML-Struktur.

Die Methode hier besteht darin, jQuery zu laden und das Shuffle-Plugin von James Padolsey zu laden, dann die Bilder anzusprechen und die Funktion aufzurufen.

(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();

});

 

Irgendwelche anderen Randomisierungsmethoden da draußen?