Insertion Before, Inside or After any HTML element

Insertion positions Before, Inside and After HTML element can be used to insert any code anywhere on the page. Ad Inserter supports client-side and server-side insertion. Client-side insertion uses Javascript code to insert code block during or after the page is loaded in the browser, while server-side insertion means insertion when the plugin is called and the page is created. However, server-side insertion requires enabled output buffering (tab ⚙ / tab General).

If you need to insert before or after specific HTML tag (for example, h2) inside post or static page content you can also use insertion before/after paragraph and configure paragraph counting for this specific tag. This approach will give you more control over insertion positions.

Check How Ad Inserter works to understand how ads are displayed and how code is inserted.

Check glossary for terms used here.

Check How to insert ads at specific position for some practical examples of CSS selectors.

Client-side insertion can’t be used on AMP pages as Javascript code is not allowed on AMP pages. You should use Server-side insertion.

Server-side insertion at HTML elements is done after the page is generated and output buffer is processed. Javascript code for client-side insertion is normally inserted in the footer and runs as soon as the page is loaded and the DOM is ready. Of course, configured insertion delays are taken into account. To insert at HTML elements at some later stage configure wait for HTML element to define the element that appears only when the insertion shoud be triggered.

HTML element(s)

Here you define CSS selector (or comma separated list of selectors) of the HTML element(s) where you want to insert the code block (#id, .class). To get right CSS selector you can use web inspector in the browser or built-in HTML Element Selection tool. To open it click on the small button before the field.

In most cases the initial selector of most elements will be the complete path of that element which will be valid only on the page where you have selected that element.

This is because most posts or pages contain element IDs (#id) that are unique to this post or page. You need to edit and shorten the selector to be universal and still valid for all wanted posts or pages. Try to make the selector universal and as short as possible.

Of course, not all IDs are wrong or unwanted – you need to know what ID means and where it is used. To check your selector on different pages simply navigate the website to see if the right element is selected on all wanted posts or pages.

Insertion

Client-side insertion inserts the code using Javascript in the browser after the page is loaded and DOM is ready (all page elements are available). However, it can’t work on AMP pages as Javascript code is not allowed there.

Server-side insertion is the best approach, however, it requires output buffering which is by default disabled as it may not work with all themes. To enable it go to plugin settings (tab ⚙ / tab General) and set Output buffering to enabled. After you save settings you will be able to select server-side for insertion before/after HTML element. For server-side insertion you can use most common CSS selectors (pseudo selectors like :nth-of-type(n) can’t be used, the same applies to jQuery pseudo selector :eq(n)).

Code position: Page position where the HTML code used for client-side insertion will be inserted. In most cases this is not important – footer is the best place for such code.

Client-side insertion needs error-free Javascript page – in case of issues check browser’s console for errors or messages.

Filter and Max insertions setting can work only server-side – when the page is created and Ad Inserter is called. Therefore, if you would like to use filter or define max insertions with insertion Before/After HTML element you need to use server-side insertion. If you are using client-side insertion you need to specify valid CSS selector that will limit your insertions.

Insertion Before, Inside or After HTML element may have undesired effects when using with Ajax calls (infinite scroll). Use other server-side insertions instead.

Insertion inside HTML element

When you select automatic insertion Inside HTML element additional setting becomes visible: Action. This action defines how the code block is inserted (or HTML element replaced):

• Prepend content – the block is added as the first child inside target element
• Append content – the block is added as the last child inside target element
• Replace content – the block replaces the content inside target element – if the block is empty it will clear the content of the target element
• Replace element – the block replaces the target element – if the block is empty it will remove the target element from the DOM

<before-element>
<element>
  <inside-element-prepend>
  <first-child>
  <second-child>
  <third-child>
  <fourth-child>
  <...>
  <last-child>
  <inside-element-append>
</element>
<after-element>

When you are inserting HTML tags inside HTML element make sure you set Alignment and Style to No wrapping to prevent inserting <div> wrapper around the code (tag) you are inserting. This way you can, for example, insert <li> element inside <ul>.

Waiting for an HTML element to be loaded

Sometimes the element where you would like to insert is not available immediately after the page is loaded. For example, comments loaded using Ajax requests, posts loaded in infinite scroll, or any other content loaded asynchronously. In such cases you can wait for an element to be loaded. This can be a different HTML element than the one where the insertion will take place:

Make sure you select an element that is loaded only once. Otherwise you may get multiple insertions – one for each element found.

Delaying insertion

Optionally you can delay insertion Before/After/Inside HTML element. This setting is independent of other settings.