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 ci

Add 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

Download the adapter documentation (optional):

curl -o modules/dasBidAdapter.md https://raw.githubusercontent.com/DreamLab/Prebid.js/dreamlab-master/modules/dasBidAdapter.md

Build Prebid.js Bundle

Build Prebid.js with the DAS adapter included:

gulp build --modules=dasBidAdapter

For production with additional modules:

gulp build --modules=dasBidAdapter,appnexusBidAdapter,rubiconBidAdapter

The 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: '7012768',      // 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 ID
site: 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: '7012768',
            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	`"7012768"`
`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"}`

Live Demo

See it in action: Ring DAS + Prebid.js Demo

The live demo shows a complete working integration with:

Pre-built Prebid.js with DAS adapter (174KB)
Multiple ad slots (left banner, right banner, sticky ad)
Real-time event log and bid configuration console
Interactive debug interface with slot status tracking

Troubleshooting

No Bids Received

Check:

Network ID, site, area, slot values are correct
Prebid.js bundle includes dasBidAdapter module
Browser console for errors (?pbjs_debug=true)
Network tab for requests to csr.onet.pl endpoint

// Debug bid responses
pbjs.que.push(function() {
    setTimeout(function() {
        console.log('All bid responses:', pbjs.getBidResponses());
    }, 3000);
});

Ad Not Rendering

Check:

hb_adid is present in targeting: pbjs.getAdserverTargetingForAdUnitCode('ad-slot')
Winning bid has ad content: bid.ad is 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:

How to serve ads from Ring DAS without Prebid.js

Need Help?

Enable debug mode: ?pbjs_debug=true
Check Prebid.js documentation: https://docs.prebid.org

Complete Working Example

Live demo available: http://examples.das.ringpublishing.tech/index-prebid.html

This example includes visual status indicators and detailed console logging - useful for debugging and understanding the auction flow.

You can either use the live demo or copy the example below 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: '7012768',        // ← 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.