Custom elements are HTML tags on the page specifically for Nativo to target. An easy example of this would be to add a unique class or ID to an existing element on the page. This custom element can also be any additional standalone element not already existing on the page with a unique class or ID, such as <div class="ntv-hp"></div> or <div id="ntv-ap"></div>.
How Nativo places ads on the page
For Nativo's standard JavaScript integration, our ad server targets specific HTML elements on the page (technically, using CSS selectors1) to identify where the native ad unit will be rendered.
Depending on your setup, the ad server will either:
Replace the element with an ad
Insert an ad before the element
Insert an ad after that element
Append an ad as the first child of that element
For most integrations, we examine the markup of your site and determine the best HTML element to target when building out the placements/native ad units for your various pages.
1 CSS Selectors are part of the CSS rule set, which allow choosing a unique HTML element on a page to style or target.
When should I use a custom element?
Examples of when you might want to target a custom element include the following.
Site Markup Changes Frequently or Is Expected to Change
Site Is “Responsive” but Desktop/Mobile Markup Is Different Based on Device
Simplify deployment with wildcarding
Control placements more explicitly
Simplify setup for infinite scroll pages
Placing a Custom Element on a page
Add an empty custom element with a unique class or ID in the exact location where the placement should render on the page. For example, if the Nativo placement should render after the 4th paragraph in the middle of an article page with a unique class of "nativo-promo" you would add a <p> tag with this class:
Which Pages Need a Custom Element?
A custom element should be added to all pages on the site where that specific ad unit is expected to serve. With the above example, the <p class="nativo-promo"></p> should be added to the middle of all article pages for targeting. However, if you have another page type such as a gallery page that should not have the same placement serving, make sure the custom element is not placed on those pages.
Best Practices
1. What HTML Elements Should I Create?
The element does not necessarily have to be a <div> and should preferably match existing elements within the module.
For example, if the module is an unordered list <ul> element and the Nativo placement should serve as the second list item <li> within this list while using a unique class of ntv-item, you can add it as follows:
HTML
<section class="box-contents"> <div class="box-title">…</div> <div class="read-more-box"> <ul id="most-popular-list"> <li>…</li> <li class="ntv-item"></li> <li>…</li> <li>…</li> <li>…</li> <li>…</li> <li>…</li> </ul> </div> </section>
2. Custom Element Should Be Empty
Unless Nativo is replacing existing editorial content within the custom element, it should be empty, since any text within the custom element will appear on the page when Nativo does not render an ad. The unique identifier needs to be the class or ID of the element and not the text within.
For example, if you implement a <p> tag and hardcode the text "Nativo Placement" this will render on all pages where there is no fill available, and provides a disruptive user experience:
3. Be Mindful of Inherited CSS on the Page
It is important to keep in mind that any CSS on the page applying to the same type of element may have an unwanted effect when Nativo doesn't render an ad, similar to the example above with placing text in the custom element.
For example, if you are placing a custom list item for Nativo to target, you may have borders or margins targeting all <li> elements that would cause the border to show up twice when Nativo doesn't fill. In order to prevent this, you can add CSS targeting the specific custom element (in this case, targeting li.ntv-div) which overrides the default and hides the border/margin. On the Nativo side, we can add this back in when we render an ad to ensure the placement looks as native as possible when we serve, and that the page layout is not effected when we do not serve.
❗️WRONG
Note that two separators are appearing when Nativo does not serve an ad.
👍RIGHT
CSS is added to remove the unwanted styling, which will be updated when Nativo serves.
4. Multiple Elements on a Page Should Be Unique
When multiple custom elements are added to the same page to render multiple placements, the class or ID should be unique for each element to ensure proper targeting. This also applies to multiple pages with different placement designs.
For example, using a class name such as "nativo-home" vs. "nativo-sections" vs. "nativo-article1" will allow us to target each one separately based on page type and design, since our placement styling is a 1:1 ratio with the unique custom elements.
Finally, the unique elements can be used for infinite scroll pages where extra sections or divs are added to the page and new editorial content continues to load. Multiple custom elements can be added to the page with incrementing numbers in the class or ID. For example, using a class of "r-nativo n1" and then "r-nativo n2" and incrementing the "n#" value allows us to call the same placement each time that unique div loads on scrolling pages:
NOTE: For scrolling pages, the first custom div should never use 0 for its number.
5. Remove Js Tag When Removing Custom Elements
If removing all custom elements from a particular page type for any reason, please be sure to also remove the Nativo JS tag from the <head> tag of those pages so as not to negatively affect reporting.