For partners
Embed a BoatDuty ad unit
BoatCards are BoatDuty's house display units. Drop a div where the ad belongs, load one script, and the tag fills the slot with the largest creative that fits. No cookies, no local storage, no identifiers, and no third-party requests.
Getting started
One div, one script
Put the div exactly where the ad belongs. The script can go anywhere on the page, once, however many slots you run.
Paste this
<div class="bd-embed" data-boat-card="300x250"></div>
<script async src="https://www.boatduty.com/embed/v1/boatcard.js"></script>The unit above is live — it is the same file this page documents, serving a real creative.
Ad units
Nine sizes
Every size is available to every slot. Ask for the ones that suit your layout.
| Size | Name | Notes |
|---|---|---|
300x250 | Box | The default in-article and sidebar unit. |
336x280 | Large box | A wider box for roomier sidebars. |
250x250 | Square | Fits narrow columns and grids. |
300x600 | Half page | A tall sidebar panel. |
160x600 | Skyscraper | A narrow vertical rail. |
728x90 | Full-width strip | The classic leaderboard. |
970x250 | Wide hero | A full-bleed banner on wide pages. |
320x100 | Mobile bar | A phone-width banner. |
320x50 | Slim mobile bar | The shortest unit offered. |
Configuration
Slot attributes
Everything is configured on the div itself. Only the first is required.
data-boat-cardRequired- One size, or a comma-separated list in order of preference. This is the only attribute a slot needs.
data-bd-slot- Names the position for reporting, for example sidebar or article-mid. Optional and free-form.
data-bd-rotate- Seconds between creative swaps. Values below 15 are raised to 15, and rotation pauses while the tab is hidden.
data-bd-group- Restricts the slot to one campaign. Leave it off to serve everything.
data-bd-stateSet by the tag- Written by the tag: q while queued, on once filled, empty when nothing served and the slot collapsed.
Layout
One slot, every viewport
List sizes widest first and the tag measures the container at render time, picking the largest that fits. If nothing fits, it falls back to the narrowest size you listed rather than leaving a hole.
<div data-boat-card="970x250,728x90,320x100,320x50"
data-bd-slot="leaderboard"></div>Single-page apps
The tag scans once on load. After a client-side route change, or when you inject a slot yourself, ask it to scan again. Pass an element to limit the scan to that subtree.
window.BoatCards && window.BoatCards.refresh();
window.BoatCards.refresh(document.getElementById('article-body'));Advanced
Serving it first-party
The tag resolves the manifest, creatives, and measurement pixel relative to its own script URL. Proxy /embed/v1/* under your own domain and point the script tag at your copy — everything else follows automatically, with no configuration.
# nginx
location /bd/ {
proxy_pass https://www.boatduty.com/embed/v1/;
proxy_set_header Host www.boatduty.com;
}
# then, in the page
<script async src="https://example.com/bd/boatcard.js"></script>Privacy
What gets counted
Counting is a 1x1 image request made by the browser when a unit renders, when it becomes viewable (half the pixels for one continuous second, the IAB/MRC display standard), and when it is clicked. Each request carries the creative id, the size, the hostname it ran on, and the tag version. Nothing identifies the reader, and the tag stores only a per-session count in sessionStorage so one person is not shown the same card all day.
Disclosure and link behaviour
Every unit carries an 'Ad' badge and opens in a new tab with rel="noopener noreferrer sponsored", so the link is labelled for search engines and the disclosure requirement is met without extra markup on your side.