Skip to main content
retail media

Render Display Ads with the Web SDK

active
Audience: developerUpdated 2026-07-29

The SDK-rendering path for Display Ads. On this path the SDK fetches, renders, and tracks the ad — you add the SDK and an ad container; everything else is handled for you.

Best for web, PWA, blogs, and other browser-rendered surfaces. If your UI changes often or you need full control over rendering, use the Ad API directly instead — Request and render Display Ads.

Before you start, complete the shared Retail Media setup: define your media property, your ad slots, and get your connection, credentials & host URLs.

Step 1 — Add the Web SDK​

Paste the bootstrap snippet into the <head> of your site — full reference: Web SDK Quickstart. The only part you edit is the load() call:

Binoban.load({
  credentials: {
    apiKey: "PROJECT_API_KEY",
    sourceIdentifier: "PROJECT_SOURCE_IDENTIFIER",
  },
  host: {
    rtbPath: "YOUR_BINOBAN_SERVER_RTB_URL",
    sdkPath: "YOUR_BINOBAN_SERVER_SDK_URL",
    apiPath: "YOUR_BINOBAN_SERVER_API_URL",
  },
});

It loads asynchronously, so it won't affect page-load speed. On load it automatically assigns an anonymousId (before and regardless of any identify call).

Step 2 — Identify the user (optional, recommended)​

Anonymous visitors are fine — the SDK already assigned an anonymousId on load. If you do know who the user is, call identify (with a userId such as a phone number) for more precise targeting and attribution. Call it after registration, after login, and on info changes:

Binoban.identify("jdUserId", {
  name: "John Doe",
  email: "jdoe@example.com",
});

See Web SDK reference → Identity for the full reference.

Step 3 — Place the ad container​

Drop a container where you want an ad. data-bob-id is the ad slot ID of a Display Ads slot you created in Define ad slots:

<div data-bob-id="12"></div>

A Sponsored Ads slot ID placed here renders nothing — the SDK doesn't serve that family.

What the SDK does automatically​

For a Display Ads slot, the SDK:

  1. Reads data-bob-id and loads that slot's configuration.
  2. Fetches and renders the banner or native ad.
  3. Fires the impression event when the ad is viewable, and the click event on interaction.

You write no tracking calls on this path — ads_impression and ads_click fire automatically. If a slot has no eligible ad, nothing is shown; keeping campaigns active to fill it is the campaign manager's responsibility. See Track ad impressions and clicks for the full event reference.

Step 4 — Customize how the ads look (optional)​

The default rendering works as-is, so you can stop here. To make ads match your site, the SDK gives you three levers — CSS class names on the markup it renders, per-slot display options configured on the platform, and custom creative templates when you need to control the markup itself. All three keep the SDK's fetching and tracking intact.

See Web SDK Ad Customization for the full reference.

Last updated on