Skip to content

Publisher Integration

Track viewability on placements. Production script URL: https://cdn.thrad.ai/p.min.js.

Setup (one-time, in <head>)

<script>
  window.p = window.p || function() { 
    (window.p.q = window.p.q || []).push(arguments); 
  };
  window.p.observeAll = window.p.observeAll || function() { return { disconnect: function() {} }; };
</script>
<script async src="https://cdn.thrad.ai/p.min.js"></script>
<script>
  p.observeAll('.content-slot');
</script>

Optionally set a stable tag id (if omitted, server derives one from the page URL):

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

Requirements

Placement container

Naming matters. Ad blockers scan CSS classes, element IDs, and function names 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.

The container must include an <a href="..."> with the redirect URL:

<div class="content-slot">
  <a href="https://ssp.thrads.ai/api/v1/tracking/redirect?token=abc123">
    <img src="creative.jpg" />
  </a>
</div>

The tag extracts the token from the href to identify the placement (bid_id). No extra data attributes needed.

What gets tracked

Event When
rendered Element exists in DOM
in_view Element enters viewport
viewable 50% visible for 1 second (IAB standard)
view_end Element leaves viewport or page closes

Options

p.observeAll('.content-slot', {
  max: 10,                 // limit elements tracked (default 20)
  sendOnInView: true,      // send event when element enters viewport
  sendOnViewable: true,    // send event when element is viewable (50% for 1s)
  sendOnViewEnd: true,     // send event when element exits viewport
  params: {                // custom metadata for all events
    placement_id: 'feed_top'
  }
});

How it works

  1. Finds all matching elements by selector
  2. Tracks visibility via IntersectionObserver
  3. Sends events to backend
  4. Sends collect with tag_id from config (if omitted, server falls back to site:<host>).

New elements added dynamically are auto-tracked.

Stop tracking

const handle = p.observeAll('.content-slot');
handle.disconnect();

Google Tag Manager (GTM)

If you use GTM, you can install the publisher tag without touching your codebase:

  1. Go to GTM → Tags → New
  2. Choose Custom HTML
  3. Paste:
<script>
  window.p = window.p || function() { 
    (window.p.q = window.p.q || []).push(arguments); 
  };
  window.p.observeAll = window.p.observeAll || function() { return { disconnect: function() {} }; };
</script>
<script async src="https://cdn.thrad.ai/p.min.js"></script>
<script>
  p.observeAll('.content-slot');
</script>
  1. Set trigger: DOM Ready
  2. Save and Publish

Same functionality, managed via GTM dashboard instead of code.