From 7c6163bf9acca5a7036a8bf0f16f157f7d7486f5 Mon Sep 17 00:00:00 2001
From: Pier-Luc Caron St-Pierre <pierluc.caronstpierre@optable.co>
Date: Mon, 10 Aug 2026 12:38:35 -0400
Subject: [PATCH] feat(demos): render keyword classifications in ctxSegments
 demo

The contextual segments API now returns free-form keyword classifications
in classifications.keywords alongside classifications.categories. The vanilla
ctxSegments() demos only rendered categories, so keywords were invisible and a
keyword-only node incorrectly showed "No contextual classifications were
returned" even though keywords were present in the raw response shown below.

renderClassifications() now also reads classifications.keywords and renders a
flat keyword table. prominence is shown as an ordinal rank (1 = most prominent),
not a score bar, matching the API contract. The empty-state guard now checks
both arrays. Applied identically to the cookies and nocookies variants.

Prose/API-shape docs on the page are intentionally left unchanged for a follow-up.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../nocookies/targeting/ctx_segments.html.tpl | 38 +++++++++++++++++--
 demos/vanilla/targeting/ctx_segments.html.tpl | 38 +++++++++++++++++--
 2 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/demos/vanilla/nocookies/targeting/ctx_segments.html.tpl b/demos/vanilla/nocookies/targeting/ctx_segments.html.tpl
index 2d357a87..3bfd06fe 100644
--- a/demos/vanilla/nocookies/targeting/ctx_segments.html.tpl
+++ b/demos/vanilla/nocookies/targeting/ctx_segments.html.tpl
@@ -222,14 +222,18 @@ loadGAM(optable.instance.ctxTargetingKeyValues({ iab_ct_3_1: "ctx_iab" }));</cod
       }
 
       // Render the classifications response into a human-readable set of tables.
-      // The DCN returns a single `classifications` object with a `categories` array;
-      // each category carries its own `taxonomy`, so we group categories by taxonomy.
+      // The DCN returns a single `classifications` object that may carry a
+      // `categories` array and/or a `keywords` array, depending on which
+      // classifiers the node has enabled. Each category carries its own
+      // `taxonomy`, so we group categories by taxonomy; keywords are a flat list.
       function renderClassifications(response) {
         var classifications = response && response.classifications;
         var categories =
           classifications && Array.isArray(classifications.categories) ? classifications.categories : [];
+        var keywords =
+          classifications && Array.isArray(classifications.keywords) ? classifications.keywords : [];
 
-        if (categories.length === 0) {
+        if (categories.length === 0 && keywords.length === 0) {
           return "<p><em>No contextual classifications were returned for this URL.</em></p>";
         }
 
@@ -245,7 +249,7 @@ loadGAM(optable.instance.ctxTargetingKeyValues({ iab_ct_3_1: "ctx_iab" }));</cod
           byTaxonomy[taxonomy].push(category);
         });
 
-        return order
+        var html = order
           .map(function (taxonomy) {
             var rows = byTaxonomy[taxonomy]
               .map(function (category) {
@@ -278,6 +282,32 @@ loadGAM(optable.instance.ctxTargetingKeyValues({ iab_ct_3_1: "ctx_iab" }));</cod
             );
           })
           .join("");
+
+        // Keywords carry no taxonomy tree, so they render as a flat list.
+        // `prominence` is an ordinal rank within this page's keywords (1 = most
+        // prominent), not a score, so it is shown as a plain rank rather than a
+        // score bar.
+        if (keywords.length > 0) {
+          var keywordRows = keywords
+            .map(function (keyword) {
+              return (
+                "<tr><td>" +
+                escapeHtml(keyword.keyword) +
+                "</td><td>" +
+                escapeHtml(keyword.prominence) +
+                "</td></tr>"
+              );
+            })
+            .join("");
+
+          html +=
+            "<h6>Keywords</h6>" +
+            '<table class="u-full-width"><thead><tr><th>Keyword</th><th>Prominence (rank)</th></tr></thead><tbody>' +
+            keywordRows +
+            "</tbody></table>";
+        }
+
+        return html;
       }
 
       document.getElementById("ctx-button").addEventListener("click", function () {
diff --git a/demos/vanilla/targeting/ctx_segments.html.tpl b/demos/vanilla/targeting/ctx_segments.html.tpl
index 8f364e52..7f19472b 100644
--- a/demos/vanilla/targeting/ctx_segments.html.tpl
+++ b/demos/vanilla/targeting/ctx_segments.html.tpl
@@ -219,14 +219,18 @@ loadGAM(optable.instance.ctxTargetingKeyValues({ iab_ct_3_1: "ctx_iab" }));</cod
       }
 
       // Render the classifications response into a human-readable set of tables.
-      // The DCN returns a single `classifications` object with a `categories` array;
-      // each category carries its own `taxonomy`, so we group categories by taxonomy.
+      // The DCN returns a single `classifications` object that may carry a
+      // `categories` array and/or a `keywords` array, depending on which
+      // classifiers the node has enabled. Each category carries its own
+      // `taxonomy`, so we group categories by taxonomy; keywords are a flat list.
       function renderClassifications(response) {
         var classifications = response && response.classifications;
         var categories =
           classifications && Array.isArray(classifications.categories) ? classifications.categories : [];
+        var keywords =
+          classifications && Array.isArray(classifications.keywords) ? classifications.keywords : [];
 
-        if (categories.length === 0) {
+        if (categories.length === 0 && keywords.length === 0) {
           return "<p><em>No contextual classifications were returned for this URL.</em></p>";
         }
 
@@ -242,7 +246,7 @@ loadGAM(optable.instance.ctxTargetingKeyValues({ iab_ct_3_1: "ctx_iab" }));</cod
           byTaxonomy[taxonomy].push(category);
         });
 
-        return order
+        var html = order
           .map(function (taxonomy) {
             var rows = byTaxonomy[taxonomy]
               .map(function (category) {
@@ -275,6 +279,32 @@ loadGAM(optable.instance.ctxTargetingKeyValues({ iab_ct_3_1: "ctx_iab" }));</cod
             );
           })
           .join("");
+
+        // Keywords carry no taxonomy tree, so they render as a flat list.
+        // `prominence` is an ordinal rank within this page's keywords (1 = most
+        // prominent), not a score, so it is shown as a plain rank rather than a
+        // score bar.
+        if (keywords.length > 0) {
+          var keywordRows = keywords
+            .map(function (keyword) {
+              return (
+                "<tr><td>" +
+                escapeHtml(keyword.keyword) +
+                "</td><td>" +
+                escapeHtml(keyword.prominence) +
+                "</td></tr>"
+              );
+            })
+            .join("");
+
+          html +=
+            "<h6>Keywords</h6>" +
+            '<table class="u-full-width"><thead><tr><th>Keyword</th><th>Prominence (rank)</th></tr></thead><tbody>' +
+            keywordRows +
+            "</tbody></table>";
+        }
+
+        return html;
       }
 
       document.getElementById("ctx-button").addEventListener("click", function () {