Campaign SDK

Ship your first campaign decision

Create a restricted installation, add a declared slot to your site, and let the SDK apply a published campaign arm without giving it access to the rest of the page.

Create an SDK installation

Open the campaign Settings tab, create a Customer page SDK installation, and register every exact origin that will call the runtime. Use origins such as https://www.example.com. Paths, wildcards, credentials, query strings, and fragments are rejected.

Add an explicit creative slot

A slot is ordinary baseline HTML marked with a data-tday-slot. Only descendants marked with data-tday-field can receive published field values.

HTML

<section data-tday-slot="homepage-hero">
  <p data-tday-field="eyebrow">The original eyebrow</p>
  <h1 data-tday-field="title">The original headline</h1>
  <img data-tday-field="product" src="/product.webp" alt="Product on a desk">
  <a data-tday-field="cta" href="/signup">Start now</a>
</section>

Publish a campaign release whose direct arm includes a matching slot manifest. See the creative slot guide for manifests, fingerprints, and supported fields.

Install and initialize

Confirm that version 0.1.0 appears in the npm package listing, then pin it exactly. If it is not listed, use a reviewed artifact supplied by tday instead. Pass the public key and the published campaign slug copied from campaign settings.

Terminal, when version 0.1.0 is listed on npm

bun add @designtday/campaign-sdk@0.1.0

TypeScript

import { init } from "@designtday/campaign-sdk";

const campaign = init({
  siteKey: "td_pub_your_public_installation_key",
  campaign: "homepage-launch",
  consent: "unknown",
});

const decision = await campaign.ready;
if (!decision) {
  console.warn("Campaign decision was not available");
} else {
  console.log("Applied assignments", decision.appliedTokens);
}

Initialization automatically decides for the current pathname and same-document SPA navigation. Set autoDecide: false when your application should request decisions itself.

Connect consent

Unknown and denied consent still allow a deterministic decision, but the SDK suppresses automatic exposure. Update the client when your consent manager resolves the visitor choice.

TypeScript

consentManager.onChange((analyticsAllowed) => {
  campaign.setConsent(analyticsAllowed ? "granted" : "denied");
});

Add outcome reporting

Browser track() calls are unverified reporting events. Send an important primary conversion from your trusted backend if it should guide automatic allocation.

Browser

const eventId = campaign.track("signup_started", {
  eventId: "signup_attempt_01J8M6Y7QK",
  properties: { plan: "team" },
});

console.log("Queued event", eventId);

Script tag preview

If tday provides the reviewed IIFE artifact, copy the versioned file to your own static host and use the matching hash from dist/sri.json. Waiting for DOMContentLoadedensures the deferred SDK runs before initialization.

HTML

<script
  src="/assets/tday-0.1.0.min.js"
  integrity="sha384-REPLACE_WITH_DIST_SRI_VALUE"
  crossorigin="anonymous"
  defer
></script>
<script nonce="YOUR_CSP_NONCE">
  window.addEventListener("DOMContentLoaded", function () {
    window.tday.init({
      siteKey: "td_pub_your_public_installation_key",
      campaign: "homepage-launch",
      consent: "unknown"
    });
  });
</script>

Creative slots →Events and attribution →Server conversions →