NoBid GreenWrap Integration
NoBid Prebid Wrapper High Level Design
The NoBid Prebid Wrapper is an advanced Prebid.js Wrapper that allows Ad Operation teams to manage and customize their Prebid.js wrapper without any coding.
Combined with the NoBid Analytics Adapter and the Auction Optimizer technology, the NoBid Prebid Wrapper reduces your carbon footprint, increases your page load time and increases your inventory price value.
NoBid Prebid Wrapper High Level Design
Implementation Specification
AD UNIT CREATION
STEP ONE is to use the NoBid Insights Dashboard to create the Ad units. That’s where you specify the ad sizes, bidders and behavior of your ad units. The screenshot below shows an example of Ad units setup.
PUBLISH WRAPPER
STEP TWO is to Publish the wrapper. After you have set up your Ad units, bidders and behavior, you can now generate the Prebid wrapper by clicking the “PUBLISH CARBON WRAPPER” button. You can also preview a test page which has the NoBid Prebid wrapper implementation. The screenshot below shows the “PUBLISHED VERSION” of the NoBid Prebid Wrapper with their versions.
DEPLOY WRAPPER
STEP THREE is to deploy the wrapper.
There are two ways to deploy the wrapper:
- Self hosted wrapper. This is the option where the Publisher downloads the NoBid Prebid Wrapper and copies it to its infrastructure such as a CDN.
- NoBid hosted wrapper. This is the option where the Publisher needs to point the UI to code to the NoBid hosted version. This version allows changes in the NoBid Insights Dashboard to be available to users within 1 hour without changes in the UI code.
*Please download and fill out the onboarding doc (button above) so that NoBid can create your initial wrapper setup.
You can send your completed doc to support@nobid.io
Developers Guide
List of Services
-
Step 01: HTML HeadList Item 1
Add the following code to the HTML head of the page:
<head>
...
<script async src="PATH_TO_YOUR_NOBID_PREBID_WRAPPER"></script>
<script>
window.wrapup = window.wrapup || {cmd: []};
</script>
...
</head>
-
Step 02: Ad UnitsList Item 2
Each Ad unit needs to be used as follows:
<div id="ctr_leaderboard-footer">
<div id="spr_leaderboard-footer"></div>
<div id="leaderboard-footer">
<script>
wrapup.cmd.push(() => { wrapup.defineSlot('leaderboard-footer', 'leaderboard'); });
</script>
</div>
</div>
The main API for the NoBid Prebid Wrapper is the function wrapup.defineSlot(adUnitDivId, adUnitCode).
This function takes 2 parameters:
- The first parameter is the div ID of the Ad unit (adUnitDivId). This is an instance of the adUnitCode defined in the Insights UI.
- The second parameter is the Ad unit code (adUnitCode) defined in the Insights Dashboard.
The wrapper implementation uses 3 div elements:
- The required Ad unit div element that must match the adUnitDivId parameter in the defineSlot function.
- The optional “Container” div element. This is a wrapper for the Ad unit that allows customization via the Insights Dashboard UI. The container needs to have “ctr_” prefix with the Ad unit div ID.
- The optional “Sponsor Label” div element. This is a wrapper for the Ad Label that allows customization of the “Advertisement” label attached to the Ad unit. This element can be customized in the Insights Dashboard UI. The container needs to have “spr_” prefix with the Ad unit div ID.
-
Step 03: FunctionsList Item 3
At the end of defining all the ad units, you should call the function “wrapup.enableServices();”.
<script>
wrapup.cmd.push(() => { wrapup.enableServices(); });
</script>
This function will start the Prebid auction and then call Google Ad Manager with the key-values from the Prebid bids.
The following Preview page has an example implementation of the Prebid wrapper code:
NoBid Auction Optimizer
F E A T U R E S
Simple & Powerful
The Auction Optimizer minimizes wasteful requests resulting in: faster page speed, increased profitability and carbon emissions reduction.
The NoBid Auction Optimizer is implemented alongside the wrapper. No code changes are required.
Traffic Shaping
The Auction Optimizer uses the last 10 days including today's data to build the optimization model.
Rule Based Methods
The Optimizer uses a rules based system to determine the best inventory "pockets".
Core Parameters
Currently the following inventory parameter are part of the selection algorithm: Bidder, Site, Country, Device, Browser, Ad Type (Banner vs Video), Ad Size.
Real-Time Data Shaping
The auction optimizer runs constantly to "optimize" your inventory.
A/B Testing
The auction optimizer runs an A/B test experiment to monitor the optimization results.
NEED SUPPORT?
Our dedicated team is ready to help you each step of the way, reach out below for timely support and custom solutions.