How To use the Banner-Plugin AdRotate together with W3 Total Cache’s Page-Cache (W3TC)

W3 Total Cache is one of many plugins out there to speed up your wordpress website.
Due to the “Page Cache” no PHP, WordPress oder MySQL is needed…all documents are “pre-compiled” and ready to be served to the user. This increases the speed of a “page-cache-driven” website dramatically. Great feature.

If you ever wanted to use the AdRotate Plugin together with a caching plugin like W3TC you will notice that all ads will stop rotating after turning on this “Page Cache”. AdRotate inserts your ads directly and statically into the documents via PHP and not via JavaScript.
Even if W3 Total Cache offers solutions using “fragmented caching” (all shown examples didn’t work well with AdRotate), the developers of AdRotate told us quite clearly: Adrotate doesn’t work with caching Plugins!

Important advice concerning Ad Impressions: On every page load, every ad banner will be loaded, even if just one banner at once appears on the screen. The consequence is that ad impression statistic isn’t useful anymore (if you’re interested in ad impression statistics, you have to switch to another solution)

The problem: Page Cache creates static documents and all AdRotate Ads will stop rotating.

The solution: We have to manipulate the AdRotate-Output via Javascript to get all ads rotating even with active W3TC Page Cache.

Our tool: JQUERY Cycle! Let’s go…

1. Integrate JQUERY-Cycle-Plugin via “functions.php”

Put this code directly in your theme’s “functions.php” file.

2. Allow PHP directly in static WordPress-Text-Widgets

Put also this piece of code in your “functions.php” file to allow the execution of PHP directly in static Text-Widgets

3. Create a simple Text-Widget within WordPress

Just create a simple text widget. the pre-installed widgets of AdRotate can’t be used for this purpose, because just one image will be shown. We need all banners at once.
IMPORTANT: We use a DIV-Wrapper around our banners/ads with a CSS-class! This is important for our cycle/javascript later (and to assign fixed sizes to your DIV later). A class is better than a static ID, so you can create as many banner-zones as you like.

Now we have to write the output via PHP’s “echo” directly into our Text-Widget. For our example we chose 3 rotating ads. For sure you can extend our example to show as many banners as you like (don’t forget to assign the correct ID’s of your ads – you will find them directly in your AdRotate Panel).

Save your text widget!

4. Load Javascript on page load

Just put this piece of code in your “header.php” (so that this javascript will be loaded directly in the “head”-section of your site). You will notice our CSS-class “ad_cycle”. Thanks to this class, we just need one JS-function to reach our goal.

Concerning “timeout” and “random”: Type in “0” to let ads rotate on page refresh (random). Type in a higher value (milliseconds) to define the rotation-speed of your ads. Random “1” has to be set to activate random display. This is important for balanced “ad impressions”.

Now your ads should rotate! We suggest to define fixed width and height values for your ad-zones via CSS (depending on your banner sizes) so that on page load nothing “jumps around”.

5. Turn on W3 Total Cache’s Page-Cache and you get: A faster website with rotating ads!

Magic! All ads and banners should rotate and due to the activated page-cache your website should load much faster. Great performance, combined with rotating AdRotate-Banner-Ads…that’s all folks…

Please leave a comment if you found my solution useful :-)

avatar

Über Gino Cremer

Gino Cremer ist Geschäftsführer der auf Weblösungen spezialisierten Agentur Pixelbar aus dem belgischen Eupen. Er hat langjährige Erfahrung mit CMS-basierten Kundenprojekten, vornehmlich auf WordPress-Basis, und ist ein Webdesigner der ersten Stunde. Zum aktuellen Zeitpunkt arbeitet Gino Cremer zudem als Dozent und Berater am WIFI Wien im Bereich Social Media und Webdesign.

Alle Artikel von Gino Cremer

banner_praxisbuch
14 Kommentare
    • avatar Gino Cremer sagt:

      Hello Efrain. You don’t need any plugin at all. Just use the default textwidget already integrated in WordPress (to be 100% correct I had to write “use” instead of “create”). By using the short code-snippet you just “extend” the default widget to execute PHP :) But perhaps I misunderstood your question…

    • avatar Gino Cremer sagt:

      Hi Dave. Surely Not! You can put the given Content of the text Widget (the DIV and the php code) in a Template of your choice (e.g. The footer.php) or you can simply put the text widget in a footer sidebar.

    • avatar Gino Cremer sagt:

      You COULD. I haven’t tested it yet. In your text-widget just replace adrotate_ad(X) with adrotate_group(X). Don’t forget to assign the group ID.
      I think it doesn’t really work and a random ad of the assigned group will be cached and always shown. But give it a try and tell us your results, that would be nice!

      • avatar JP sagt:

        I think you are correct. It will only work with adrotate_ad(X).

        Is there a way I can somehow embed this directly into PHP? I need to use it in my header.

        • avatar Gino Cremer sagt:

          Hi JP. This is even easier, because you can skip step 2 + 3. Just take the code snippet of step 3 (with the DIV and the PHP Output) and put it in your template file. In most cases this will be your header.php file. In your WordPress template files you can add PHP-code directly. The advantage of working with widgets is that you can still work over the backend. Including your banner “hardcoded” in your template isn’t quite as flexible…

          • avatar JP sagt:

            That’s what I thought from looking at the other posts, just wanted to verify though.

            Just for interest sake, how does it not use the standard function for this?

          • avatar Gino Cremer sagt:

            Hey JP. You mean the default AdRotate-widgets? It sounds complicated, but I give a try: If you would “sacrifice” a sidebar just for your ads it would work. The problem is that you need a wrapper-div around your ads for JQUERY-Cycle. So, if you create one AdRotate sidebar-widget for every ad, you have to use the sidebar-div itself as a wrapper-div (’cause there’s no other way to “pack” your ads in a container). My solutions is meant to work in every case (and with other widgets in your sidebars).

    • avatar kyp sagt:

      Thank you Gino for this, I ‘ve used it with timeout.

      To answer the question of JP, you need to use a block (that contains a group that contain ads), and it will output all ads!.

      You just need to CSS override the large dimensions that the block will have by default.

  1. avatar Roosh sagt:

    Problem with this is that when one ad loans, all ads count as an impression, grossly inflating impression stats for everything.

Hinterlasse eine Antwort

Deine Email-Adresse wird niemals veröffentlicht. Pflichtfelder sind mit * gekennzeichnet.

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>