Quick Start: Your First Ad in 5 Minutes

Three steps. Copy, paste, see ad. No account needed for testing.

Live Demo

See it working: Ring DAS SDK Demo

The live demo shows multiple ad slots with debug console and metrics. View the source code to see the complete implementation.

Step 1: Add SDK to Your HTML (30 seconds)

<!DOCTYPE html>
<html>
<head>
  <script>
    dlApi = {
      target: "TEST/AREATEST",
      tid: 'EA-7012768',
      autoslot: 1,
      async: 1
    };
  </script>
  <script src="//lib.onet.pl/s.csr/build/dlApi/dl.boot.min.js" async></script>
</head>
<body>
  <!-- Step 2 goes here -->
</body>
</html>

What this does: Loads DL API SDK with test configuration. Test campaign always has ads available.

Step 2: Add Ad Slot (30 seconds)

<body>
  <!-- Add this where you want the ad -->
  <div data-slot="top"></div>

  <!-- SDK finds it automatically when autoslot: 1 -->
</body>

Step 3: Open in Browser

Open your HTML file. You'll see a test ad immediately. No server needed.

Done. You have a working ad.

What Just Happened? (Optional 1-minute read)

dlApi = SDK configuration object
target: "TEST/AREATEST" = Test campaign (always has ads)
autoslot: 1 = SDK auto-finds data-slot elements
<div data-slot="top"> = Container for ad named "top"

Make It Production-Ready (2 minutes)

Replace test config with your real values:

dlApi = {
  target: "YOURSITE/HOMEPAGE",  // Your actual site/area
  tid: 'EA-7012768',             // Your tenant ID (format: 'EA-number')
  autoslot: 1,
  async: 1
};

Where to get these values:

target: Your campaign targeting string (format: SITE/AREA)
tid: Your tenant ID from account manager (format: 'EA-number' as a string)

Set Targeting Context (Retail Media)

Critical for relevancy: Set product/category context BEFORE any ad requests. This ensures ads are relevant to what the user is viewing.

Why This Matters

When you provide context, the ad server:

Selects ads relevant to current page content
Improves click-through rates
Enables product-based retargeting
Optimizes campaign performance

Available Key-Values

Key	Description	Example
`offer_ids`	Product IDs on current page	`[10, 20, 1234]`
`category_ids`	Category IDs for targeting	`[101, 205]`
`main_category_id`	Main product category ID - primary category for ad matching (e.g., "Clothing > Dresses" even if product also appears in "Sale")	`101`
`manufacturer_id`	Brand/manufacturer ID (required by ad format: Brand Store)	`'12345678'`

Set Context Immediately After SDK Init

dlApi.cmd.push(function(dlApi) {
    // SET CONTEXT FIRST - before any ad requests
    dlApi.addKeyValue('offer_ids', ['10', '20', '1234']);           // Products on page
    dlApi.addKeyValue('category_ids', [101, 205]);            // Current categories
    dlApi.addKeyValue('main_category_id', 101);               // Main product category
    dlApi.addKeyValue('manufacturer_id', '12345678');         // Brand ID (if applicable)
});

🚧
Order matters! Always call addKeyValue() BEFORE fetch() or fetchNativeAd(). Context set after the ad request won't affect that request.

Real-World Recipes

Pick what you need. Each recipe is complete and working.

Recipe 1: Control When Ads Load

Use Case: Single Page Apps, dynamic content, user-triggered ads

Turn off auto-display

dlApi = {
  target: "SITE/AREA",
  tid: 'EA-7012768',
  autoslot: 0,  // Manual control
  async: 1,
  cmd: []       // Command queue for async loading
};

Load ad when YOU decide

dlApi.cmd.push(function(dlApi) {
  // Create container
  var div = document.createElement("div");
  div.id = "my-ad";
  document.body.appendChild(div);

  // Define slot and fetch
  var slot = dlApi.defineSlot("banner", "my-ad");
  dlApi.fetch();
});

SDK Objects Used:

dlApi.defineSlot(slotName, elementId) - Creates ad slot
dlApi.fetch() - Requests ads for all defined slots
dlApi.cmd - Command queue ensures SDK is ready

Recipe 2: Ads in Infinite Scroll

Use Case: Feed, timeline, article list with lazy-loaded content

var adCount = 0;

function loadMoreContent() {
  // Your content loading logic here

  adCount++;

  // Insert ad every 3 items
  if (adCount % 3 === 0) {
    dlApi.cmd.push(function(dlApi) {
      // Create unique container
      var div = document.createElement("div");
      div.id = "ad-" + adCount;
      document.querySelector(".feed").appendChild(div);

      // Define with position for uniqueness
      dlApi.defineSlot("infeed", div.id, {pos: adCount});
      dlApi.fetch();
    });
  }
}

// Call this when user scrolls
window.addEventListener('scroll', function() {
  if (isNearBottom()) {
    loadMoreContent();
  }
});

SDK Objects Used:

slot with pos parameter - Differentiates identical slot names
Multiple defineSlot() calls - Each creates independent ad slot

Key Points:

Use unique IDs for each ad container (ad-1, ad-2, etc.)
Use pos parameter to differentiate slots with same name
Call fetch() after each defineSlot() for immediate loading

Next Steps

More Recipes:

Recipe 4: React/Vue SPA integration
Recipe 5: Lazy loading for performance
Recipe 6: Custom targeting and key-values
Recipe 7: GDPR consent handling
Recipe 8: Debugging when ads don't show
Recipe 9: Native/in-feed ads
Recipe 10: Custom ad rendering

Troubleshooting:

Troubleshooting Guide - Common issues and solutions
SDK Reference - Complete API documentation

Need Help?

Use AdInspector bookmarklet for visual debugging (get from ad ops team)
Check ?dl_debug=1 in URL for debug output
Use test campaign: target: "TEST/AREATEST"
Inspect Network tab for requests to csr.onet.pl

Complete Working Example

Here's everything together - a production-ready page with viewability tracking:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DL API SDK Example</title>

  <script>
    // Initialize SDK
    dlApi = {
      target: "YOURSITE/HOMEPAGE",
      tid: 'EA-7012768',
      autoslot: 0,  // Manual control for tracking
      async: 1,
      cmd: []
    };
  </script>
  <script src="//lib.onet.pl/s.csr/build/dlApi/dl.boot.min.js" async></script>

  <style>
    .ad-container {
      min-height: 250px;
      margin: 20px 0;
      background: #f5f5f5;
    }
  </style>
</head>
<body>
  <h1>My Website</h1>

  <div id="ad-top" class="ad-container"></div>

  <div class="content">
    <p>Your content here...</p>
  </div>

  <div id="ad-sidebar" class="ad-container"></div>

  <script>
    dlApi.cmd.push(function(dlApi) {
      // Define top banner
      var topSlot = dlApi.defineSlot("top", "ad-top");
      topSlot.on("display", function() {
        console.log("Top banner loaded");
      });

      // Define sidebar with viewability tracking
      var sidebarSlot = dlApi.defineSlot("sidebar", "ad-sidebar");
      var view = dlApi.watchVisibility({elId: 'ad-sidebar'});
      view.on('viewed', function() {
        console.log("Sidebar ad viewable");
      });

      // Fetch all ads
      dlApi.fetch();
    });
  </script>
</body>
</html>

Copy this, replace YOURSITE/HOMEPAGE and tid, and you're live.