Ad rotation is the practice of showing multiple advertisements in a single location on a web page. Ads may be rotated with each new page load, timed rotation within a single page load, or both. Because the ads are placed in the same location, they are typically the same format.
To rotate different ad versions separate them with
[ADINSERTER ROTATE] – Ad Inserter will randomly select one of the ad versions. For example, to rotate 3 different images you can use the following code:
<img style='height: 400px;' src="http://malsup.github.io/images/p1.jpg"> [ADINSERTER ROTATE] <img style='height: 400px;' src="http://malsup.github.io/images/p2.jpg"> [ADINSERTER ROTATE] <img style='height: 400px;' src="http://malsup.github.io/images/p3.jpg">
Previous versions of the plugin used the
|rotate| separator for rotation. This separator will continue to work.
Please check also section Rotation Editor below – Ad Inserter has a built-in code editor that can be used to easily create or edit ad rotation code.
If you are using caching ad rotation by default may not work as expected. Server-side rotation works only when the page is generated and Ad Inserter is called. In such cases please make sure you use client-side rotation – but you need to be aware of how it works. Please check section Ad rotation and caching below for details.
You can also specify rotation share (percentage) for each option. Either use rotation code generator and define shares in percents or create code using
[ADINSERTER ROTATE share="percentage"] separator with attribute share where you define percentage of the rotation share:
[ADINSERTER ROTATE share="75"] ad_code_1 [ADINSERTER ROTATE share="25"] ad_code_2
If you omit one share value it will be automatically calculated:
ad_code_1 [ADINSERTER ROTATE share="25"] ad_code_2
The following code will show ad1 for 30 s and then ad2 for 10 s and then ad1 for 30 s…
[ADINSERTER ROTATE time="30"] ad_code_1 [ADINSERTER ROTATE time="10"] ad_code_2
You can also rotate ads configured in other blocks. In such case enable shortcodes for those blocks and use shortcode separators for rotation. For example, this code will rotate blocks 10, 11 and 12:
[ADINSERTER code="10"] [ADINSERTER ROTATE] [ADINSERTER code="11"] [ADINSERTER ROTATE] [ADINSERTER code="12"]
In this case we have used shortcode
[ADINSERTER code="10"] that will return only pure block code (without wrapping div with alignment CSS code). You can also use shortcode
[ADINSERTER block="10"] that will return code with wrapping div and alignment CSS code. In such case you can rotate between different alignments – just make sure to set alignment of the rotation block to No wrapping.
There is an easier way to create code for rotation. Use rotation editor available on the code tools toolbar.
Rotation editor will AUTOMATICALLY import rotation code from the code window (if present). You can use + and – buttons to add or remove options.
For each option you can specify rotation share (percentage) and rotation time (in seconds).
If you omit one share value it will be automatically calculated. Leave Share field empty for all options to have equal shares of all rotation options.
When rotation editor is active the code window shows ONLY code for the selected option. For each option you can copy / paste code, use code generator or visual HTML editor. Each option can also be named. This name is then used in statistics reports (PRO only) and is displayed when debugging function Label blocks is used.
After importing the code for rotation you can name each option. Please note that when switching rotation options and using code generator you need to import (and generate) code manually for each option.
Once you are happy with the rotation settings click on the rotation editor button and the the plugin will generate rotation code in the code window of the current block. Now you can save settings.
Do not save settings when the rotation editor is active – after you are finished with rotation settings click on the rotation button to generate rotation code with
[ADINSERTER ROTATE] separator.
When you are using caching and visitor visits some page, WordPress creates that page, Ad Inserter is called to do the job, the created page is sent to the visitor and it is also saved for quicker serving later. The next time the page is visited, the visitor gets cached (saved) page. Because of this ad rotation on the server side can not work because Ad Inserter is not called when the page is cached and consequently the same ad is displayed.
Client-side show is fine with banners as they are all loaded and only displayed when needed but some adverts (e.g. AdSense) can’t be used this way – use Client-side insert mode in such case.
document.write which can’t be used asynchronously (after the page is loaded and created). Client-side insert method will not work with such ad codes.
Please note the following:
- Client-side show method works fine with banners, text ads and many ad networks including Amazon Associates. However, it should not be used with some ad networks including AdSense as hiding ad units is not allowed: all options are present on the page but are hidden until the page is loaded and only one option is made visible. In such case you need to use method Client-side insert.
<div style="height: 300px;"> … </div>
- Client-side show method for rotation uses div elements to wrap the code(s) even when you use No wrapping style.
Ad Inserter is perfect for displaying any kind of ads. It can also be used to display various versions of ad, for example AdSense ads using channels to test which format or color combination performs best – but please, for AdSense ads set Dynamic blocks to Client-side insert.