If more than one advertiser wants the same spot on your website, you need to rotate banner ads: show a different banner on each page view instead of the same one every time. There are three practical ways to do it. This guide explains each, with working code for the simplest.
Method 1: A simple JavaScript rotator
For a handful of your own banners, a few lines of JavaScript is enough. This example picks one banner at random each time the page loads. Paste it where the ad should appear and replace the image and link addresses with your own.
<a id="rotating-banner" href="#">
<img id="rotating-banner-img" width="728" height="90" alt="">
</a>
<script>
var banners = [
{ src: "/ads/banner-a.jpg", url: "https://example.com/a", alt: "Advertiser A" },
{ src: "/ads/banner-b.jpg", url: "https://example.com/b", alt: "Advertiser B" }
];
var pick = banners[Math.floor(Math.random() * banners.length)];
var img = document.getElementById("rotating-banner-img");
img.src = pick.src;
img.alt = pick.alt;
document.getElementById("rotating-banner").href = pick.url;
</script>Limits: there are no weights, no start and end dates, no impression limits and no reports, so you cannot tell an advertiser how their banner performed. Cached pages can show the same banner to many visitors, and ad blockers may hide the ads.
Method 2: A WordPress plugin
If your site runs on WordPress, a banner rotation plugin adds ads through widgets or shortcodes and stores them in your WordPress database. This is convenient for one site with simple needs. The ads, the statistics and the work of serving each ad all live on your own web host, and the plugin needs to be kept updated. See how this compares with a hosted rotator on our WordPress banner ad rotator page.
Method 3: A hosted banner ad rotator
A hosted rotator such as AdPeeps runs outside your website. You paste one HTML snippet where the ad should appear, add your banners in a dashboard, and the service rotates them, applies your rules and counts impressions and clicks. This works on any website, WordPress or not, and your server does no extra work to serve the ads. Plans start at $5/month, with a 7-day free trial. Read the banner ad rotator overview for the details.
Choosing rotation rules
- Random or in sequence is fine when all banners are equally important.
- Weighted rotation shows higher-paying or higher-priority ads more often. See how to weight ads.
- Dates and impression limits make sure a paid campaign starts, runs and stops when it should.
- Geotargeting lets a local advertiser reach only local visitors. See geotargeting.
Common mistakes when rotating banners
- Mixing sizes in one spot. Rotate banners of the same size in a placement, or the page layout will jump.
- Stacking many ads on top of each other so only the top one is visible. Advertisers dislike this and it can inflate impression counts.
- No reporting. Without impression and click counts you cannot show an advertiser results or justify renewal.
- Forgetting mobile. Use a mobile-friendly size for small screens. See banner ad sizes.
Want to see the whole process from account to first ad? Read how to add ads to your website or start a free 7-day trial.