Learn how to control the execution of the Nativo tag on your page using JavaScript to support advanced integration scenarios, including lazy loading and conditional loading of placements.
By default, the Nativo Tag automatically initiates ad requests and places ads on your site when the page loads. In some cases, you may want to delay this process and control the execution yourself using custom JavaScript code. You can delay automatic initiation of the ad request flow by the Nativo Tag's "AJAX Mode" option.
📘Did you know?
AJAX (short for Asynchronous JavaScript and XML) is a method for updating parts of a web page, without reloading the whole page. With AJAX, web applications can send and retrieve data from a server asynchronously without interfering with the display and behavior of the existing page.
Use Cases
❗️Basic Lazy Loading - Automatic Viewability Managment for Inventory feature*
For basic lazy loading use cases, we have launched an automatic viewability management. Please visit documentation for Automatic Viewability Management for Inventory for additional details.
In most cases, publishers can rely on the automatic execution of the Nativo Tag to place ads on their pages. However, in some cases, they may need to control the timing of the ad request and rendering flow. Some common use cases that require AJAX Mode include the following.
Lazy-load ads on pages to improve viewability.*
Place ad units on pages that utilize dynamic web techniques.
Provide consistent ad coverage on infinite scroll articles.
When the page structure changes without a URL change.
📘Lazy-what?
Lazy-load (also called on-demand loading) is an optimization technique that assists in loading the required sections of a page and delays the remaining, until it is needed by the user. It is an alternative of loading the entire web page and rendering it to the user in one go as in bulk loading.
Implementation
This section covers the steps required to install the Nativo Tag and control it via custom JavaScript.
Add the Nativo Tag to your page in the header as follows, including the
data-ntv-set-no-auto-startattribute. This initializes the Nativo Tag but delays the ad call and ad rendering flow.
HTML Tag
<script type="text/javascript" src="https://s.ntv.io/serve/load.js" data-ntv-set-no-auto-start async></script>
Call the
PostRelease.Start()method to initiate an ad request and render (or re-render) ads on the page. Note that you may call this method multiple times, if necessary (e.g. to support an infinite scroll page)
JavaScript
// Option 1: simple example PostRelease.Start(); // Option 2: to avoid a race condition with the load.js tag var ntv=ntv||{};ntv.cmd=ntv.cmd||[]; ntv.cmd.push(function(){ PostRelease.Start() });
Learn more about how to prevent race conditions below.
Features
We have a couple of features that give this implementation a bit of flexibility depending on your needs.
Call a specific placement or set of placements.
To do this, add the placement or placements to the PostRelease call, for example:
JavaScript
PostRelease.Start({ptd: [12345, 678910]});The ptd argument tells the tag to only the specific placements (ids 12345 and 678910) that are specified in the id list.
📘In Case You Are Wondering
Placement IDs can be found in the Nativo Platform URL by navigating to Monetization > Publications > Placements and clicking the edit button for the specific placement.
Reset counter on infinite scroll placements
Depending on your sites setup and loading logic, you might need to reset the counter on an infinite scroll placement so it renders in the intended position every time. To reset the counter, add the parameter infScrollReset:true to the PostRelease call.
JavaScript
PostRelease.Start({infScrollReset:true})Execute custom code after Nativo code completes (avoiding race conditions)
Nativo has a global command queue for asynchronous execution of Nativo-related calls.
The ntv.cmd variable is initialized to an empty JavaScript array by the Nativo load.js on the page, and ntv.cmd.push is the standard Array.push method that adds an element to the end of the array. When the Nativo load.js JavaScript is loaded, it looks through the array and executes all the functions in order. This mechanism allows Nativo load.js to reduce perceived latency by fetching the JavaScript asynchronously while allowing the browser to continue rendering the page.
Example
var ntv=ntv||{};ntv.cmd=ntv.cmd||[]; // setup command queue ntv.cmd.push(function(){ DoSomething() }); // add custom function to queue // DoSomething() will be called once the Nativo code is loaded or executed immediately if already loaded.