Best Ways Engineers Can Use Selectors To Improve Programmatic Ads

How to Place Programmatic Ads With Selectors

In web development for programmatic ads, selectors are used to identify specific elements on the page so that they can be targeted with styles or manipulated with JavaScript. Selectors can be based on element type, class, or ID.

For example, consider the following HTML code:

<h1 class="main-title">Welcome to my webpage</h1>
<p id="intro">This is the introduction paragraph</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

In this example, you could use the following selectors:

1. h1 to target all h1 elements on the page
2. .main-title to target all elements with the class "main-title"
3. #intro to target the element with the ID "intro"

Selectors are often used in conjunction with CSS stylesheets to apply styles to specific elements on the page. For example, you might use the .main-title selector to apply a specific font size and color to all elements with the "main-title" class.

Selectors can also be used with JavaScript to manipulate elements on the page. For example, you might use a selector to change the text of an element, hide it, or add a new element to the page.

Types of Selectors for programmatic ads

There are many different types of selectors that can be used to target specific elements on a webpage. Some common types of selectors include:

• Universal selectors: These selectors target all elements on a webpage. The universal selector is represented by an asterisk (*). For example, * would target all elements on the page.
• Element type selectors: These selectors target elements based on their type, such as p for paragraph elements, a for anchor elements, or div for division elements.
• Class selectors: These selectors target elements based on their class attribute. To use a class selector, you place a period (.) before the class name. For example, .main-title would target all elements with the class "main-title".
• ID selectors: These selectors target elements based on their ID attribute. To use an ID selector, you place a pound sign (#) before the ID name. For example, #intro would target the element with the ID "intro".
• Attribute selectors: These selectors target elements based on their attributes or attribute values. For example, you could use an attribute selector to target all a elements with a target attribute of _blank, or all input elements with a type attribute of email.
• Pseudo-class selectors: These selectors target elements based on their state or position in the document. For example, you could use the :hover pseudo-class to apply styles to an element when the user's mouse is hovering over it, or the :first-child pseudo-class to apply styles to the first child element of its parent.
• Negation pseudo-class selectors: These selectors allow you to exclude specific elements from a selection. To use a negation pseudo-class selector, you place the :not() pseudo-class and a selector within the parentheses. For example, :not(.warning) would target all elements that do not have the class "warning".
• :empty pseudo-class selectors: These selectors target elements that are empty, meaning they have no children or content. For example, p:empty would target all empty p elements.
• :root pseudo-class selectors: These selectors target the root element of the document, which is usually the html element. For example, :root would target the html element.
• :target pseudo-class selectors: These selectors target the element that corresponds to the current fragment identifier (i.e., the part of the URL after the # symbol) of the document. For example, if the URL of the document is http://example.com/page#section1, the :target pseudo-class would target the element with the ID section1.
• :enabled and :disabled pseudo-class selectors: These selectors target form elements that are enabled or disabled, respectively. For example, input:enabled would target all enabled input elements, while input:disabled would target all disabled input elements.
• :checked pseudo-class selectors: These selectors target form elements that are checked (i.e., selected). For example, input:checked would target all checked input elements.

Selectors can also be combined to create more specific targets. For example, you could use the h1.main-title selector to target h1 elements with the class "main-title", or the #intro a selector to target anchor elements within the element with the ID intro.

Relative Selectors for programmatic advertising

A relative selector is a type of selector that targets elements based on their relation to other elements in the document.

There are several types of relative selectors that can be used to target elements in different ways. Some common types of relative selectors include:

• Descendant selectors: These selectors target elements that are descendants (i.e., children, grandchildren, etc.) of a specific element. To use a descendant selector, you separate the ancestor element and descendant element with a space. For example, #intro p would target all p elements that are descendants of the element with the ID "intro".
• Child selectors: These selectors target elements that are direct children (i.e., immediate descendants) of a specific element. To use a child selector, you separate the parent element and child element with a greater than symbol (>). For example, #intro > p would target all p elements that are direct children of the element with the ID "intro".
• Adjacent sibling selectors: These selectors target elements that are siblings (i.e., elements that have the same parent) of a specific element and immediately follow it. To use an adjacent sibling selector, you separate the two elements with a plus sign (+). For example, h1 + p would target the first p element that immediately follows an h1 element.
• General sibling selectors: These selectors target elements that are siblings of a specific element and follow it, regardless of whether they are immediately adjacent or not. To use a general sibling selector, you separate the two elements with a tilde (~). For example, h1 ~ p would target all p elements that follow an h1 element, regardless of whether they are immediately adjacent or not.
• First-of-type selectors: These selectors target the first element of a specific type within its parent element. For example, li:first-of-type would target the first li element within its parent element.
• Last-of-type selectors: These selectors target the last element of a specific type within its parent element. For example, li:last-of-type would target the last li element within its parent element.
• Only-of-type selectors: These selectors target elements that are the only element of a specific type within their parent element. For example, li:only-of-type would target li elements that are the only li elements within their parent element.
• Nth-of-type selectors: These selectors allow you to target elements based on their position within their parent element. For example, li:nth-of-type(2) would target the second li element within its parent element. You can use various formulas to specify the position, such as 2n+1 to target every odd-numbered element.
• First-child selectors: These selectors target the first child element of a specific element. For example, #intro > :first-child would target the first child element of the element with the ID "intro".
• Last-child selectors: These selectors target the last child element of a specific element. For example, #intro > :last-child would target the last child element of the element with the ID "intro".
• Only-child selectors: These selectors target elements that are the only child element of their parent element. For example, #intro > :only-child would target the only child element of the element with the ID "intro".
• Nth-child selectors: These selectors allow you to target elements based on their position as a child element within their parent element. For example, #intro > :nth-child(2) would target the second child element of the element with the ID "intro". You can use various formulas to specify the position, such as 2n+1 to target every odd-numbered child element.

Relative selectors can be used in conjunction with other selectors to create more specific targets. For example, you could use the #intro p.warning selector to target all p elements with the class warning that are descendants of the element with the ID "intro".

How Organic Ads Uses Selectors

With Organic Ads, selectors are used to target specific areas of a webpage where the ad code should be inserted. We use a combination of element type, class, and ID selectors to target specific areas of the page, e.g. a banner ad at the top of the page or  sidebar ad. The ad code is then inserted into the targeted element, which causes the ad to be displayed on the webpage.

For example, an ad network might use a selector to target the div element with the ID sidebar and insert an ad banner into that element.

Default Selectors

Add details about our default selector settings.

Custom Selectors

Organic Ads users are able to set custom selector rules to each placement.

Custom Selectors: Relative Settings

Not to be confused with relative selectors, Organic Ads supports relative settings for further customizing ad implementation on a site. The following relative placements are supported for custom selectors:

• Before: Places the ad before the targeted element.
• After: Places the ad after the targeted element.
• Inside Start: Places the ad inside the targeted element at the start of the element’s contents.
• Inside End: Places the ad inside the targeted element at the end of the element’s content.
• Sticky Footer: Places the ad inside the targeted sticky footer element at the start of the element’s contents. 
• Sticky End: Places the ad inside the targeted sticky footer element at the end of the element’s contents. 

This primer on selectors for programmatic ads was written by an engineering team leader with two decades of experience in managing technical projects for publishers.