Manual Integration¶

Setup (one-time, in `<head>`)¶

<script>
  window.p = window.p || function() { 
    (window.p.q = window.p.q || []).push(arguments); 
  };
  window.p.observe = window.p.observe || function() {};
</script>
<script async src="https://cdn.thrad.ai/p.min.js"></script>

Optionally set a stable tag id so collect payloads carry it (if omitted, the server derives one from the page URL):

<script>
  p("config", "pub_001", {});
</script>

Track a placement¶

Add one line to your existing render code — pass the container element:

p.observe(container);

Pass the outermost container so viewability is measured on the full area.

Example:

function renderContent(data) {
  const container = createElement(data);  // your existing code
  parentNode.appendChild(container);      // your existing code

  p.observe(container);                   // ← add this line
}

Naming matters. Ad blockers scan function names, CSS classes, and element IDs in page source. Avoid words like ad, banner, sponsored, tracker, or impression in your DOM — use neutral names such as content-slot, placement, or promo-card.

What gets tracked¶

Event	When
`rendered`	Immediately when you call `observe`
`in_view`	Element enters viewport
`viewable`	50 % visible for 1 second (IAB standard)
`view_end`	Element leaves viewport or page closes

Requirements¶

The element must contain an <a> tag with the redirect URL:

<a href="https://ssp.thrads.ai/api/v1/tracking/redirect?token=..."></a>

The tag extracts the token from the href to identify the placement.

How it works¶

Extracts token from <a href> inside the element
At viewable, extracts and fires beacon URLs from redirect params: view_url and thrad_view_url (when present)
Attaches an IntersectionObserver to the element
Sends events when visibility changes