Most ways of putting an ad on a website ask you to trust a lot of third-party JavaScript on your page. This post walks through a tag built the other way round: small, and unable to run code inside your page. I work on it, so take the enthusiasm with salt, but every claim below is checkable in the browser.
The whole integration
<script async src="https://cdn.adpluga.com/v1/tag.js"
data-adpluga-key="pk_test_kvhgusa3wauuklgogatyovhbohlpc"></script>
<div data-adpluga-slot="35490c85-1933-4764-bf04-647005ea6db5"></div>
That key and slot are the public demo ones: they serve test ads, nothing is charged, nothing counts toward any quota. Paste both lines into an HTML file and open it. On WordPress the same two lines go into a Custom HTML block; in Google Tag Manager, into a Custom HTML tag.
1. Discovery
The script reads its key from its own <script> element, then looks for every element with data-adpluga-slot. A MutationObserver keeps watching, so a slot rendered later by React, Vue or a router change is picked up without calling anything. If you need control, window.AdPluga.refresh(el) re-fetches a slot and window.AdPluga.destroy(el) tears one down.
2. One request per slot
Each slot makes one call to /v1/serve on the edge host. The response carries the creative and a signed token. If there is no advertiser for that space, the response is still an ad: a house ad from adPluga, so the page never shows an empty box.
3. The sandbox
The creative is rendered in an iframe with this attribute:
sandbox="allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"
There is no allow-scripts and no allow-same-origin. The ad cannot execute JavaScript, cannot read your cookies or storage, and cannot reach into your DOM. A click can still open the advertiser's page, but only because the user clicked. referrerpolicy="no-referrer" keeps your URLs out of the advertiser's logs.
The trade-off is that the creative cannot be interactive in the JavaScript sense. Carousel ads, for example, are built with CSS scroll-snap only. That cost about half a kilobyte and kept the tag at 4.4 KB gzipped.
4. Counting only what was seen
The tag reports an impression as viewable only when at least 50% of the ad was on screen for at least one second, the IAB definition. An ad that loaded at the bottom of a page nobody scrolled to is not reported as seen.
5. Test and live
The key prefix decides the mode: pk_test_ serves real test creatives with no billing, pk_live_ is the real thing and needs the site to be verified first (DNS record, meta tag or a file at the root).
Try it without an account
The playground has the demo key filled in. Press Render and watch the network tab: one serve call, one iframe, and the tracking call once the ad is in view.
A runnable copy of the HTML above is in github.com/adpluga/examples.
Top comments (0)