Frisch notiert!
Die neusten Artikel aus unserem Blog.

Das WordPress Banner-Plugin AdRotate gemeinsam mit W3 Total Cache nutzen (W3TC Page-Cache)

von Gino Cremer / Zuletzt aktualisiert am 18/08/2016 / Wordpress / 12

W3 Total Cache ist eines von vielen Caching-Plugins für WordPress. Ob man nun Cachify, SuperCache oder sonstwas nutzt. Das Prinzip ist immer gleich, ebenso das Ziel (mehr Geschwindigkeit). Möchte man nun Banner zu Werbezwecken einsetzen, sollte man möglichst auf eine Einbindung via Javascript wert legen (z.B. für AdSense). Dadurch kann weiterhin der so genannte „Page Cache“ aktiviert werden und die Banner rotieren dennoch wie gewünscht (und die Seite lädt dank Page Cache rasant). Das AdRotate-Plugin ist sehr populär, einfach zu nutzen und beherrscht viele wichtige Features. Haken: AdRotate integriert Banner via PHP. Javascript Fehlanzeige. Wir erklären wie man dennoch AdRotate gemeinsam mit Caching-Plugins nutzen kann. Zauberwort: JQUERY Cycle.

Was ist dieser „Page Cache“? Warum gibt es diese Probleme mit AdRotate?

Der so genannte „Page Cache“ ist der wohl performanteste Cache. Er legt statische Abbilder der einzelnen Seiten ab. Ruft ein Besucher nun eine Seite auf, wird weder PHP, noch SQL oder WordPress konsultiert. Die Seite wird direkt an den Besucher ausgeliefert. Das schont nicht nur wertvolle Ressourcen und die Nerven der Besucher, sondern erhöht dramatisch die Geschwindigkeit einer Website.

Da AdRotate Banner via PHP einbindet, ist das Problem vorhersehbar. Der erste Banner der „per Zufall“ in den Page Cache gespeichert wird, verweilt dort so lange bis eine Änderung an dem entsprechenden Dokument durchgeführt wird und der Cache geleert wird.

Das Problem: Page Cache legt statische Seiten an und AdRotate-Banner hören auf zu rotieren

Die Lösung: Die Ausgabe von AdRotate muss via Javascript (JQUERY-Plugin Cycle) manipuliert werden, damit der „Random“ (Zufallsgenerator) weiterhin greift.

In wenigen Schritten gelangen wir zum Ziel:

1. JQUERY-Plugin Cycle via functions.php einbinden

In einem weiteren Blogartikel haben wir erläutert wie man über die WordPress „functions.php“ externe Javascript-Dateien hinzufügt. Wir fügen das JQUERY-Cycle-Plugin hinzu:

https://gist.github.com/ginocremer/9364280

2. Das WordPress Text-Widget „PHP-Kompatibel“ machen und AdRotate Widget integrieren

Folgender Code-Schnipsel gehört ebenfalls in die „functions.php“, dadurch ist es uns möglich PHP direkt innerhalb des Text-Widgets von WordPress ausführen zu lassen.

https://gist.github.com/ginocremer/9364291

Nun legen wir in den Widget-Einstellungen ein neues Text-Widget an (das AdRotate-eigene Widget ist für unsere Zwecke nicht brauchbar, da es nicht alle Banner gleichzeitig ausgibt). Wichtig: Um später per CSS genauer Einfluss nehmen zu können, setzen wir die Banner in einen DIV mit einer eigenen Klasse! Wir wählen bewusst eine CSS-Klasse und keine feste ID, damit mehrere Bannerzonen auf der Website möglich sind. Nun müssen die Ads/Banner einzeln per Echo ausgegeben werden. Besteht eine gewünschte Ausgabe beispielsweise aus drei Bannern, würde der einzufügende Code so aussehen (die IDs der einzelnen Banner müssen natürlich hinzugefügt werden und befinden sich in der Banner-Übersicht von AdRotate):

Widget speichern!

3. Das Javascript aufrufen und die CSS-Klasse im Javascript ansprechen

Folgender Javascript-Code muss einfach in die „header.php“ eingefügt werden im „Head“-Bereich der Website (kann auch via functions.php eingefügt werden). Hauptsache die Zeilen werden beim Laden der Seite ausgeführt. Die CSS-Klasse des umspannenden DIV-Elementes hatten wir ja vorhin mit „ad_cycle“ definiert. Diese muss natürlich ergänzt werden.

Tipp: Setzt man „0“ beim Timeout und gleichzeitig „1“ bei Random, wird beim Neuladen der Seite nach dem Zufallsprinzip ein anderer Banner angezeigt. Wird der Timeout-Wert (Angabe in Millisekunden) erhöht, erhält man dynamisch wechselnde Banner (6000 entspricht zum Beispiel 6 Sekunden, ehe der nächste Banner angezeigt wird). Der Random-Wert 1 ist übrigens sehr wichtig, um ausgewogene „Ad Impressions“ zu erreichen. Setzt man dort eine „0“, wird immer die gleiche Reihenfolge ausgegeben.

