There are a few different types of embed out-stream unit to the site layout:
1. Regular include.
This type of include has to be placed precisely on the layout position where you wanted to get the out-stream unit visible.
Code:
<script src="//pub.nakedreel.com/gt/spots/{zone_id}/outstream.js" async></script>
Where {zone_id} - Unique identifier of the ad zone.
Can be obtained on your account zones tab.
2. Dynamic include.
With dynamic includes you are able to set up specific positions of out-stream unit in JS-snippet and place it anywhere in your HTML, e.g in the <head> tag section. It is beneficial to set up and manage it on the sites with dynamic content or different layouts for desktop/mobile version of the website.
Number variables: {desktop_position}, {mobile_position} - the number of the list element (thumbnails block) after which ad block will be inserted for desktop and mobile devices.
Use "0" for the position value if you don't want the ad block to appear for specific device.
IMPORTANT NOTICE: You have to edit the correct path to the unit manually, please carefully follow the codes below. Use the same {zone_id} as you get for regular include.
2.1. thumbnail with "data-name" attribute
Example:
<ul>
<li><img data-name="thumb" ...></li> <!-- pos 1 -->
<li><img data-name="thumb" ...></li> <!-- pos 2 -->
<li><img data-name="thumb" ...></li> <!-- pos 3 -->
...
</ul>
Code (The editable part marked with bold):
<script src="//pub.nakedreel.com/network/{zone_id}/outstream.js?dpos={desktop_position}&mpos={mobile_position}" async></script>
2.2. thumbnail with a custom selector
Example:
<ul>
<li><img class="thumb" ...></li> <!-- pos 1 -->
<li><img class="thumb" ...></li> <!-- pos 2 -->
<li><img class="thumb" ...></li> <!-- pos 3 -->
...
</ul>
Code (The editable part marked with bold):
<script src="//pub.nakedreel.com/network/{zone_id}/outstream.js?dpos={desktop_position}&mpos={mobile_position}&selector={img_selector}" async></script>
{img_selector} - Thumbnail (img) DOMString selector, e.g. "img.thumb"
2.3. List elements with custom selector
Example:
<ul>
<li class="thumb"><img src="..."></li> <!-- pos 1 -->
<li class="thumb"><img src="..."></li> <!-- pos 2 -->
<li class="thumb"><img src="..."></li> <!-- pos 3 -->
...
</ul>
Code (The editable part marked with bold):
<script src="//pub.nakedreel.com/network/{zone_id}/outstream.js?dpos={desktop_position}&mpos={mobile_position}&itemselector={item_selector}" async></script>
{item_selector} - List element (a, div, li) DOMString selector, e.g. "li.thumb"
3. Dynamic content
In case your site uses dynamic content loading, put this function as a callback after dynamically loading elements to place ad block at the right spot.
Code (The editable part marked with bold):
function insertNativeReel() {
const nr = document.createElement('script');
nr.setAttribute('type', 'text/javascript');
nr.setAttribute('src', 'https://pub.nakedreel.com/network/{zone_id}/outstream.js?dpos={desktop_position}&mpos={mobile_position}&itemselector={item_selector}');
document.getElementsByTagName('head')[0].appendChild(nr);
}