Listed below are several practical examples of Ad-rotator.js. All code snippets are live, meaning that you are free to make any changes which will be reflected in the result tab.
This example lists almost every available config option set to its default value.
See the Pen Ad-rotator.js with Default Config by Niket Pathak (@niketpathak) on CodePen.
The Ad-dimensions have been set via CSS.
This example uses a leaderboard Ad size (i.e. height: 90px, width: 728px) which is set via CSS.
Since this ad would be cut-off on a mobile device given its long width,
we set the config option target: "desktop" so that this Ad would be visible only on a desktop
and hidden on a mobile device.
See the Pen Device specific Ad-rotation by Niket Pathak (@niketpathak) on CodePen.
Note: Ads have been assigned weights to increase their priority and thereby their chances of being shown first.
However since it is randomized, only their chances are increased but there is no guarantee of it being shown first.
To sort Ads by their weight (highest to lowest), set random: false.
Ads with missing weights are automatically assigned a weight of 1.
There are 3 hooks available -
cb() - This hook is executed after each rotation.
onHover() - This hook is executed on hovering an Ad.
onClick()- This hook is executed on clicking an Ad.
See the Pen Ad-rotation with Hooks by Niket Pathak (@niketpathak) on CodePen.
The above example also demonstrates usage of sidebar Ad dimensions. If you open up your developer tools, you should see console log messages when you hover an Ad and also when each Ad gets rotated. If you click on any Ad, you should see an alert before being redirected to the destination URL.
When FallbackMode is activated,
Ads are shown only if the library detects an Adblocker.
This is specially useful if you wish to display Ads from another provider like Google, Amazon, Carbon, etc. and want to use Ad-rotator.js only as a fallback solution.
See the Pen Ad-rotator.js in Fallback mode by Niket Pathak (@niketpathak) on CodePen.
If there is an active adblocker, you should see Ads displayed by the library, otherwise you will see some text content.
The sticky config option is used render an
Ad sticky on the screen. Its working is best explained with a live example -
See the Pen Ad-rotator.js with sticky config by Niket Pathak (@niketpathak) on CodePen.
To remove stickiness, set sticky: null. Note that we have set noMobile: true which means that this
Ad will not be sticky on a mobile device. Checkout the sticky config option to see how to customize further.