universal-ad-loader 0.1.2 → 0.2.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# 0.2.0
+
+**What's new**
+- `native` creatives: the ad server sends assets (title, body, image, icon, sponsored-by, call to action, rating, price) and UAL draws
+  them in the page inside a Shadow DOM, inheriting the site's font and colour. A "Sponsored" label is always shown. Assets are text,
+  never HTML; images and links must be http(s). Layouts: `card`, `list`, `compact`; style with the `--ual-native-*` CSS variables.
+- `video` creatives (out-stream): a muted `<video>` that starts when at least half of it is visible and pauses when it leaves the
+  screen, with a sound button. No audio autoplay. New trackers: `trackers.start` and `trackers.quartile.{firstQuartile,midpoint,thirdQuartile,complete}`,
+  each fired once, and a `videoEvent` event. Video viewability waits 2 seconds instead of 1 (unless the slot sets `viewability.durationMs`).
+- `UALExt.track(name)`: HTML creatives can fire the named trackers declared in `trackers.custom`. Undeclared names are ignored.
+- `slots.X.sticky`: a small banner anchored to the top or bottom edge with a close button. Only when the ad takes at most 30% of
+  the screen height (Better Ads); otherwise it stays in the page flow.
+- `width`/`height` are optional for `native` ads.
+
+**Good to know**
+- The old tags and configurations keep working unchanged.
+- Video quartiles use the player's `timeupdate`; the file must have a duration (a live recording without one gives no quartiles).
+- The 2-second video viewability rule is the one commonly used for video; check it against the MRC guideline before relying on it for billing.
+
 # 0.1.2
 
 **Changes**

package/README.md

@@ -1,11 +1,11 @@
-# UAL — Universal Ad Loader
+# UAL — Universal Ad Loader [![NPM version](https://img.shields.io/npm/v/universal-ad-loader)](https://www.npmjs.com/package/universal-ad-loader) [![Downloads](https://img.shields.io/npm/dm/universal-ad-loader)](https://www.npmjs.com/package/universal-ad-loader) [![Node version](https://img.shields.io/node/v/universal-ad-loader)](https://www.npmjs.com/package/universal-ad-loader) [![Bundle size](https://img.shields.io/bundlephobia/minzip/universal-ad-loader)](https://bundlephobia.com/package/universal-ad-loader) [![License](https://img.shields.io/npm/l/universal-ad-loader)](LICENSE)
 
 One tag per site. It handles slots, centralized configuration, TCF consent, lazy loading, waterfalls across providers (adapters), sandboxed rendering, viewability and events. ~10 KB gzip.
 
 ## Installing on a site
 
 ```html
-<script async src="https://adcdn.yourdomain.net/ual.min.js"
+<script async src="https://cdn.jsdelivr.net/npm/universal-ad-loader@0.1.2/dist/ual.min.js"
         data-config="https://adcdn.yourdomain.net/config/site_123.json"></script>
 
 <div data-ad-slot="top"></div>
@@ -29,7 +29,7 @@ One tag per site. It handles slots, centralized configuration, TCF consent, lazy
     });
   });
 </script>
-<script async src="https://adcdn.yourdomain.net/ual.min.js"></script>
+<script async src="https://cdn.jsdelivr.net/npm/universal-ad-loader@0.1.2/dist/ual.min.js"></script>
 
 <div data-ad-slot="top"></div>
 ```
@@ -37,8 +37,9 @@ One tag per site. It handles slots, centralized configuration, TCF consent, lazy
 - Use either `data-config` or `init(...)`, not both: a second `init` is ignored with a warning.
 - The configuration lives in the page HTML, so changing it means redeploying the page (with a JSON on the CDN you just replace the file). `u.init('https://.../site_123.json')` also works if you want to choose the URL at runtime.
 - An inline script needs `'unsafe-inline'` or a nonce in the page's CSP; with a strict CSP prefer the external JSON.
+- **Components (React, Next.js, Vue, Astro):** the same applies, and inline is already the default. The `config` prop takes an object (inline) or the URL of a JSON; Astro's `UalBundled` writes the object into an `application/json` block, which works even with a strict CSP. See `docs/libreria.md`.
 
