Random Content mit jQuery für fast beliebigen Inhalt - und ohne Extension

Ziel war es, Benutzer einer Site Werbung zu präsentieren, was ja im legitimen Interesse jedes Side-Owners ist.

ABER die Besucher nicht mit zu viel Werbung, Schnickschnack, KlickiBunti zu vergraulen, denn das kennt ja jeder von sich: Viel ist einfach zuviel.
Vor allem, nicht wie drangepappt die Anzeigen immer an der gleichen Selle und bei je-dem Neuladen!

Wer TYPO3 nutzt, kennt ja bestimmt die geniale GH Random Content (gh_randomcontent)-Extension von Gregor Hermens. Diese läuft auch auf unseren Projekten.

Neben dem Spaß am Coden wollte ich aber was Einfaches generieren, dass nicht nur unter TYPO3 läuft, sondern überall, wo Webseiten einzelne Content-Elemente mit einer eigenen ID ausrollen - also wahrscheinlich auf jedem bekannten CMS - und das klappt selbst bei plain HTML, wenn man will.

Math.floor(Math.random() * 5) als der erste Ansatz

Mit der Funktion generiert man sich ein paar Zufallszahlen.

Dann werden die Elemente, die eingeblendet werden sollen, auf eine Zahl hin abgefragt, if TRUE wird das Div-Element eingeblendet:

   $("#c12345").hide(); // beim Laden das Inhaltselement verbergen

var randomNum = Math.floor(Math.random() * 5) + 1; // Zufallszahl erzeugen
var roundedNum = Math.round(randomNum); // Runden der Zufallzahl


if (roundedNum === 5 || roundedNum === 3) {
    $("#c12345").show();
  }

So wird das Inhaltselement nur dann angezeigt, wenn es gleich 3 oder 5 ist - sonst bleibt die Anzeige leer!! Das, was wir wollten!

Anzeigen werden ja gerne in Spalten ausgegeben; hat man mit TYPO3 die Spalte über das Template beispielsweise mit colPos = 2 gefüllt, gilt es nun, die gewünschten Content-Elemente auch dort zu platzieren.
Dazu wird einfach ein neues Inhaltselement vom Typ Datensatz angelegt, die gewünschten Anzeigen aus dem (ja wahrscheinlich bereits vorhandenen Ordner) ausgewählt, die IDs notiert - und fertig ist der Bestand an Anzeigen. Ob nun nur eine - oder mehrere.

Die IDs werden dann in das jQuery-Snippet eingetragen.

Um den Anzeigenblock dann noch in der Spalte korrekt zu formatieren, bedienen wir uns in
jQuery bei append & prepend

So wird das Element mit den gängigen Layout-Vorgaben
(in dem Falle der Schriftzug "Anzeige" über - und die horizontale Linie unter dem Content-Element)
automatisch ummantelt - OHNE, dass man im HTML-Template rumpfuschen oder mit weiteren Content-Elementen vom Typ HTML in der Spalte arbeiten muss, um einen Div-Container zu erzeugen.
CMS sind schon eine feine Sache!

Der fertige Codeblock sieht dann so aus:

// jQuery_hide.js

$(document).ready(function() {

  $("#c12345").hide();

  var randomNum = Math.floor(Math.random() * 7) + 1;
  var roundedNum = Math.round(randomNum);


if (roundedNum === 5 || roundedNum === 3) {
    $("#c12345").show();
    $("#c12345").css({
        "margin-bottom" : "3px",
         })
    $('#c12345').append('<hr class="ce-div" />');
    $('#c12345').prepend('<div id="anzeige">Anzeige</div>');
  }

// Um ein weiteres eontent-element hinzuzufügen, ergänzt man einfach den Code um jenes - inkl. einer neuen Abfrage von roundedNum
  
if (roundedNum === 7) {
    $("#c12346").show();
    $("#c12346").css({
        "margin-bottom" : "3px",
         })
    $('#c12346').append('<hr class="ce-div" />');
    $('#c12346').prepend('<div id="anzeige">Anzeige</div>');
  }

  
});

Funktioniert natürlich nicht nur für Werbung: Bilder, Snippets, knows-the-heck kann natürlich ebenfalls verwendet werden, sofern man die IDs direkt ansprechen kann.

Das lässt sich um beliebig viele Inhaltselement erweitern, wobei der Hasenfuß... nein Pferdefuß (:D) natürlich bei Übersichtlichkeit und Tipperei liegt.

Und jedes Element - das ist nicht zu vergessen - wird ja im Hintergrund geladen!, die Besucher sehen es halt nur nicht. Besonders bei Bild-lastigen Inhalten nicht unerheblich.

Aber für 5-10 Elemente, das sollte schon drin sein, kann ja jeder für sich selbst entscheiden.

 

Kontakt - Impressum - Datenschutzerklärung - Startseite