The first step to integrate Nitro Ad Exchange is to figure out a placement.
Placement can be of 2 types.
For InApp Ad placement, a WebView needs to be inserted and then a Javascript stub will load the ad inside that WebView.
Once you have figured out the placement, the following javascript needs to be inserted in the Header of the page (not body for loading Ad while the page itself is loading)
<script type="text/javascript">
(function(n,i,t,r,o) {
var a,m;n['NitroObject']=o;n[o]=n[o]||function(){
(n[o].q=n[o].q||[]).push(arguments)},n[o].l=1*new Date();n[o].h=r;a=i.createElement(t),
m=i.getElementsByTagName(t)[0];a.async=1;a.src=r;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://adx.nitrocommerce.ai/adx.js','nitro');
nitro('configure', '<placement-id>', 'size-1x-2x', "<content-groups>");
</script>
Placement-Id = Given by Nitro for this placement placeholder.
Size = Given Sizes of Ad that this placeholder can support, can be comma seperated. 1x - 2x means 1:2 aspect ratio. Other sizes can be obtained from Ad Placement Script Page in NitroAds.
Content Groups = If you want to pass the type of ad/interest groups that should be served to the user (takes prioirty over Nitro's algorithm), e.g "hairloss,electronics,baby products" - In this case, if possible, Nitro will try to serve the Ad that closely matches these tags, even if the CPC of the ad is below the threshold of competing ads or even if Nitro determines that the user is more interested in some other group.
Once loaded, the script will be replaced by an <iframe> of the specified size.
The size is passed and not read from the ad itself, so as to statically allocate space for ad (in case it loads in the background). This will cause your UI to not move around when the ad loads. Had it been loaded later after the Ad fetch call, the UI will look like re-rendering and give a bad experience to end user.
Two headers, X-Frame-Options and Content-Security-Policy in your application must allow for iframe loading from both. These are the domains that Nitro uses to bring content from.
https://adx.nitrocommerce.ai
https://t.makehook.ws
At this point, a small script called adx.js will load and immediately after, start rendering in the iframe that will have the winning ad.
The winning ad will be determined by Nitro's algorithm in real time, based on the behaviour and knowledge of the user that Nitro has. Also giving priority to interest groups passed by the customer.
An ad is served in median time of ~100ms (actual rendering time may be more)
┌────────────────────────────┐
│ Start Integration Flow │
└────────────┬───────────────┘
│
┌────────────────────────────────┐
│ Identify Ad Placement Type: │
│ ─ InApp │
│ ─ PWA/Web │
└────────────┬───────────────────┘
│
┌─────────────────▼─────────────────┐
│ For InApp: Embed WebView & │
│ inject Nitro JS in header │
└───────────────────────────────────┘
│
┌────────────────▼──────────────────┐
│ Insert Nitro JS Snippet in Header │
│ (before body loads) │
└────────────────┬──────────────────┘
│
┌───────────────────▼────────────────────┐
│ JS initializes with: │
│ - Placement ID │
│ - Ad Size(s) │
│ - Optional: Content Groups (interests) │
└───────────────────┬────────────────────┘
│
┌────────────────▼─────────────────┐
│ Nitro JS loads `adx.js` │
│ from https://x.nitrocommerce.ai │
└────────────────┬─────────────────┘
│
┌──────────────────▼─────────────────────┐
│ `adx.js` determines winning ad in real │
│ time using: │
│ - User behaviour/profile │
│ - Content Groups (if provided) │
└───────────────────┬────────────────────┘
│
┌───────────────────▼─────────────────────────────┐
│ Winning Ad is rendered inside <iframe> │
│ - Size is predetermined (no layout shift) │
│ - Domain: adx.nitrocommerce.ai or makehook.ws │
└───────────────────┬─────────────────────────────┘
│
┌───────────────────▼─────────────────────────┐
│ ⚠ Ensure headers allow iframe loading: │
│ - X-Frame-Options │
│ - Content-Security-Policy │
└───────────────────┬─────────────────────────┘
│
┌───────▼────────┐
│ Ad is visible │
│ to the user │
└───────────────┘