Code Editing

Ad Inserter can be configured to insert any code anywhere on the page. Each code with it's settings is called a code block. Free Ad Inserter supports 16 code blocks, Ad Inserter Pro supports up to 96 code blocks (depending on the license type). The settings page is divided into tabs – 16 code blocks and general plugin settings. Black number means inactive code block (code is not inserted anywhere), red number means block is using automatic insertion, blue number means block is using manual insertion while violet number means block is using automatic and manual insertion.

ad inserter tabs

Each code block has a name, code and settings which are divided into sections. Some settings depend also on automatic insertion used. When you are finished with settings you need to save them by clicking on the button Save Settings.

To show a list of all blocks click on the List button in the header row.

ad inserter header list

This list shows all active code blocks. To show all blocks click on the top left button. To filter blocks enter keywords in the search field. You can also use php, shortcode and widget keywords to filter blocks that have enabled respective functions.

ad inserter block list

Here you can also easily rearrange block order. Click on the Rearrange block order button to enable moving blocks.

ad inserter block rearrangement

Now you can drag and move blocks to create new block order. The position where the block would be moved is highlighted. When you are happy with the order click on the Save Changes button. Click on the Rearrange block order button to cancel changes. When you save new block order this changes also Ad Inserter widget blocks in widget positions and statistics data accordingly.

Please make sure tracking is disabled and cache flushed before you rearrange block order!

ad inserter block order

Block name

To rename code block click on the name for editing.

ad inserter block name

Block code

Ad Inserter provides many simple functions to generate, edit or copy codes for ads. You can simply paste the code you have generated elsewhere, create code for banners or text ads or copy and edit code form other code blocks.

ad inserter code

Simple editor for mobile devices

On mobile devices some functions like text selection, copy and paste may not work with default syntax highlighting editor. In such case enable simple editor to switch to plain text editor.

ad inserter simple editor

PHP code processing

If you have PHP code (surrounded with PHP tags <?php … ?>) in code block, you need to enable PHP code processing.

ad inserter php processing

Code tools

You can simply edit the code in the code window but there are also additional tools to help you creating, editing and copying the code. To show the toolbar click on the Code tools button.

ad inserter code tools 

Code generator

Code generator currently supports code for banners and AdSense. To open code generator click on the code generator button.

ad inserter code generator

Banners

Ad Inserter has a simple code generator for banners. You can select image, optionally define link (web page address that will open when the banner will be clicked) and select whether to open link in a new window.

ad inserter banners 

If you already have a banner HTML code in the code window you can import it by clicking on the import button. A thumbnail will be displayed next to the banner fields.

ad inserter banner import 

Once you are happy with the banner you can generate the code for it by clicking on the generate button. The plugin will generate HTML code for the banner in the code window of the current block.

ad inserter banner generate 

Please note: if you have active rotation editor the code window shows only the code for the currently selected option. Therefore, code generator will in such case import or generate code for the currently selected option.

Code generator for banners and AdSense generates the code only when you click on the button Generate code. It is a tool that can help you to create code for AdSense or banners with links. So if you are using rotation editor and switch between options you need to (optionally) import and generate code for each rotation option.

Placeholders

If you don't have banner image ready yet you can use placeholder images to create ad positions. Ad Inserter has built-in placeholder generator/editor to easily select dummy image of any size or color. Click on the Select Placeholder button to open placeholder editor.

ad inserter placeholder editor

Choose between predefined ad sizes or define custom size. Default placeholders are gray with size as placeholder text but you can use any color or text you want. Click on Edit button to edit placeholder size, color or text. You can also create blank solid color rectangles by clearing placeholder text.

Once you are happy with the placeholder click on the Use button to generate placeholder image url.

AdSense

Ad Inserter has a simple code generator for AdSense ads. Here you can define data needed for the AdSense code. In most cases it will be much easier to simply paste AdSense code into the code window and then import the data from it. Check AdSense Ads implementation guide for details.

This tool is mainly intended to change the type of AdSense ads. But please note: not all conversions are possible: you can convert standard ads to link ads or vice versa, fixed width ads to responsive ads and vice versa and you can enable or disable ads on AMP pages. Once you have the Publisher ID and Ad Slot ID entered (or imported) you can change ad type, responsiveness and ad type for AMP pages.

ad inserter adsense import 

Once you are happy with the settings click on the generate button and the the plugin will generate Javascript code for the AdSense ad in the code window of the current block.

ad inserter adsense geenrate

Rotation Editor

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">

However, 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). In our case it would generate three options: A, B and C. You can use + and - buttons to add or remove options.

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 the first option 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.

ad inserter rotation code

WARNING: If you are using caching ad rotation by default may not work as expected. It works only when the page is generated and Ad Inserter is called. In such cases please make sure you have disabled caching or use client-side rotation - but you need to be aware of how it works. Please check section Caching - Ad rotation for details.

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, in such case use server-side rotation.

Visual HTML editor

Ad Inserter has also standard WordPress visual HTML editor to create or edit image or text ads. The button for it is located on the code tools toolbar.

ad inserter visual editor button

The editor opens in a new window where you can edit the code the same way as you edit WordPress posts and pages. You can insert images and switch between visual editor and source code. There are also three additional buttons:

  • Use Copies current code to the code window and closes visual code editor
  • Reset Resets the code in the editor to the code from the code window in current block settings
  • Cancel Cancels editing and closes visual code editor

ad inserter visual editor

Clipboard

Ad Inserter has internal clipboard which can be used to copy and paste block name, code and settings. The buttons are located on the code tools toolbar.

ad inserter clipboard

Copy button copies current block to the internal clipboard. Once the block is copied the button copy is highlighted.

ad inserter copy 

You can then switch to any of the remaining blocks and paste either block name, code, insertion settings or everything: name, code and settings.

ad inserter paste 

To clear block settings click on the Clear block button.

ad inserter clear 

With buttons in the code tools toolbar you can copy settings from any of 16 displayed code blocks. But you can also copy settings from any other code block. Click on the List button in the header to show the list of all (or only active) blocks. Click small button left of block number to copy block settings to the internal clipboard. Then you can use paste functions to paste name, code, settings or complete block.

ad inserter block list settings

Export/Import (Pro only)

Ad Inserter Pro supports exporting and importing code block settings. This can be used to transfer settings from one website to another. To copy block settings to another block on the same website use Ad Inserter clipboard described above.

Click on the code tools button and then on the export/import button with up/down arrow on the left to open window with saved settings for this block including code – the settings are exported as text - a long string of characters. To copy settings from one block to another copy this text on the source code block, paste it to destination code block import/export window, check Import settings for block and click on the Save settings button. If you leave Import block name checked the import will copy also name from the source block. Similarly you can copy all Ad Inserter Pro settings for all blocks – the import/export button is located on the Settings (tab *).

ad inserter export import