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.
https://gist.github.com/ginocremer/9364280
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
https://gist.github.com/ginocremer/9364291
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…
Step 3 specifies you create a „Text-Widget“, is this any different from creating a simple plug-in?
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…
will this method limit my ad placement to the side bar? Sounds like it will. What if I want the ads to rotate on the bottom of pages?
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.
Are you able to specify a group instead of individual id’s?
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!
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.
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…
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?
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).
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.
Great. Thanks kyp!
Problem with this is that when one ad loans, all ads count as an impression, grossly inflating impression stats for everything.
Roosh, you’re totally right. That’s in fact quite negative. I will adapt the text.
Hello Gino
I am not a specialist in coding .
Could you an exact example of what needs to be done to AdRotate work with W3TC ?
I would be grateful
Gino,
This is brilliant. It took me hours of searching to find this. Any chance of ever getting an update on this? The links to codes don’t work anymore. A lot of people could benefit from this.
Your github links aren’t working for me :(
Ein großartiger Trick, um WordPress mit W3 Total Cache zu beschleunigen und gleichzeitig Anzeigen mit AdRotate und jQuery am Laufen zu halten! PTS Terbaik