Skip to main content

Infinite Scroll Placements

Siva Balan avatar
Written by Siva Balan
Updated over 3 months ago

Publisher Use Case

Infinite scrolling pages provide significantly more real estate on a page which could positively impact ad inventory and revenue potential. Nativo provides a solution that allows a single placement to inject multiple times on a page - rather than creating multiple placements - as long as the style of the placements needed are identical.

Although infinite scroll placements were intended for use on infinite scrolling pages, they can also be used for other (non-infinite scrolling) pages where a uniform placement is expected to render multiple times on the same page.

📘Definitions

Infinite Scroll - Method of loading new content dynamically at the bottom of the page as the consumer scrolls.
Infinite Scroll Placements - Rendering native ad units at a defined cadence as the user scrolls down a page.

Infinite Scroll Placement Examples

1022

Test Infinite Scroll placement renders every 4 positions.

600

Test Infinite Scroll placement renders every 3 positions.

❗️Reporting Limitation

Infinite scroll-enabled placements utilize a single placement that is injected multiple times on the page. Due to this unique setup, infinite scroll placements are reported on as a single placement versus each placement "repetition" being reported separately.

Setup Requirements

Infinite Scroll placements, like any other Nativo placement, are targeted using CSS selectors that exist on that page. However, due to the repetitive nature of Infinite Scroll placements, the selector Nativo uses for targeting must have an increasing count from the starting position.

Some page structures will already have classes or IDs on the page that meet this gradually-increasing number criteria but there is an alternative solution for pages not already setup this way. Custom elements can be created and positioned wherever the infinite scroll placement should render.

📘Examples

#nativo1, #nativo2, etc.
#custom1, #custom2, #custom3, etc.
#ntv1, #ntv2, #ntv3, etc.
.nativo1, .nativo2, .nativo3, etc.

The increments are very important as there are internal settings that inform the Nativo ad server what the "base" div ID is, the initial feed position, and the interval for each consecutive selector.

Infinite scroll typically requires the targeted selector to be within the same general parent div. In some cases, an infinite article feed changes the URL and adds a completely new section in the HTML for each scroll. Even with this change of structure, using a custom div such as <div class="ntv_ap1"></div> and incrementing the number 1 will allow infinite scroll to still work correctly.

Please visit the Custom Elements and Custom Element Implementation pages for more information.

Did this answer your question?