Use our dynamic targeting feature to keep full control over the outstream player placement.
Instead of manually placing the outstream player in your HTML, dynamic targeting allows you to use DOM selectors to:
- Place the outstream player after the preferred HTML element or;
- Append the outstream player to the preferred HTML element
1.0 | Select a Targeting Mode
To apply dynamic targeting for your outstream ad unit:
- Open “Ad Services”;
- In the left panel, click “Ad Units”;
- Select an existing outstream ad unit or create a new one (learn more about creating an ad unit)
- Scroll down to “Placement Options”:
By default the player will be placed at script position:
To enable dynamic targeting, select one of the following options:
- After matching DOM element: Place the player directly after the first element matching the provided DOM selector.
- Append to matching DOM element: Append the player directly to the first element matching the provided DOM selector.
- Halfway matching DOM elements: Place the player after the number of items matching the DOM selector divided by two (rounded down). For example: when 7 elements match the selector, the banner will be placed after the 3rd element.
- After matching DOM element below the fold: The placement logic will try to place the player below the webpage “fold”. This means it will place the player after the first element that is not completely visible without scrolling. Note: if none of the elements are below the fold, the player will not be placed.
- After matching DOM element below the fold, or the last element found: Same as above, with the exception that it will be placed after the last element found, if none of the matching elements is under the fold.
When using one of the dynamic placement options listed above: simply place the embed code on the bottom of the page. When the code is executed, the ad unit will be placed based on the specified DOM selector.
2.0 | Select a DOM element
A DOM selector enables you to target HTML elements based on their
- Type
- <p>
- <div>
- Etc.
- Attributes
- Id (e.g. #content,)
- Class (e.g. .article-section)
- Etc.
- Position in the DOM
- :nth-of-type(n)
- :last-of-type
- Etc.
Our player supports standard CSS selectors as listed by MDN documentation. In the Placement options, enter your DOM selector:
3.0 | Select a DOM element: Using Developer Tools
If you’re unsure and need to find a specific element on an existing page, use your browser developer tools to find a the selector for your element:
- Open developer tools in your browser;
- In the developer tools panel, click the “Selector” button;
- Select the element you’d like to target;
- In the Elements tab of the developer tools: right click to open the “Copy” options and select “Copy selector”;
- Keep in mind: the value copied to your clipboard is the most specific selector of your target element. This element might therefore not be present on other pages.
3.0 | Select a DOM element: Example
Imagine we would like to place an outstream ad player within the written paragraph content on our page. Let’s look at a the following case to determine the ideal placement.
In the screenshot below, the selected element of the #content div is too large. When placing my outstream ad unit after the #content div, it would be appear at the bottom of the page and below the fold. Generally not what we’re looking for.
In the screenshot below, we have selected a div nested one layer deeper with the following selector: .siteorigin-widget-tinymce.textwidget This element is still too large, resulting in an ad unit placed too low on the page.
In the screenshot below, we have arrived in an element nested one layer deeper. Specifically the third <p> paragraph on the page: an optimal placement for our use case.
Outstream ad units will most likely be placed on many pages with various content lengths. Some pages might therefore not contain more than 3 <p> elements. In those cases we would like the outstream ad unit to be placed after the last <p> element as a fallback.
In the Placement options:
- Select “After matching DOM element”
- Provide the following DOM selector:
p:nth-of-type(3), p:last-of-type
Syntax explanation:
- p:nth-of-type(3)
The third paragraph on the page will be targeted (the indexing system on a page starts at ‘1’) (read more here). - Comma
Inserting a comma between two statements will ensure the second selector is applied if the conditions of the first selector are not met. - p:last-of-type
The last paragraph element on the page will be targeted. In this case: only if there is no third paragraph on the page (read more here).
Additional examples:
#article-identifier p.paragraph
- # is used for DOM element id attributes
- . is used for DOM element class attributes
- p is used to select all <p> elements.
div.article p:nth-of-type(4), div.article p:last
- div.article p:nth-of-type(4) will select the 4th <p> element within <div class=”article”>
- , div.article p:last-of-type will select the last <p> element within <div class=”article”> if the conditions of the first selector are not met.