-> **What to upload to the CDN:** the loader (`dist/ual.min.js`) and one configuration JSON per site, with the right headers: see `docs/cdn.md`.
+> **Where the files live:** the loader is served for free by [jsDelivr](https://www.jsdelivr.com/) straight from the npm package (nothing to upload; pin the version in the URL, as above). Only the configuration JSON, one per site, goes on your own CDN with the right headers: see `docs/cdn.md`.
 
 ## Configuration (JSON served from the CDN)
 
@@ -123,6 +124,36 @@ Messages are accepted only from the slot's own iframe (checked on `event.source`
 - `src` (image), `url` (url), `clickUrl` and all `trackers`: only `http:`/`https:` (and `data:image/` for `src`). No `javascript:`.
 - Sandbox: never `allow-same-origin` for `image`/`html`; never `allow-top-navigation` (a creative cannot redirect the page; `target=_blank` links open a popup). For `type:'url'`, `allow-same-origin` is kept (legacy servers need it) **only if the URL has a different origin from the page**; if it is the same origin it is removed. A creative's `sandbox` override is filtered with the same rules.
 
+## Native, video and sticky
+
+Besides `image`, `html` and `url`, an ad can be `native` or `video`.
+
+```json
+{ "slotId": "feed#1", "type": "native", "clickUrl": "https://ads/c?t=SIGNED",
+  "native": { "title": "A headline", "body": "Two lines of text", "sponsoredBy": "ACME",
+              "cta": "Learn more", "image": { "src": "https://cdn/.../main.jpg", "width": 1200, "height": 628 },
+              "icon": "https://cdn/.../icon.png", "layout": "card" },
+  "trackers": { "impression": ["https://ads/i?t=..."], "viewable": ["https://ads/v?t=..."] } }
+```
+
+The assets are plain data (never HTML). UAL draws them in the page inside a Shadow DOM, so the card inherits the site's font and colour;
+a "Sponsored" label is always shown. Style it with CSS variables on the slot: `--ual-native-bg`, `--ual-native-border`,
+`--ual-native-radius`, `--ual-native-accent`, `--ual-native-accent-text`. Title is limited to 150 characters, body to 300 (longer text is cut).
+
+```json
+{ "slotId": "article#1", "type": "video", "src": "https://cdn/.../ad.mp4", "mime": "video/mp4", "poster": "https://cdn/.../p.jpg",
+  "width": 640, "height": 360, "clickUrl": "https://ads/c?t=SIGNED",
+  "trackers": { "impression": ["..."], "viewable": ["..."], "start": ["..."],
+                "quartile": { "firstQuartile": ["..."], "midpoint": ["..."], "thirdQuartile": ["..."], "complete": ["..."] } } }
+```
+
+The video starts **muted** when at least half of it is visible and pauses when it is not; the visitor can turn the sound on. Each tracker fires once.
+The `videoEvent` event reports `start`, `firstQuartile`, `midpoint`, `thirdQuartile` and `complete`. Video is counted as viewable after 2 s in view (set `viewability.durationMs` on the slot to change it).
+
+`UALExt.track(name)` lets an HTML creative fire a named tracker declared in `trackers.custom` (`{ "engaged": ["https://ads/e?t=..."] }`); names that were not declared are ignored.
+
+`slots.X.sticky` (`true`, `"top"`, `"bottom"` or `{ "position": "bottom" }`) anchors a small banner to the screen edge with a close button. It only applies if the ad is at most 30% of the screen height; larger ads stay in the page.
+
 ## JavaScript API
 
 ```js
@@ -209,7 +240,7 @@ To work on one part at a time (this is what CI does, in parallel jobs):
 |---|---|---|
 | `npm run lint` | oxlint on the sources | base dependencies only |
 | `npm run test:node` | `test/package.mjs` | base dependencies only (no browser) |
-| `npm run test:browser` | `test/run.mjs` and `test/regression.mjs` | + Chromium |
+| `npm run test:browser` | `test/run.mjs`, `test/regression.mjs` and `test/formats.mjs` | + Chromium |
 | `npm run test:frameworks` | `test/wrappers.mjs` | + `test/heavy` and Chromium |
 
 Every suite also writes a JUnit report to `test-results/` (CI shows it in the Tests tab).
@@ -218,6 +249,7 @@ Every suite also writes a JUnit report to `test-results/` (CI shows it in the Te
 |---|---|
 | `test/run.mjs` | loader e2e with a fake ad server and a fake CMP: batching per provider, waterfall to house, lazy load, `sizeMapping`, consent, `pageRules`, trackers, expand, sandbox |
 | `test/regression.mjs` | render security, `setTargeting`, late CMP, `contextual` providers, slots moved/closed in the DOM, refresh, `pageView`, the `gpt` adapter (with a `googletag` stub), the `iframe` adapter with the existing systems |
+| `test/formats.mjs` | `native`, `video` (muted autoplay when visible, pause, quartiles once each, sound button), `UALExt.track` and `sticky`, in Chromium with a real video file; plus the validation rules |
 | `test/package.mjs` | the package: import in Node (ESM and CJS) without `window`, server rendering of React and Vue, `exports` map, tarball contents (`npm pack`), types (correct usages compile, wrong ones fail) |
 | `test/wrappers.mjs` | the components in a real browser, with server rendering and delayed hydration: React (in the bundle, from CDN, Next version), Vue, **Next.js 16** (App Router, production build) and **Astro 7** (View Transitions); plus a check that demonstrates the problem the components avoid |
 

package/dist/index.cjs

@@ -299,6 +299,247 @@ function normalize(tc, opts) {
   return out;
 }
 
+// src/core/native.js
+var NATIVE_LIMITS = { title: 150, body: 300, sponsoredBy: 60, cta: 30, displayUrl: 100, price: 30, label: 20 };
+var NATIVE_LAYOUTS = ["card", "list", "compact"];
+var clip = (v, n) => typeof v === "string" ? v.trim().slice(0, n) : "";
+function normalizeNative(raw, safeUrl2) {
+  if (!raw || typeof raw !== "object") return { ok: false, reason: "native mancante" };
+  const title = clip(raw.title, NATIVE_LIMITS.title);
+  if (!title) return { ok: false, reason: "native: titolo mancante" };
+  const img = (v) => {
+    const o = typeof v === "string" ? { src: v } : v;
+    const src = o && typeof o === "object" ? safeUrl2(o.src, true) : null;
+    if (!src) return null;
+    const dim2 = (n) => {
+      const x = Math.round(Number(n));
+      return x > 0 && x <= 2e3 ? x : 0;
+    };
+    return { src, width: dim2(o.width), height: dim2(o.height) };
+  };
+  const rating = Number(raw.rating);
+  return {
+    ok: true,
+    native: {
+      title,
+      body: clip(raw.body, NATIVE_LIMITS.body),
+      sponsoredBy: clip(raw.sponsoredBy, NATIVE_LIMITS.sponsoredBy),
+      cta: clip(raw.cta, NATIVE_LIMITS.cta),
+      displayUrl: clip(raw.displayUrl, NATIVE_LIMITS.displayUrl),
+      price: clip(raw.price, NATIVE_LIMITS.price),
+      rating: Number.isFinite(rating) && rating >= 0 && rating <= 5 ? rating : null,
+      image: img(raw.image),
+      icon: img(raw.icon),
+      layout: NATIVE_LAYOUTS.includes(raw.layout) ? raw.layout : "card",
+      label: clip(raw.label, NATIVE_LIMITS.label) || "Sponsored"
+    }
+  };
+}
+var STYLE = `
+:host{display:block;max-width:100%;font:inherit;color:inherit;line-height:1.35}
+*{box-sizing:border-box}
+.card{display:flex;flex-direction:column;gap:.5em;padding:.75em;text-decoration:none;color:inherit;border:1px solid var(--ual-native-border,rgba(128,128,128,.35));border-radius:var(--ual-native-radius,8px);background:var(--ual-native-bg,transparent);position:relative}
+a.card:hover .title{text-decoration:underline}
+.label{font-size:.72em;letter-spacing:.04em;text-transform:uppercase;opacity:.75}
+.main{display:block;width:100%;height:auto;border-radius:calc(var(--ual-native-radius,8px) - 2px);background:rgba(128,128,128,.12)}
+.row{display:flex;gap:.6em;align-items:flex-start}
+.icon{width:2.4em;height:2.4em;flex:none;border-radius:6px;object-fit:cover}
+.title{font-weight:700;font-size:1.05em}
+.body{opacity:.9;font-size:.92em}
+.meta{font-size:.8em;opacity:.7}
+.cta{align-self:flex-start;font-weight:600;font-size:.9em;padding:.35em .8em;border-radius:999px;background:var(--ual-native-accent,#2563eb);color:var(--ual-native-accent-text,#fff)}
+.price{font-weight:600}
+.layout-list{flex-direction:row;align-items:flex-start}
+.layout-list .main{width:35%;max-width:180px;flex:none}
+.layout-list .text{display:flex;flex-direction:column;gap:.35em;min-width:0}
+.layout-compact .main{display:none}
+`;
+function el(tag, cls, text) {
+  const e = document.createElement(tag);
+  if (cls) e.className = cls;
+  if (text != null) e.textContent = text;
+  return e;
+}
+function image(i, cls, alt) {
+  const im = el("img", cls);
+  im.src = i.src;
+  im.alt = alt || "";
+  im.loading = "lazy";
+  im.referrerPolicy = "strict-origin-when-cross-origin";
+  if (i.width && i.height) {
+    im.width = i.width;
+    im.height = i.height;
+  }
+  return im;
+}
+function renderNative(container, ad, { onClick } = {}) {
+  const n = ad.native;
+  const host = el("div", "ual-native");
+  const root = host.attachShadow ? host.attachShadow({ mode: "open" }) : host;
+  const style = document.createElement("style");
+  style.textContent = STYLE;
+  root.appendChild(style);
+  const card = ad.clickUrl ? el("a", `card layout-${n.layout}`) : el("div", `card layout-${n.layout}`);
+  if (ad.clickUrl) {
+    card.href = ad.clickUrl;
+    card.target = "_blank";
+    card.rel = "noopener noreferrer sponsored nofollow";
+    card.addEventListener("click", () => {
+      if (onClick) onClick();
+    });
+  }
+  card.appendChild(el("span", "label", n.label));
+  if (n.image) card.appendChild(image(n.image, "main", n.title));
+  const text = el("div", "text");
+  const head = el("div", "row");
+  if (n.icon) head.appendChild(image(n.icon, "icon", ""));
+  const titles = el("div");
+  titles.appendChild(el("div", "title", n.title));
+  if (n.sponsoredBy) titles.appendChild(el("div", "meta", n.sponsoredBy));
+  head.appendChild(titles);
+  text.appendChild(head);
+  if (n.body) text.appendChild(el("div", "body", n.body));
+  const meta = [n.displayUrl, n.rating !== null ? `\u2605 ${n.rating}` : ""].filter(Boolean).join(" \xB7 ");
+  if (meta) text.appendChild(el("div", "meta", meta));
+  if (n.price) text.appendChild(el("div", "price", n.price));
+  if (n.cta) text.appendChild(el("span", "cta", n.cta));
+  card.appendChild(text);
+  root.appendChild(card);
+  container.innerHTML = "";
+  container.appendChild(host);
+  return { el: host, destroy: () => host.remove() };
+}
+
+// src/core/video.js
+var QUARTILES = [["firstQuartile", 0.25], ["midpoint", 0.5], ["thirdQuartile", 0.75]];
+var QUARTILE_NAMES = ["firstQuartile", "midpoint", "thirdQuartile", "complete"];
+var PLAY_THRESHOLD = 0.5;
+function quartileHits(fired, currentTime, duration) {
+  if (!(duration > 0) || !(currentTime >= 0)) return [];
+  const f = currentTime / duration;
+  const hits = [];
+  for (const [name, at] of QUARTILES) {
+    if (f >= at && !fired.has(name)) {
+      fired.add(name);
+      hits.push(name);
+    }
+  }
+  return hits;
+}
+function normalizeVideo(raw, safeUrl2) {
+  const src = safeUrl2(raw.src);
+  if (!src) return { ok: false, reason: "video: src non valido (ammessi solo http e https)" };
+  return { ok: true, video: { src, poster: safeUrl2(raw.poster, true) || "", mime: typeof raw.mime === "string" && /^video\/[\w.+-]+$/.test(raw.mime) ? raw.mime : "" } };
+}
+function btn(label) {
+  const b = document.createElement("button");
+  b.type = "button";
+  b.textContent = label;
+  b.style.cssText = "position:absolute;right:8px;bottom:8px;z-index:2;padding:4px 10px;border:0;border-radius:999px;background:rgba(0,0,0,.65);color:#fff;font:600 12px/1.4 system-ui,sans-serif;cursor:pointer";
+  return b;
+}
+function renderVideo(container, ad, { onClick, onEvent, onError } = {}) {
+  const wrap = document.createElement("div");
+  wrap.className = "ual-video";
+  wrap.style.cssText = `position:relative;display:block;margin:0 auto;width:${ad.width}px;max-width:100%;aspect-ratio:${ad.width}/${ad.height};background:#000;overflow:hidden`;
+  const v = document.createElement("video");
+  v.muted = true;
+  v.defaultMuted = true;
+  v.playsInline = true;
+  v.setAttribute("playsinline", "");
+  v.preload = "metadata";
+  v.disablePictureInPicture = true;
+  v.controls = false;
+  v.style.cssText = "display:block;width:100%;height:100%;object-fit:contain";
+  if (ad.video.poster) v.poster = ad.video.poster;
+  const source = document.createElement("source");
+  source.src = ad.video.src;
+  if (ad.video.mime) source.type = ad.video.mime;
+  v.appendChild(source);
+  wrap.appendChild(v);
+  const label = document.createElement("span");
+  label.textContent = "Advertisement";
+  label.style.cssText = "position:absolute;left:8px;top:8px;z-index:2;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.55);color:#fff;font:600 11px/1.4 system-ui,sans-serif";
+  wrap.appendChild(label);
+  if (ad.clickUrl) {
+    const a = document.createElement("a");
+    a.href = ad.clickUrl;
+    a.target = "_blank";
+    a.rel = "noopener noreferrer sponsored nofollow";
+    a.setAttribute("aria-label", "Open the advertiser page");
+    a.style.cssText = "position:absolute;inset:0;z-index:1";
+    a.addEventListener("click", () => {
+      if (onClick) onClick();
+    });
+    wrap.appendChild(a);
+  }
+  const sound = btn("Sound on");
+  sound.setAttribute("aria-label", "Turn sound on");
+  sound.addEventListener("click", () => {
+    v.muted = !v.muted;
+    sound.textContent = v.muted ? "Sound on" : "Sound off";
+    sound.setAttribute("aria-label", v.muted ? "Turn sound on" : "Turn sound off");
+  });
+  wrap.appendChild(sound);
+  const trackers = ad.trackers || {};
+  const fired = /* @__PURE__ */ new Set();
+  let started = false;
+  const emit = (name, urls) => {
+    fire(urls);
+    if (onEvent) onEvent(name);
+  };
+  v.addEventListener("playing", () => {
+    if (!started) {
+      started = true;
+      emit("start", trackers.start);
+    }
+  });
+  v.addEventListener("timeupdate", () => {
+    quartileHits(fired, v.currentTime, v.duration).forEach((n) => emit(n, trackers.quartile && trackers.quartile[n]));
+  });
+  v.addEventListener("ended", () => {
+    quartileHits(fired, v.duration, v.duration).forEach((n) => emit(n, trackers.quartile && trackers.quartile[n]));
+    if (!fired.has("complete")) {
+      fired.add("complete");
+      emit("complete", trackers.quartile && trackers.quartile.complete);
+    }
+  });
+  v.addEventListener("error", () => {
+    if (onError) onError(new Error("video: file non riproducibile"));
+  });
+  let inView = false;
+  const sync = () => {
+    if (v.ended) return;
+    if (inView && document.visibilityState === "visible") {
+      const p = v.play();
+      if (p && p.catch) p.catch(() => {
+      });
+    } else v.pause();
+  };
+  const io = "IntersectionObserver" in window ? new IntersectionObserver((entries) => {
+    entries.forEach((en) => {
+      inView = en.intersectionRatio >= PLAY_THRESHOLD;
+    });
+    sync();
+  }, { threshold: [0, PLAY_THRESHOLD, 1] }) : null;
+  if (io) io.observe(wrap);
+  document.addEventListener("visibilitychange", sync);
+  container.innerHTML = "";
+  container.appendChild(wrap);
+  return {
+    el: wrap,
+    destroy: () => {
+      if (io) io.disconnect();
+      document.removeEventListener("visibilitychange", sync);
+      v.pause();
+      v.removeAttribute("src");
+      source.remove();
+      v.load();
+      wrap.remove();
+    }
+  };
+}
+
 // src/core/render.js
 var DEFAULT_SANDBOX = "allow-scripts allow-popups allow-popups-to-escape-sandbox";
 var MAX_DIM = 2e3;
@@ -321,12 +562,20 @@ function safeUrl(u, allowDataImage) {
 function cleanList(list) {
   return (Array.isArray(list) ? list : []).map((u) => safeUrl(u)).filter(Boolean);
 }
+function cleanCustom(custom) {
+  const out = {};
+  if (!custom || typeof custom !== "object") return out;
+  Object.keys(custom).slice(0, 20).forEach((name) => {
+    if (/^[\w-]{1,40}$/.test(name)) out[name] = cleanList(custom[name]);
+  });
+  return out;
+}
 function normalizeAd(raw) {
   if (!raw || typeof raw !== "object") return { ok: false, reason: "annuncio non valido" };
   const type = raw.type || (raw.url ? "url" : raw.src ? "image" : "html");
   const width = dim(raw.width);
   const height = dim(raw.height);
-  if (!width || !height) return { ok: false, reason: `dimensioni non valide (${raw.width}x${raw.height}, max ${MAX_DIM})` };
+  if (type !== "native" && (!width || !height)) return { ok: false, reason: `dimensioni non valide (${raw.width}x${raw.height}, max ${MAX_DIM})` };
   const t = raw.trackers || {};
   const ad = {
     type,
@@ -334,7 +583,14 @@ function normalizeAd(raw) {
     height,
     alt: raw.alt == null ? void 0 : String(raw.alt),
     clickUrl: safeUrl(raw.clickUrl) || "",
-    trackers: { impression: cleanList(t.impression), viewable: cleanList(t.viewable), click: cleanList(t.click) },
+    trackers: {
+      impression: cleanList(t.impression),
+      viewable: cleanList(t.viewable),
+      click: cleanList(t.click),
+      start: cleanList(t.start),
+      quartile: Object.fromEntries(QUARTILE_NAMES.map((n) => [n, cleanList(t.quartile && t.quartile[n])])),
+      custom: cleanCustom(t.custom)
+    },
     sandbox: typeof raw.sandbox === "string" ? raw.sandbox : void 0
   };
   if (type === "image") {
@@ -346,6 +602,14 @@ function normalizeAd(raw) {
   } else if (type === "html") {
     if (typeof raw.html !== "string" || !raw.html) return { ok: false, reason: "html mancante" };
     ad.html = raw.html;
+  } else if (type === "native") {
+    const n = normalizeNative(raw.native, safeUrl);
+    if (!n.ok) return n;
+    ad.native = n.native;
+  } else if (type === "video") {
+    const v = normalizeVideo(raw, safeUrl);
+    if (!v.ok) return v;
+    ad.video = v.video;
   } else {
     return { ok: false, reason: "tipo sconosciuto: " + type };
   }
@@ -380,7 +644,8 @@ window.UALExt={
   expand:function(w,h){s({cmd:'resize',w:w,h:h,expanded:true});},
   collapse:function(){s({cmd:'collapse'});},
   close:function(){s({cmd:'close'});},
-  click:function(){s({cmd:'click'});if(window.clickTag)window.open(window.clickTag,'_blank');}
+  click:function(){s({cmd:'click'});if(window.clickTag)window.open(window.clickTag,'_blank');},
+  track:function(n){s({cmd:'track',name:String(n)});}
 };
 })();</script>`;
 }
@@ -423,6 +688,11 @@ function renderInFrame(container, ad, { slotId, onClick, onClose } = {}) {
       fire(ad.trackers && ad.trackers.click);
       if (onClick) onClick();
     },
+    // UALExt.track(nome): solo i nomi dichiarati dall'ad server nella risposta
+    onTrack: (name) => {
+      const custom = ad.trackers && ad.trackers.custom;
+      if (typeof name === "string" && custom && Object.hasOwn(custom, name)) fire(custom[name]);
+    },
     onClose
   });
   container.innerHTML = "";
@@ -458,12 +728,42 @@ function onMessage(e) {
     case "click":
       f.onClick();
       break;
+    case "track":
+      f.onTrack(d.name);
+      break;
     default:
   }
 }
 
+// src/core/sticky.js
+var STICKY_MAX_SCREEN_SHARE = 0.3;
+var STICKY_POSITIONS = ["bottom", "top"];
+function stickyAllowed(adHeight, viewportHeight) {
+  return adHeight > 0 && viewportHeight > 0 && adHeight <= viewportHeight * STICKY_MAX_SCREEN_SHARE;
+}
+function stickyPosition(cfg) {
+  if (!cfg) return null;
+  const p = typeof cfg === "string" ? cfg : cfg && typeof cfg === "object" ? cfg.position : "bottom";
+  return STICKY_POSITIONS.includes(p) ? p : "bottom";
+}
+function applySticky(el2, position, onClose) {
+  const saved = el2.style.cssText;
+  el2.style.cssText += `;position:fixed;left:0;right:0;${position}:0;z-index:2147483000;text-align:center;margin:0;padding:0`;
+  const close = document.createElement("button");
+  close.type = "button";
+  close.textContent = "\xD7";
+  close.setAttribute("aria-label", "Close advertisement");
+  close.style.cssText = `position:absolute;right:6px;${position === "bottom" ? "top" : "bottom"}:-26px;width:26px;height:26px;border:0;border-radius:6px 6px 0 0;background:rgba(0,0,0,.7);color:#fff;font:16px/26px system-ui,sans-serif;cursor:pointer`;
+  close.addEventListener("click", onClose);
+  el2.appendChild(close);
+  return () => {
+    el2.style.cssText = saved;
+    close.remove();
+  };
+}
+
 // src/core/viewability.js
-function watchViewability(el, { threshold = 0.5, durationMs = 1e3 } = {}, onViewable) {
+function watchViewability(el2, { threshold = 0.5, durationMs = 1e3 } = {}, onViewable) {
   if (!("IntersectionObserver" in window)) return () => {
   };
   let timer = null;
@@ -490,7 +790,7 @@ function watchViewability(el, { threshold = 0.5, durationMs = 1e3 } = {}, onView
   }, { threshold: [0, threshold, 1] });
   const onVis = () => document.visibilityState === "visible" && inView ? start() : stop();
   document.addEventListener("visibilitychange", onVis);
-  io.observe(el);
+  io.observe(el2);
   function cleanup() {
     stop();
     io.disconnect();
@@ -584,50 +884,50 @@ function createEngine(adapterRegistry) {
   function scan(root) {
     const list = [];
     if (root.nodeType === 1 && root.matches && root.matches("[data-ad-slot]")) list.push(root);
-    if (root.querySelectorAll) root.querySelectorAll("[data-ad-slot]").forEach((el) => list.push(el));
+    if (root.querySelectorAll) root.querySelectorAll("[data-ad-slot]").forEach((el2) => list.push(el2));
     list.forEach(maybeRegister);
   }
-  function maybeRegister(el) {
-    const id = el.dataset.ualId;
-    if (!id) return register(el);
+  function maybeRegister(el2) {
+    const id = el2.dataset.ualId;
+    if (!id) return register(el2);
     if (slots.has(id)) return;
-    if (FINAL_STATUS.has(el.dataset.ualStatus)) return;
-    resetEl(el);
-    register(el);
+    if (FINAL_STATUS.has(el2.dataset.ualStatus)) return;
+    resetEl(el2);
+    register(el2);
   }
-  function resetEl(el) {
-    delete el.dataset.ualId;
-    delete el.dataset.ualStatus;
-    el.querySelectorAll(":scope > .ual-label, :scope > .ual-creative").forEach((n) => n.remove());
-    el.classList.remove("ual-slot", "ual-filled");
-    el.style.display = "";
-    el.style.minHeight = "";
+  function resetEl(el2) {
+    delete el2.dataset.ualId;
+    delete el2.dataset.ualStatus;
+    el2.querySelectorAll(":scope > .ual-label, :scope > .ual-creative").forEach((n) => n.remove());
+    el2.classList.remove("ual-slot", "ual-filled");
+    el2.style.display = "";
+    el2.style.minHeight = "";
   }
-  function register(el) {
-    const name = el.getAttribute("data-ad-slot");
+  function register(el2) {
+    const name = el2.getAttribute("data-ad-slot");
     const slotCfg = cfg.slots[name];
-    el.dataset.ualId = name + "#" + ++seq2;
+    el2.dataset.ualId = name + "#" + ++seq2;
     if (!slotCfg) {
       log("Slot non configurato, ignorato:", name);
-      el.dataset.ualStatus = "unconfigured";
+      el2.dataset.ualStatus = "unconfigured";
       return;
     }
     if (slotCfg.enabled === false) {
       log("Slot disabilitato:", name);
-      el.dataset.ualStatus = "disabled";
-      collapse(el, slotCfg);
+      el2.dataset.ualStatus = "disabled";
+      collapse(el2, slotCfg);
       return;
     }
     let params = {};
     try {
-      params = el.dataset.adParams ? JSON.parse(el.dataset.adParams) : {};
+      params = el2.dataset.adParams ? JSON.parse(el2.dataset.adParams) : {};
     } catch (e) {
-      warn("data-ad-params non \xE8 JSON valido", el);
+      warn("data-ad-params non \xE8 JSON valido", el2);
     }
     const slot = {
-      instanceId: el.dataset.ualId,
+      instanceId: el2.dataset.ualId,
       name,
-      el,
+      el: el2,
       cfg: slotCfg,
       params,
       status: "idle",
@@ -639,23 +939,23 @@ function createEngine(adapterRegistry) {
     prepare(slot);
     bus.emit("slotRegistered", publicSlot(slot));
     const lazy = slotCfg.lazy !== void 0 ? slotCfg.lazy : cfg.lazy.enabled;
-    if (lazy && lazyIO) lazyIO.observe(el);
+    if (lazy && lazyIO) lazyIO.observe(el2);
     else enqueue(slot);
   }
   function prepare(slot) {
-    const { el, cfg: c } = slot;
-    if (c.minHeight) el.style.minHeight = c.minHeight + "px";
-    el.classList.add("ual-slot");
+    const { el: el2, cfg: c } = slot;
+    if (c.minHeight) el2.style.minHeight = c.minHeight + "px";
+    el2.classList.add("ual-slot");
     if (c.label) {
       const l = document.createElement("div");
       l.className = "ual-label";
       l.textContent = c.label;
       l.style.cssText = "font:10px/1.4 sans-serif;color:#888;text-align:center;text-transform:uppercase;letter-spacing:.05em";
-      el.appendChild(l);
+      el2.appendChild(l);
     }
     const box = document.createElement("div");
     box.className = "ual-creative";
-    el.appendChild(box);
+    el2.appendChild(box);
     slot.box = box;
   }
   function observeDom() {
@@ -780,7 +1080,7 @@ function createEngine(adapterRegistry) {
         const res = await withTimeout(adapter.request(req, pcfg, c), timeout, {});
         group.forEach((s, i) => {
           const raw = res[req[i].id];
-          if (!raw || !raw.html && !raw.src && !raw.url) {
+          if (!raw || !raw.html && !raw.src && !raw.url && !raw.native) {
             unfilled.push(s);
             return;
           }
@@ -792,14 +1092,18 @@ function createEngine(adapterRegistry) {
             return;
           }
           const ad = n.ad;
-          const handle = renderInFrame(s.box, ad, {
+          const onClick = () => {
+            fire(ad.trackers.click);
+            bus.emit("slotClick", publicSlot(s));
+          };
+          const handle = ad.type === "native" ? renderNative(s.box, ad, { onClick }) : ad.type === "video" ? renderVideo(s.box, ad, {
+            onClick,
+            onEvent: (name) => bus.emit("videoEvent", { ...publicSlot(s), event: name }),
+            onError: (error) => bus.emit("error", { provider: pid, slot: s.name, error })
+          }) : renderInFrame(s.box, ad, {
             slotId: s.instanceId,
             onClick: () => bus.emit("slotClick", publicSlot(s)),
-            onClose: () => {
-              destroySlot(s);
-              s.el.dataset.ualStatus = "closed";
-              collapse(s.el, s.cfg, true);
-            }
+            onClose: () => closeSlot(s)
           });
           s.cleanup.push(handle.destroy);
           fire(ad.trackers.impression);
@@ -826,6 +1130,14 @@ function createEngine(adapterRegistry) {
     s.el.style.display = "";
     bus.emit("slotRendered", { ...publicSlot(s), width: info.width, height: info.height, meta: info.meta });
     const vcfg = { ...cfg.viewability, ...s.cfg.viewability };
+    if (info.ad && info.ad.type === "video" && !(s.cfg.viewability && s.cfg.viewability.durationMs !== void 0)) {
+      vcfg.durationMs = Math.max(vcfg.durationMs, 2e3);
+    }
+    const pos = stickyPosition(s.cfg.sticky);
+    if (pos && info.height) {
+      if (stickyAllowed(info.height, window.innerHeight)) s.cleanup.push(applySticky(s.el, pos, () => closeSlot(s)));
+      else warn(`Slot "${s.name}": sticky ignorato, l'annuncio (${info.height}px) supera il 30% dello schermo`);
+    }
     const area = (info.width || 0) * (info.height || 0);
     if (area > LARGE_AD_AREA && !(s.cfg.viewability && s.cfg.viewability.threshold !== void 0)) {
       vcfg.threshold = Math.min(vcfg.threshold, 0.3);
@@ -845,11 +1157,11 @@ function createEngine(adapterRegistry) {
     collapse(s.el, s.cfg);
     bus.emit("slotEmpty", publicSlot(s));
   }
-  function collapse(el, c, force) {
+  function collapse(el2, c, force) {
     const doCollapse = force || (c.collapseEmpty !== void 0 ? c.collapseEmpty : cfg && cfg.collapseEmpty);
     if (doCollapse) {
-      el.style.display = "none";
-      el.style.minHeight = "";
+      el2.style.display = "none";
+      el2.style.minHeight = "";
     }
   }
   function clear(s) {
@@ -897,6 +1209,11 @@ function createEngine(adapterRegistry) {
     s.consentSkipped = false;
     enqueue(s);
   }
+  function closeSlot(s) {
+    destroySlot(s);
+    s.el.dataset.ualStatus = "closed";
+    collapse(s.el, s.cfg, true);
+  }
   function destroySlot(s) {
     callDestroy(s);
     clear(s);
@@ -1261,7 +1578,7 @@ var house_default = {
 };
 
 // src/lib.js
-var version = true ? "0.1.2" : "dev";
+var version = true ? "0.2.0" : "dev";
 function createUal() {
   const registry = new Map(Object.entries({
     json: json_default,