{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["admonition","tabs","tab"]},"redocly_category":"Products","product_name":"Engage Studio","type":"markdown"},"seo":{"title":"TD Web SDK Integration — In-Browser Messaging","description":"Learn how to install, initialize, and configure the TD Web SDK on your website to enable In-Browser Messaging with RT Personalization 2.0.","siteUrl":"https://docs.treasure.ai","lang":"en-US","jsonLd":{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://www.treasure.ai/","name":"Treasure AI","url":"https://www.treasure.ai/","logo":"https://www.treasure.ai/hubfs/assets/images/logos/primary-logo.svg"},{"@type":"WebSite","@id":"https://docs.treasure.ai/#website","name":"Treasure AI Documentation","url":"https://docs.treasure.ai/","inLanguage":["en","ja"],"publisher":{"@id":"https://www.treasure.ai/"}}]},"llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"td-web-sdk-integration","__idx":0},"children":["TD Web SDK Integration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This guide explains how to install the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["TD Web SDK"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td-web-sdk"]},") on your website and configure it for In-Browser Messaging. Complete this setup before creating campaigns in Engage Studio."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Who should read this"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This page is for ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["web developers"]}," who are adding the SDK to a website. Marketers who are creating campaigns can skip to ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/marketing-cloud/engage-studio/experiences/create-a-popup-campaign"},"children":["Create a Popup Campaign"]}," or ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/marketing-cloud/engage-studio/experiences/create-an-inline-campaign"},"children":["Create an Inline Campaign"]}," once setup is complete."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-1--install-the-sdk","__idx":1},"children":["Step 1 — Install the SDK"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Choose the installation method that matches your project."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"CDN (Recommended)","disable":false},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add the async loader snippet to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[""]}," of every page. This is the fastest way to get started and works with any tech stack."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"\n \n \n\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"CDN versioning"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The path ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/sdk/web/1.0/"]}," pins to the minor version. Patch releases are automatically reflected without requiring a snippet update."]}]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"npm","disable":false},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Install via npm for projects using a module bundler (webpack, Vite, Rollup, etc.)."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"npm install td-web-sdk\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"// TypeScript / ES modules\nimport Treasure from 'td-web-sdk'\n\n// CommonJS\nconst Treasure = require('td-web-sdk').default\n","lang":"typescript"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-2--initialize-the-sdk","__idx":2},"children":["Step 2 — Initialize the SDK"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create one ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Treasure"]}," instance and keep a reference to it. Call initialization as early as possible — before any ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["trackEvent"]}," calls."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"const td = new Treasure({\n writeKey: 'YOUR_WRITE_KEY', // Write-only API key from your TD account\n database: 'YOUR_DATABASE', // Target database name\n host: 'YOUR_REGION_HOST', // See region list below\n})\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"enable-in-browser-messaging-personalization","__idx":3},"children":["Enable In-Browser Messaging (Personalization)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To receive popup or inline messages from Engage Studio, add the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["personalization"]}," option. When configured, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["trackEvent"]}," calls are routed through the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["RT Personalization API"]}," instead of the standard ingest endpoint — the SDK fetches the campaign payload and renders the message automatically."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"const td = new Treasure({\n writeKey: 'YOUR_WRITE_KEY',\n database: 'YOUR_DATABASE',\n host: 'YOUR_REGION_HOST',\n personalization: {\n endpoint: 'YOUR_P13N_ENDPOINT', // Region-dependent. Ask your CSM.\n token: 'YOUR_WP13N_TOKEN', // WP13n-Token from Audience Studio\n },\n})\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Personalization replaces ingest"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["personalization"]}," is configured, ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["events are not written to your TD database"]}," — they are sent to the RT Personalization API instead. If you need both ingest and personalization, contact your Customer Success Manager for guidance on the dual-path pattern."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"configuration-reference","__idx":4},"children":["Configuration Reference"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"width":"25%","data-label":"Option"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Option"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"10%","data-label":"Required"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Required"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"65%","data-label":"Description"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Description"]}," "]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["writeKey"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["✅"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Write-only API key. Found in your TD account settings."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["database"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["✅"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Target database name where events are stored."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["host"]}]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["—"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Data ingestion endpoint. Select the value for your region:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Region"},"children":["Region"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Host"},"children":["Host"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["US"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["us01.records.in.treasuredata.com"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Tokyo"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ap01.records.in.treasuredata.com"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["AP02"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ap02.records.in.treasuredata.com"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["EU01"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["eu01.records.in.treasuredata.com"]}]}]}]}]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["personalization.endpoint"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["✅ (if using In-Browser Messaging)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["RT Personalization API endpoint. Region-dependent."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["personalization.token"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["✅ (if using In-Browser Messaging)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["WP13n-Token from the Personalization settings in Audience Studio."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["startInSignedMode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["—"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Set to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," to collect PII (client ID, IP) from the first event. Default: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," (anonymous mode)."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["logging"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["—"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Enable SDK console logging for debugging. Default: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," in development."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-3--track-page-views","__idx":5},"children":["Step 3 — Track Page Views"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Fire a page view event on every page load or SPA route change using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["trackEvent"]}," with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["event_name: 'page_view'"]},". This is required for RT Personalization to evaluate entry criteria and deliver messages."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Static HTML / MPA","disable":false},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Call ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["trackEvent"]}," on every page load. Because the page reloads on each navigation, one call per page is sufficient."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"\n","lang":"html"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"React SPA","disable":false},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For client-side route changes, call ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["trackEvent"]}," in a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["useEffect"]}," that watches the route — but ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["skip the first render"]}," to avoid a double page view on initial load."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"jsx","header":{"controls":{"copy":{}}},"source":"// components/Layout.jsx\nimport { useEffect, useRef } from 'react'\nimport { useLocation } from 'react-router-dom'\n\nexport default function Layout({ children }) {\n const location = useLocation()\n const firstRender = useRef(true)\n\n useEffect(() => {\n if (firstRender.current) {\n firstRender.current = false\n return // Skip: initial view already tracked on load\n }\n window.td?.trackEvent('events', { event_name: 'page_view' })\n }, [location.pathname, location.search])\n\n return <>{children}\n}\n","lang":"jsx"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Next.js (App Router)","disable":false},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PageviewTracker"]}," client component that watches ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["usePathname"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["useSearchParams"]},". Wrap it in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[""]}," (required for static export)."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"jsx","header":{"controls":{"copy":{}}},"source":"// components/PageviewTracker.jsx\n'use client'\nimport { useEffect, useRef } from 'react'\nimport { usePathname, useSearchParams } from 'next/navigation'\n\nexport default function PageviewTracker() {\n const pathname = usePathname()\n const searchParams = useSearchParams()\n const firstRender = useRef(true)\n\n useEffect(() => {\n if (firstRender.current) {\n firstRender.current = false\n return // Skip: initial view already tracked on load\n }\n window.td?.trackEvent('events', { event_name: 'page_view' })\n }, [pathname, searchParams])\n\n return null\n}\n\n// app/layout.jsx\nimport { Suspense } from 'react'\nimport PageviewTracker from '@/components/PageviewTracker'\n\nexport default function RootLayout({ children }) {\n return (\n \n \n \n \n \n {children}\n \n \n )\n}\n","lang":"jsx"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"GTM","disable":false},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In Google Tag Manager, create a ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Custom HTML"]}," tag that fires on ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["All Pages"]}," and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["History Change"]}," (for SPAs)."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"\n\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Set the trigger to fire on ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["All Pages"]}," for MPA sites, or add a ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["History Change"]}," trigger for single-page applications."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-4--set-user-identity","__idx":6},"children":["Step 4 — Set User Identity"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The SDK provides two mechanisms for anonymous identity. ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Server-Side Cookie (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td_ssc_id"]},") is recommended"]}," because it is issued by your own server and is not subject to browser ITP restrictions that limit first-party cookies to 7 days."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"option-a--server-side-cookie-recommended","__idx":7},"children":["Option A — Server-Side Cookie (Recommended)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td_ssc_id"]}," is a cookie set by your server, not the browser. It persists reliably across Safari ITP and iOS environments and is the preferred identifier for In-Browser Messaging."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Infrastructure required first"]},": A small SSC server endpoint must be deployed on your domain (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ssc.yourdomain.com"]},"). Contact your Customer Success Manager or implementation team for the SSC server setup guide."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Once the SSC infrastructure is in place:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"const td = new Treasure({\n writeKey: 'YOUR_WRITE_KEY',\n database: 'YOUR_DATABASE',\n host: 'YOUR_REGION_HOST',\n useServerSideCookie: true,\n sscDomain: 'yourdomain.com', // Your root domain\n personalization: {\n endpoint: 'YOUR_P13N_ENDPOINT',\n token: 'YOUR_WP13N_TOKEN',\n },\n})\n\n// Enable signed mode, then fetch the server-side cookie\ntd.setSignedMode()\ntd.fetchServerCookie(\n (sscId) => console.log('SSC ID:', sscId),\n (error) => console.error('SSC fetch failed:', error)\n)\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fetchServerCookie"]}," succeeds, the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td_ssc_id"]}," is automatically included in all subsequent events."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"SSC prerequisites"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fetchServerCookie"]}," requires:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["useServerSideCookie: true"]}," in the SDK config"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setSignedMode()"]}," called before ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fetchServerCookie()"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The SSC server endpoint deployed and accessible on your domain"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"option-b--first-party-browser-cookie-fallback","__idx":8},"children":["Option B — First-Party Browser Cookie (Fallback)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If SSC infrastructure is not yet available, the SDK falls back to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td_client_id"]}," — a first-party cookie set by the browser. It works without any server infrastructure, but is subject to ITP restrictions (7-day cap on Safari/iOS)."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// No extra config needed — td_client_id is managed automatically\nconst td = new Treasure({\n writeKey: 'YOUR_WRITE_KEY',\n database: 'YOUR_DATABASE',\n host: 'YOUR_REGION_HOST',\n personalization: {\n endpoint: 'YOUR_P13N_ENDPOINT',\n token: 'YOUR_WP13N_TOKEN',\n },\n})\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"width":"20%","data-label":"Identifier"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Identifier"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"15%","data-label":"Set by"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Set by"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"20%","data-label":"ITP / Safari"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["ITP / Safari"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"20%","data-label":"Infrastructure"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Infrastructure"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"25%","data-label":"Recommendation"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Recommendation"]}," "]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td_ssc_id"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Your server"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["✅ Not affected"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["SSC server required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Recommended"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td_client_id"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Browser (JS)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["⚠️ 7-day cap"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["None"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Fallback only"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"setting-authenticated-user-id","__idx":9},"children":["Setting Authenticated User ID"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After a user logs in, pass your internal user ID so events can be linked across devices and channels regardless of which cookie is in use."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// After login / session restore\ntd.set('$global', 'td_user_id', 'YOUR_INTERNAL_USER_ID')\n\n// From this point, all events include td_user_id\ntd.trackEvent('events', { event_name: 'page_view' })\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Identity design"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use a ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["stable, non-PII internal ID"]}," (account ID, CRM ID) — not email or phone number. Only set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td_user_id"]}," after the user is authenticated."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"anonymous-vs-signed-mode","__idx":10},"children":["Anonymous vs Signed Mode"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["By default the SDK runs in ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["anonymous mode"]}," — identifiers and IP address are not sent. Enable signed mode when the user has consented to tracking."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// User has consented — enable PII collection (required for SSC)\ntd.setSignedMode()\n\n// User has withdrawn consent\ntd.setAnonymousMode()\n\n// Block all events (e.g., cookie banner rejection)\ntd.blockEvents()\ntd.unblockEvents() // Resume\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-5--verify-the-setup","__idx":11},"children":["Step 5 — Verify the Setup"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Open your browser's DevTools → ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Network"]}," tab and filter for requests to your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["host"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["personalization.endpoint"]}," domain. After calling ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["trackEvent"]},", you should see:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Without personalization"]},": a POST request to the ingest endpoint with the event payload."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["With personalization"]},": a POST request to the p13n endpoint; the response contains the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["offers"]}," object with any active campaign payloads."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can also check the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Console"]}," tab — the SDK logs ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["[td-debug]"]}," messages showing the request URL and payload."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"user-identity-and-privacy","__idx":12},"children":["User Identity and Privacy"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"the-anonymous-to-identified-transition","__idx":13},"children":["The anonymous-to-identified transition"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"User visits (no login)\n └─ td_ssc_id issued by your server (recommended)\n OR td_client_id set by browser (fallback)\n └─ Events sent anonymously\n\nUser logs in\n └─ td.set('$global', 'td_user_id', 'user_12345')\n └─ All subsequent events include both cookie ID + td_user_id\n └─ RT 2.0 ID stitching links the anonymous history to the user\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"automatically-collected-properties","__idx":14},"children":["Automatically collected properties"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The SDK attaches these fields to every event automatically — no implementation required:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"width":"25%","data-label":"Property"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Property"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"50%","data-label":"Description"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Description"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"25%","data-label":"PII?"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["PII?"]}," "]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td_ssc_id"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Server-side cookie identifier (recommended — not ITP-affected)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes (signed mode only)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td_client_id"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["First-party browser cookie identifier (fallback — ITP 7-day cap on Safari)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes (signed mode only)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td_session_id"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Per-session UUID (future SDK versions)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td_url"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Current page URL"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Potentially"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td_path"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["URL path (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/product/123"]},")"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td_host"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Hostname"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td_referrer"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Referring URL"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Potentially"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td_title"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Page title"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td_viewport"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Browser window size (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["WxH"]},")"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td_screen"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Screen resolution (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["WxH"]},")"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td_language"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Browser language"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td_user_agent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Browser User-Agent string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Potentially"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["td_version"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["SDK version"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"next-steps","__idx":15},"children":["Next Steps"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/marketing-cloud/engage-studio/experiences/event-tracking"},"children":["Define Business Events"]}," — set up ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["view_item"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["add_to_cart"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["purchase"]},", and other custom events"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/marketing-cloud/engage-studio/experiences/create-a-popup-campaign"},"children":["Create a Popup Campaign"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/marketing-cloud/engage-studio/experiences/create-an-inline-campaign"},"children":["Create an Inline Campaign"]}]}]}]},"headings":[{"value":"TD Web SDK Integration","id":"td-web-sdk-integration","depth":1},{"value":"Step 1 — Install the SDK","id":"step-1--install-the-sdk","depth":2},{"value":"Step 2 — Initialize the SDK","id":"step-2--initialize-the-sdk","depth":2},{"value":"Enable In-Browser Messaging (Personalization)","id":"enable-in-browser-messaging-personalization","depth":3},{"value":"Configuration Reference","id":"configuration-reference","depth":3},{"value":"Step 3 — Track Page Views","id":"step-3--track-page-views","depth":2},{"value":"Step 4 — Set User Identity","id":"step-4--set-user-identity","depth":2},{"value":"Option A — Server-Side Cookie (Recommended)","id":"option-a--server-side-cookie-recommended","depth":3},{"value":"Option B — First-Party Browser Cookie (Fallback)","id":"option-b--first-party-browser-cookie-fallback","depth":3},{"value":"Setting Authenticated User ID","id":"setting-authenticated-user-id","depth":3},{"value":"Anonymous vs Signed Mode","id":"anonymous-vs-signed-mode","depth":3},{"value":"Step 5 — Verify the Setup","id":"step-5--verify-the-setup","depth":2},{"value":"User Identity and Privacy","id":"user-identity-and-privacy","depth":2},{"value":"The anonymous-to-identified transition","id":"the-anonymous-to-identified-transition","depth":3},{"value":"Automatically collected properties","id":"automatically-collected-properties","depth":3},{"value":"Next Steps","id":"next-steps","depth":2}],"frontmatter":{"seo":{"title":"TD Web SDK Integration — In-Browser Messaging","description":"Learn how to install, initialize, and configure the TD Web SDK on your website to enable In-Browser Messaging with RT Personalization 2.0."}},"lastModified":"2026-06-18T03:34:22.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/products/marketing-cloud/engage-studio/experiences/sdk-integration","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}