Standalone Integration

This guide shows how to use n360ortb without an ad server by rendering ads directly from the bid response.

Overview

In standalone mode, you:

Request bids using fetchBids()
Receive the winning bid with ad markup (adm)
Render the ad directly into your page

This approach is ideal for simple implementations or custom ad rendering solutions.

Complete Example

<!DOCTYPE html>
<html>
<head>
  <title>n360ortb Standalone Example</title>

  <!-- n360ortb loader -->
  <script>
  !function(){if(!window.n360ortb){window.n360ortb={init:function(){e("init",arguments)},fetchBids:function(){e("fetchBids",arguments)},setDisplayBids:function(){},targetingKeys:function(){return[]},que:[]};var n=document.createElement("script");n.async=!0,n.src="https://lib.nexx360.io/nexx360_ortb.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(n,t)}function e(n,t){window.n360ortb.que.push([n,t])}}();
  </script>

  <script>
    // Initialize
    n360ortb.init({
      currency: 'EUR'
    });

    // Fetch bids and render
    n360ortb.fetchBids({
      slots: [
        {
          tagId: 'your-tag-id',
          divId: 'ad-container',
          sizes: [[300, 250]]
        }
      ]
    }, function(bids) {
      // Check if we have a bid for this slot
      var bid = bids['ad-container'];

      if (bid) {
        renderAd('ad-container', bid);
      } else {
        console.log('No bid received');
        // Optionally show fallback content
      }
    });

    function renderAd(divId, bid) {
      var container = document.getElementById(divId);

      // Create an iframe to render the ad
      var iframe = document.createElement('iframe');
      iframe.width = bid.width;
      iframe.height = bid.height;
      iframe.frameBorder = '0';
      iframe.scrolling = 'no';
      iframe.marginWidth = '0';
      iframe.marginHeight = '0';
      iframe.style.border = 'none';

      container.appendChild(iframe);

      // Write the ad markup to the iframe
      var doc = iframe.contentWindow.document;
      doc.open();
      doc.write(bid.adm);
      doc.close();
    }
  </script>
</head>
<body>
  <h1>My Page</h1>

  <div id="ad-container" style="width: 300px; height: 250px;">
    <!-- Ad will render here -->
  </div>
</body>
</html>

Understanding the Bid Response

The fetchBids() callback receives an object with bids keyed by divId:

{
  'ad-container': {
    cpm: 2.50,           // Bid price
    width: 300,          // Creative width
    height: 250,         // Creative height
    adm: '<script>...</script>',  // Ad markup to render
    creativeId: 'abc123',
    ssp: 'appnexus',
    currency: 'EUR'
  }
}

The adm property contains the complete ad markup (HTML/JavaScript) that should be rendered.

Handling Multiple Slots

n360ortb.fetchBids({
  slots: [
    {
      tagId: 'leaderboard-tag',
      divId: 'leaderboard',
      sizes: [[728, 90], [970, 250]]
    },
    {
      tagId: 'sidebar-tag',
      divId: 'sidebar',
      sizes: [[300, 250], [300, 600]]
    },
    {
      tagId: 'footer-tag',
      divId: 'footer',
      sizes: [[728, 90]]
    }
  ]
}, function(bids) {
  // Iterate through all requested slots
  ['leaderboard', 'sidebar', 'footer'].forEach(function(divId) {
    var bid = bids[divId];
    if (bid) {
      renderAd(divId, bid);
    }
  });
});

Handling No Bids

When no bid is returned for a slot, you can display fallback content:

n360ortb.fetchBids({
  slots: [
    { tagId: 'my-tag', divId: 'ad-slot', sizes: [[300, 250]] }
  ]
}, function(bids) {
  var bid = bids['ad-slot'];

  if (bid) {
    renderAd('ad-slot', bid);
  } else {
    // Show fallback
    showFallback('ad-slot');
  }
});

function showFallback(divId) {
  var container = document.getElementById(divId);
  container.innerHTML = '<img src="/fallback-banner.jpg" alt="Advertisement">';
}

Safe Rendering with Friendly Iframe

For better isolation and security, render ads in a friendly iframe:

function renderAd(divId, bid) {
  var container = document.getElementById(divId);

  // Create iframe
  var iframe = document.createElement('iframe');
  iframe.id = divId + '-iframe';
  iframe.width = bid.width;
  iframe.height = bid.height;
  iframe.frameBorder = '0';
  iframe.scrolling = 'no';
  iframe.style.border = 'none';
  iframe.style.overflow = 'hidden';

  container.appendChild(iframe);

  // Build the HTML document for the iframe
  var iframeDoc = iframe.contentWindow.document;
  iframeDoc.open();
  iframeDoc.write('<!DOCTYPE html>');
  iframeDoc.write('<html><head>');
  iframeDoc.write('<style>body{margin:0;padding:0;}</style>');
  iframeDoc.write('</head><body>');
  iframeDoc.write(bid.adm);
  iframeDoc.write('</body></html>');
  iframeDoc.close();
}

Refreshing Ads

To refresh ads after a period of time:

function refreshAds() {
  // Clear existing ads
  document.getElementById('ad-container').innerHTML = '';

  // Fetch new bids
  n360ortb.fetchBids({
    slots: [
      { tagId: 'your-tag-id', divId: 'ad-container', sizes: [[300, 250]] }
    ]
  }, function(bids) {
    var bid = bids['ad-container'];
    if (bid) {
      renderAd('ad-container', bid);
    }
  });
}

// Refresh every 30 seconds
setInterval(refreshAds, 30000);

Be mindful of refresh rates. Excessive ad refreshing can negatively impact user experience and may violate SSP policies.

Next Steps

API Reference - Complete API documentation
GAM Integration - For integration with Google Ad Manager
Privacy & Consent - Handle GDPR and other privacy requirements

PreviousAPI Reference NextGAM Integration

Last updated 0 minutes ago

Was this helpful?

hashtagOverview

hashtagComplete Example

hashtagUnderstanding the Bid Response

hashtagHandling Multiple Slots

hashtagHandling No Bids

hashtagSafe Rendering with Friendly Iframe

hashtagRefreshing Ads

hashtagNext Steps

Overview

Complete Example

Understanding the Bid Response

Handling Multiple Slots

Handling No Bids

Safe Rendering with Friendly Iframe

Refreshing Ads

Next Steps