Nun sollten die ausgegebenen Banner rotieren. Wir empfehlen übrigens dem entsprechenden DIV via CSS eine feste Breite und eine feste Höhe zuzuweisen (entsprechend der Bannergröße)! Nur so ist beim Laden der Seite ein „Springen“ zu verhindern. Mit der definierten CSS-Klasse kann man das bewerkstelligen..

4. Page-Cache aktivieren. Fertig!

Nach Aktivierung des Page-Caches sollten die Banner rotieren und die Seite bedeutend rasanter laden.

Konnte Euch dieser Tipp helfen? Ich freue mich auf euren Kommentar, Anregungen und natürlich Rückverlinkungen…


Gino Cremer

Ich bin Geschäftsführer der auf Weblösungen spezialisierten Agentur Pixelbar aus dem belgischen Eupen.

Ich habe langjährige Erfahrung mit CMS-basierten Kundenprojekten, vornehmlich auf WordPress-Basis und bin ein Webdesigner der ersten Stunde.

Daneben arbeite ich auch als Dozent und Berater am WIFI Wien im Bereich Social Media und Webdesign.

Weitere Beiträge von gino anzeigen

12 Kommentare

  1. Hallo, ich stelle mich wahrscheinlich an wie der grösste Trottel, trotzdem muss ich fragen: ich möchte gerne auf meiner WordPress Seite ein Banner mit Zufallsgenerator einbauen, wobei beim Klick aufs Banner-Bild eine von 4 ausgewählten Webseiten zufällig angesteuert wird. Kann mir jemand einen Tipp geben wie das funktioniert?

  2. Hallo Gino,
    Fehlt unter dem Punkt 3. nicht eigentlich noch der beispielhafte javacode,der eingebunden wird, damit auch absolute programmierneulinge die Anleitung nutzen könnten?
    Könntest du hier die Anleitung nicht noch durch ein paar Screenshots erweitern? Das wäre klasse.
    Adrotate hat einen eigenen artikel zum den w3 total Einstellungen erstellt. Folgt man dieser rotieren die Banner trotzdem nicht.

    Gruß und danke
    Daniel

    • Hallo Daniel, ich muss leider zugeben, dass wir uns mittlerweile gänzlich von W3 Total Cache distanziert haben. Das Plugin wurde über ein Jahr gar nicht mehr aktualisiert und als sogar Sicherheitslücken bekannt wurden, wurden diese erst nach massivem Druck von Außen gefixt (Quelle: https://www.wp-wartung24.de/w3-total-cache-mit-xss-sicherheitsluecke/). Wir empfehlen Alternativ-Lösungen für das Caching wie „Cachify“. Das Einblenden der Banner wird idealerweise via Javascript bewerkstelligt, dann lässt sich alles prima cachen. Entschuldige, dass ich soweit keine besseren Neuigkeiten habe. Viele Grüße, Gino

      • Also die Rotation von Gruppen trotz Caching habe ich mit AdRotate noch hingekriegt, aber spätestens bei userspezifischen Anzeigebedingungen (z.B. Bildschirmbreite) hörte das dann auf. Ich bin inzwischen nicht zuletzt wegen des simplen aber effektiven Cache Bustings auf Advanced Ads (wordpress.org/plugins/advanced-ads/ ) als Anzeigenplugin umgestiegen. Damit liefen dann alle Features trotz Caching reibungslos. Mittlerweile habe ich W3TC deinstalliert und mir eine Lizenz für das kostenpflichtige WP Rocket gekauft. Eine Entscheidung, die ich aufgrund des guten Ergebnisses ohne umfangreiches Konfigurieren nicht bereue.

          • Danke…teste ich aus.
            Mit advance ads bin ich mehr als begeistert! Danke für dem tipps. Mit Cache läuft aber nur die pro version richtig?
            Werde cachify und rocket mal testen.danke

          • Genau, das Cache Busting gibt es nur in der Pro-Version. Ich hatte noch die Add-ons Tracking und Responsive im Auge und habe mich dann aus Kostengründen für das Bundle entschieden, weil das insgesamt nur 1$ teurer war, aber mit allen Add-ons ausgestattet ist. Zudem hat man immer auch sofort Zugriff auf neue Add-ons wie die gerade veröffentlichte Sellings-Ads-Erweiterung, mit der man zusammen mit WooCommerce einen Shop für Anzeigenplätze bauen kann.
            WP Rocket hat mich auch glücklich gemacht und der Support hat schnell und kompetent auf meine Nachfragen reagiert.

Hinterlasse eine Antwort

Contact us!