Step-by-step guide to connect Ring DAS ad server with Prebid.js header bidding
Ring DAS + Prebid.js Integration Guide
Connect Ring DAS ad server to Prebid.js header bidding in three main steps: build custom Prebid.js bundle, configure ad units, and display ads.
Prerequisites
- Node.js (v16 or higher)
- Git
- Ring DAS account with network ID, site, area, and slot names
Step 1: Build Prebid.js with DAS Adapter (10 minutes)
The DAS bid adapter is currently available in a fork. Follow these steps to build your custom Prebid.js bundle.
Clone Prebid.js Repository
git clone https://github.com/prebid/Prebid.js.git
cd Prebid.js
npm ciAdd DAS Bid Adapter Module
Note: This is a temporary solution. The DAS adapter will be available in the official Prebid.js repository in the future.
-
Download the DAS adapter from:
https://github.com/DreamLab/Prebid.js/blob/dreamlab-master/modules/dasBidAdapter.js -
Copy it to your Prebid.js repository:
# Download the adapter
curl -o modules/dasBidAdapter.js https://raw.githubusercontent.com/DreamLab/Prebid.js/dreamlab-master/modules/dasBidAdapter.js
# Downlaod required library file
mkdir -p libraries/raspUtils && curl -o libraries/raspUtils/raspUtils.js https://raw.githubusercontent.com/DreamLab/Prebid.js/refs/heads/dreamlab-master/libraries/raspUtils/raspUtils.js- Download the adapter documentation (optional):
curl -o modules/dasBidAdapter.md https://raw.githubusercontent.com/DreamLab/Prebid.js/dreamlab-master/modules/dasBidAdapter.mdBuild Prebid.js Bundle
Build Prebid.js with the DAS adapter included:
gulp build --modules=dasBidAdapterFor production with additional modules:
gulp build --modules=dasBidAdapter,appnexusBidAdapter,rubiconBidAdapterThe built file will be available at build/dist/prebid.js. Use this file in your HTML pages.
What this does: Creates a custom Prebid.js bundle containing only the DAS adapter and any other bidders you specify.
Step 2: Basic Integration - Your First DAS Ad (5 minutes)
Create a simple HTML page to test the integration.
Minimal Working Example
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DAS Prebid Integration</title>
<!-- Load your custom Prebid.js build -->
<script async src="path/to/your/prebid.js"></script>
</head>
<body>
<h1>DAS Ad Example</h1>
<!-- Ad container -->
<div id="ad-slot" style="min-height: 250px; border: 1px solid #ddd;"></div>
<script>
var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];
// Configure ad unit
var adUnits = [{
code: 'ad-slot',
mediaTypes: {
banner: {
sizes: [[300, 250]]
}
},
bids: [{
bidder: 'das',
params: {
network: '4178463', // Your network ID
site: 'test_site', // Your site name
area: 'sport', // Content area/category
slot: 'slot' // Ad slot name
}
}]
}];
// Run auction
pbjs.que.push(function() {
pbjs.addAdUnits(adUnits);
pbjs.requestBids({
bidsBackHandler: function() {
var adServerTargeting = pbjs.getAdserverTargetingForAdUnitCode('ad-slot');
if (adServerTargeting && adServerTargeting.hb_adid) {
// Render winning ad
var iframe = document.createElement('iframe');
iframe.width = 300;
iframe.height = 250;
iframe.style.border = 'none';
iframe.scrolling = 'no';
iframe.marginWidth = '0';
iframe.marginHeight = '0';
document.getElementById('ad-slot').appendChild(iframe);
pbjs.renderAd(iframe.contentWindow.document, adServerTargeting.hb_adid);
}
}
});
});
</script>
</body>
</html>Replace these values:
network: Your Ring DAS network IDsite: Your site identifier (case-insensitive)area: Content section/category (e.g., sport, news, lifestyle)slot: Ad slot placement name
What happens:
- Prebid.js loads asynchronously
- Ad unit configuration defines slot and DAS bid parameters
requestBids()triggers auction with DAS adapter- Winning ad renders in iframe using
pbjs.renderAd()
Step 3: Advanced Configuration - Page Context & Targeting
Add contextual data to improve ad targeting and performance.
Full Configuration Example
var adUnits = [{
code: 'ad-slot',
mediaTypes: {
banner: {
sizes: [[300, 250], [300, 600]]
}
},
bids: [{
bidder: 'das',
params: {
// Required parameters
network: '4178463',
site: 'example_com',
area: 'sport',
slot: 'slot',
// Optional: Slot sequence for multiple ads
slotSequence: 1,
// Optional: Page context for better targeting
pageContext: {
// Document URL
du: location.href,
// Referrer URL
dr: document.referrer,
// Virtual path (site/area/subsection)
dv: 'example_com/sport/football',
// Keywords for content targeting
keyWords: ['football', 'euro', 'lewandowski'],
// Key-value pairs for targeting
keyValues: {
ci: '932016a5-02fc-4d5c-b643-fafc2f270f06', // Content ID
adunit: 'example_com/sport'
}
}
}
}]
}];Parameter Details:
| Parameter | Required | Description | Example |
|---|---|---|---|
network | Yes | Your DAS network ID | "4178463" |
site | Yes | Site identifier (case-insensitive) | "example_com" |
area | Yes | Content section/category | "sport" |
slot | Yes | Ad placement name | "slot" |
slotSequence | No | Position for multiple same-named slots | 1 |
pageContext.du | No | Document URL | Current page URL |
pageContext.dr | No | Referrer URL | Previous page URL |
pageContext.dv | No | Virtual path (site/area/subsection) | "site/sport/football" |
pageContext.keyWords | No | Content keywords (alphanumeric, _, -) | ["sport", "news"] |
pageContext.keyValues | No | Targeting key-values | {ci: "article-123"} |
Troubleshooting
No Bids Received
Check:
- Network ID, site, area, slot values are correct
- Prebid.js bundle includes
dasBidAdaptermodule - Browser console for errors (
?pbjs_debug=true) - Network tab for requests to
csr.onet.plendpoint
// Debug bid responses
pbjs.que.push(function() {
setTimeout(function() {
console.log('All bid responses:', pbjs.getBidResponses());
}, 3000);
});Ad Not Rendering
Check:
hb_adidis present in targeting:pbjs.getAdserverTargetingForAdUnitCode('ad-slot')- Winning bid has
adcontent:bid.adis not empty - iframe is created and appended to DOM
- Console for render errors
// Debug rendering
var targeting = pbjs.getAdserverTargetingForAdUnitCode('ad-slot');
console.log('Targeting:', targeting);
if (targeting && targeting.hb_adid) {
var responses = pbjs.getBidResponsesForAdUnitCode('ad-slot');
console.log('Responses:', responses);
var bid = responses.bids.find(b => b.adId === targeting.hb_adid);
console.log('Winning bid:', bid);
console.log('Has ad content:', !!bid.ad);
}Timeout Issues
If bids arrive too late:
pbjs.setConfig({
bidderTimeout: 3000 // Increase to 3 seconds
});Next Steps
Integration with DL API SDK:
Need Help?
- Enable debug mode:
?pbjs_debug=true - Check Prebid.js documentation: https://docs.prebid.org
Complete Working Example
This example includes visual status indicators and detailed console logging - useful for debugging and understanding the auction flow.
Copy this file and replace configuration values to get started:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ring DAS + Prebid.js</title>
<script async src="path/to/your/prebid.js"></script>
<style>
body { font-family: Arial, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; }
.ad-container { border: 2px solid #4CAF50; padding: 20px; margin: 20px 0; min-height: 250px; background: #f9f9f9; }
.status { padding: 10px; margin: 10px 0; border-radius: 4px; font-weight: bold; }
.status.loading { background: #fff3cd; color: #856404; }
.status.success { background: #d4edda; color: #155724; }
.status.error { background: #f8d7da; color: #721c24; }
</style>
</head>
<body>
<h1>Ring DAS + Prebid.js Integration</h1>
<div id="status" class="status loading">⏳ Loading bids...</div>
<div class="ad-container">
<h3>Ad Slot - 300x250 Banner</h3>
<div id="ad-slot" style="min-height: 250px;"></div>
</div>
<script>
var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];
var adUnits = [{
code: 'ad-slot',
mediaTypes: {
banner: { sizes: [[300, 250]] }
},
bids: [{
bidder: 'das',
params: {
network: '4178463', // ← Replace with your network ID
site: 'test_site', // ← Replace with your site
area: 'sport', // ← Replace with your area
slot: 'slot' // ← Replace with your slot
}
}]
}];
pbjs.que.push(function() {
pbjs.addAdUnits(adUnits);
pbjs.requestBids({
timeout: 2000,
bidsBackHandler: function() {
var targeting = pbjs.getAdserverTargetingForAdUnitCode('ad-slot');
var statusDiv = document.getElementById('status');
if (targeting && targeting.hb_adid) {
var responses = pbjs.getBidResponsesForAdUnitCode('ad-slot');
var bid = responses.bids.find(b => b.adId === targeting.hb_adid);
if (bid && bid.ad) {
statusDiv.className = 'status success';
statusDiv.textContent = '✓ Ad loaded! CPM: $' + bid.cpm;
var iframe = document.createElement('iframe');
iframe.width = bid.width;
iframe.height = bid.height;
iframe.style.border = 'none';
iframe.scrolling = 'no';
iframe.marginWidth = '0';
iframe.marginHeight = '0';
document.getElementById('ad-slot').appendChild(iframe);
pbjs.renderAd(iframe.contentWindow.document, bid.adId);
}
} else {
statusDiv.className = 'status error';
statusDiv.textContent = '✗ No bids received';
}
}
});
});
// Debug logging
pbjs.que.push(function() {
pbjs.onEvent('bidResponse', function(bid) {
console.log('Bid received:', bid.bidderCode, 'CPM:', bid.cpm);
});
});
</script>
</body>
</html>Save this as das-prebid-example.html, update the configuration values, and open in your browser.
