Zendesk Guide のセクションテンプレートで content_tags を表示する構成（Lambda + JS）

GET /api/v2/help_center/articles/:id.json

{
  "article": {
    "id": 123456789,
    "title": "テンプレート：よくある質問",
    "content_tag_ids": [112233, 445566]
  }
}

GET /api/v2/guide/content_tags/:id.json

{
  "content_tag": {
    "id": 112233,
    "name": "jp"
  }
}

const fetch = require("node-fetch");

const ZENDESK_DOMAIN = process.env.ZENDESK_DOMAIN;
const ZENDESK_EMAIL = process.env.ZENDESK_EMAIL;
const ZENDESK_API_TOKEN = process.env.ZENDESK_API_TOKEN;

exports.handler = async (event) => {
  const articleId = event.queryStringParameters?.article_id;
  if (!articleId) {
    return { statusCode: 400, body: "Missing article_id" };
  }

  const authHeader = "Basic " + Buffer.from(`${ZENDESK_EMAIL}:${ZENDESK_API_TOKEN}`).toString("base64");

  try {
    const articleRes = await fetch(`https://${ZENDESK_DOMAIN}/api/v2/help_center/articles/${articleId}.json`, {
      headers: { Authorization: authHeader }
    });

    const articleJson = await articleRes.json();
    const tagIds = articleJson.article?.content_tag_ids || [];

    const tagNames = await Promise.all(tagIds.map(async (id) => {
      const res = await fetch(`https://${ZENDESK_DOMAIN}/api/v2/guide/content_tags/${id}.json`, {
        headers: { Authorization: authHeader }
      });
      const json = await res.json();
      return json.content_tag?.name;
    }));

    return {
      statusCode: 200,
      body: JSON.stringify({ tags: tagNames.filter(Boolean) }),
      headers: { "Access-Control-Allow-Origin": "*" }
    };
  } catch (err) {
    console.error("タグ取得失敗:", err);
    return { statusCode: 500, body: JSON.stringify({ error: "Internal error" }) };
  }
};

curl -X GET \
  'https://your-api-id.execute-api.ap-northeast-1.amazonaws.com/default/zendeskContentTagProxy?article_id=123456789'

{ "tags": ["jp", "beta"] }

<ul class="article-list">
  {{#each section.articles}}
    <li class="article-list-item" data-article-id="{{id}}">
      <a href="{{url}}" class="article-list-link">{{title}}</a>
    </li>
  {{/each}}
</ul>

document.addEventListener("DOMContentLoaded", async () => {
  const items = document.querySelectorAll(".article-list-item");

  for (const item of items) {
    const articleId = item.getAttribute("data-article-id");
    if (!articleId) continue;

    try {
      const res = await fetch(
        `https://your-api-id.execute-api.ap-northeast-1.amazonaws.com/default/zendeskContentTagProxy?article_id=${articleId}`
      );
      const data = await res.json();
      const tags = data.tags || [];

      if (tags.length > 0) {
        const tagContainer = document.createElement("span");
        tagContainer.classList.add("tag-list");

        tags.forEach((tag) => {
          const span = document.createElement("span");
          span.classList.add("tag");
          span.textContent = `#${tag}`;
          tagContainer.appendChild(span);
        });

        const link = item.querySelector(".article-list-link");
        if (link) {
          link.insertAdjacentElement("afterend", tagContainer);
        }
      }
    } catch (e) {
      console.error(`タグ取得失敗（article_id=${articleId}）:`, e);
    }
  }
});

.tag-list {
  margin-left: 8px;
  display: inline-flex;
  gap: 4px;
}

.tag {
  font-size: 12px;
  color: #666;
  background-color: #eee;
  padding: 2px 6px;
  border-radius: 4px;
}