l
The server item's layout (l) picks the renderer — what the creative is.
Each card below runs the real SDK against a sample item, shows the exact server payload, and logs the
instance events. Combine any of these with a placement behavior — the two
are orthogonal.
Demo creatives — clicks are disabled. Flip the live toggle on the living demo to see real fill.
l:'banner'Industry names: display banner, image ad.
Good for: the workhorse of display — every IAB size, guaranteed render, image + clickthrough with impression/click/viewability tracking built in.
{ "r": "…", "l": "banner", "e": "inline", "w": 300, "h": 250,
"md": { "img": "https://cdn/creative.jpg", "url": "https://…",
"cpm_t": ["…"], "cpc_c": ["…"] } }l:'img'Industry names: static image, pixel-perfect image ad.
Good for: the minimal creative — one image, one link, nothing else. No lazy machinery, no wrapper markup.
{ "r": "…", "l": "img", "w": 300, "h": 250,
"md": { "img": "https://cdn/creative.jpg", "url": "https://…" } }s:1Industry names: viewability-gated load, lazy load.
Good for: paying only for viewable impressions — the image bytes load when the slot actually scrolls into view. Watch the network panel: this one loaded on scroll.
{ "r": "…", "l": "banner", "s": 1,
"md": { "img": "…", "url": "…" } }e:'iframe'Server-driven isolation: friendly iframe vs shadow DOM.
Good for: third-party markup — the server marks the item e:'iframe' and the SDK walls it into a friendly iframe. Inspect this unit: the creative lives in an <iframe>, the previous cards in a shadow root.
{ "r": "…", "l": "banner", "e": "iframe", "w": 300, "h": 250, "md": { … } }l:'responsive'Industry names: HTML5 ad, rich media, custom creative.
Good for: anything an image can't do. md.html carries self-contained HTML5 that fills the slot box — scripts run, styles stay walled off in the friendly iframe. The counter below is the creative's own JS, live.
{ "r": "…", "l": "responsive", "e": "iframe", "w": 336, "h": 280,
"md": { "html": "<div>…any HTML5, scripts included…</div>", "url": "…" } }l:'embed' · kind:'dsp'Industry names: carousel, swipe gallery, 3D cube, scratch & peel — every rich-media effect.
Good for: effects live in the creative, not the SDK — the SDK adds zero bytes for them. This card embeds a self-contained HTML5 swipe carousel hosted as a plain page. Needs https (on plain-http dev you'll see the error event instead — that's the SDK refusing an insecure embed, working as designed).
{ "r": "…", "l": "embed", "w": 336, "h": 280,
"em": { "u": "https://cdn/creatives/carousel.htm", "kind": "dsp" } }Server-filled macros — ${title} ${img} ${cta} ${url} ${spons} ${desc} —
render editorial-looking units without any creative production. Good for: in-feed and in-article
placements that must match the page.
layout1 · tall cardlayout2 · striplayout3 · half pagelayout4 · billboardlayout5 · sponsored storyl:'g'Macros: ${title} ${desc} ${adv} ${url} ${more}.
Good for: text-forward feed units and search-like placements.
{ "r": "…", "l": "layout4", // layout1…layout5 | g
"w": 970, "h": 250,
"md": { "title": "…", "desc": "…", "cta": "…", "spons": "…",
"adv": "…", "more": "…", "img": "https://cdn/product.jpg", "url": "…" } }slot()VAST-normalized v payload — skip offset, quartile tracking, OM & SIMID
supported. Three placements; the content player is a separate surface.
placement:'inline'Industry names: outstream, in-article video.
Good for: video revenue on pages with no video content — the unit builds its own muted stage in the article flow. This one is skippable after 5s (sk:1, so:5).
{ "r": "…", "l": "video", "w": 640, "h": 360,
"v": { "mf": [{ "u": "https://cdn/ad.mp4", "t": "video/mp4" }],
"d": 15, "sk": 1, "so": 5, "ct": "https://…", "trk": { … } } }placement:'overlay'Industry names: pre-roll gate, modal video.
Good for: gating premium content — full-viewport modal with countdown and skip. Runs on demand so it doesn't hijack this page:
placement:'instream'Industry names: pre/mid-roll, instream.
Good for: real video pages — the ad pauses your player, overlays it, and resumes the content when done. The video below is publisher content:
l:'audio'Industry names: audio ad, podcast spot.
Good for: podcast/radio-style pages — a compact control bar in your layout. Same quartile/skip event model as video.
{ "r": "…", "l": "audio",
"v": { "mf": [{ "u": "https://cdn/spot.mp3", "t": "audio/mpeg" }], "d": 15 } }Good for: pages with no obvious slot — with no target, the SDK creates its own bottom bar. Runs on demand:
l:'embed' · kind:'yt'postMessage bridge — quartile events without any Google script on your page.
Good for: campaigns whose asset already lives on YouTube. The SDK embeds youtube-nocookie.com and maps player state to the standard start → firstquartile → … → complete events (watch the chip). Runs on demand:
{ "r": "…", "l": "embed", "w": 640, "h": 360,
"em": { "u": "https://www.youtube-nocookie.com/embed/<id>?enablejsapi=1…", "kind": "yt" } }fit:'scale'Good for: a fixed-size creative in a smaller box — object-fit emulation for HTML/iframe creatives, downscale-only. This 970×250 billboard is served into a narrow column; drag the corner to resize it:
{ "r": "…", "l": "banner", "w": 970, "h": 250, "fit": "scale", "md": { … } }b / w2/h2Good for: running expandables/pushdowns with zero page changes — the item itself carries the behavior. Live demo on the behaviors page, including the precedence rule (client behavior config beats item b).
mdsServer-side only — a legacy array of tracking sets (cpm_t/cpc_c/cpv) read when md is absent. It is not a multi-creative field: the creative always comes from md, so there is nothing to render here.