1.0 | About this feature
To get the most flexibility with player placement on a page, you should utilise dynamic targeting in Blue Billywig. Once the player script is placed on a page, dynamic targeting allows you to move the player anywhere the page based on elements already in the markup without requiring any code changes to your site. If you have any questions about this guide, please reach out to support@bluebillywig.com
2.0 | Select Targeting Mode
You have several options to choose from when selecting how to place your ad using a DOM selector. These options are available to select on the Ad Unit page in your Blue Billywig account under the “Placement Options” section.
- After matching DOM element: Place the player directly after the first element matching the DOM-Selector
- Halfway matching DOM elements: Place the player after the number of items matching the DOM-Selector divided by two, rounded down. 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. 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.
For now, we’ll use the After matching DOM element option.
3.0 | Inspect your site
- Open developer tools in your browser. In Chrome, you can right click anywhere on the page and select the “Inspect” option.
- Once the developer tools are displayed, click the Selector link (circled in red).
- Now that you’re in Selector mode, you can hover over the various elements in your site to find something to target your video to. This selector uses jQuery and can use anything jQuery can use. See http://api.jquery.com/category/selectors/ for full documentation.
4.0 | Target a DOM Element
I want to select an element within the written paragraph content on my page. Let’s look at a few targeting examples.
Example 1:
In this example, the selected element of the #content div is too large. If I placed my ad unit after it, it would be at the bottom of the page and below the fold–Not what we’re looking for.
Example 2:
This element, the div “siteorigin-widget-tinymce.textwidget” is still too large for where I want to put my ad unit.
Example 3:
One layer down seems to be the perfect solution for this example.
This is the paragraph element–I want my ad unit to come either after the second paragraph or if there is no second paragraph, then after the last one. Here’s what I would enter in the Placement DOM Selector box to get this to work:
Breaking down the logic p:eq(1), p:last
- p:eq(1) – This means that we are targeting the second paragraph on the page. The numbering system on a page starts with ‘0’, so make sure that you factor that in when entering in your selection. If you’re looking for the second paragraph element, you are looking for ‘p:eq(1)’.
- The comma in between the statements means that if the conditions of the first selector are not met, then the second selector should apply.
- p:last – This targets the last ‘p’ element on the page. In this example, it will only come into effect if there is no second paragraph on the page.
5.0 | A few examples
#article-identifier p.paragraph
- ‘#’ is used for the id attribute of dom-elements
- ‘.’ is used for the class name
- ‘p’ can be used to select all <p> elements.
div.article p:eq(3), div.article p:last
- This will select the 4th <p> element within a <div class=”article”> element OR the last <p> element found within the <div class=”article”> element.
- When used with the Placement option after Selector/first element the player will be placed after the first element found, so if there are less than 4 <p> elements found, it will be placed after the last <p> element.