Press enter to see results or esc to cancel.

Ad Rotation

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

Ad Inserter supports also timed rotation – for each option you can define rotation time. When at least one option has defined time, the plugin will generate client-side code (using CSS / Javascript code) that will show or insert one option for the time specified. If an option has no time defined the rotation will stop there. If you set time to 0 then this option will be skipped. When you define also share values for timed rotation, share values will be used only for the initial display of the first chosen option.

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.

Rotation Editor

There is an easier way to create code for rotation. Use rotation editor available on the code tools toolbar.

ad inserter rotation editor

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 at least one option has defined time, the plugin will generate client-side code (using CSS / javascript code) that will show one option for the time specified. If an option has no time defined the rotation will stop there. If you set time to 0 then this option will be skipped. When you define also share values for timed rotation, share values will be used only for the initial display of the first chosen option.

ad inserter 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.

ad inserter rotation code

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.

Ad rotation and caching

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.

For ad rotation to work with caching you need to set Dynamic blocks (tab  / tab General) to client-side (code executed in the visitor’s browser). Ad Inserter supports two client-side methods for dynamic blocks: Client-side show and Client-side insert. Both generate CSS / Javascript code to run in the browser. Client-side show uses CSS to hide unwanted code while Client-side insert uses Javascript to insert the code when needed (after the page is loaded).

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.

Some ad codes use old JavaScript method 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
  • Client-side show method reserves space for code block based on the height of the first block version. If all the versions have the same height then you won’t notice anything. However, if block versions have different heights then it makes sense to define fixed block height with Custom CSS to avoid content jumping when block option with different or initially unknown height is displayed. If the first option is some Javascript based ad (e.g. Amazon widget) you should wrap it with a div and define height, for example <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.