Web SDK：カスタムコードで見た目を管理する

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://auxia.net/interactions/v1/interactions.js"></script>
  <script>
    const auxia = Auxia.initialize({
      apiKey: "YOUR_API_KEY",
      projectId: "YOUR_PROJECT_ID",
      userId: "user@example.com"
    });

    auxia.fetchAndRenderTreatments({
      surfaceRequests: [
        {
          surfaceName: "HOME_PAGE",
          surfaceHtmlElementId: "treatment-container",
          minimumTreatmentCount: 1,
          maximumTreatmentCount: 3
        }
      ],
      languageCode: "en"
    });
  </script>
</head>
<body>
  <div id="treatment-container"></div>
</body>
</html>

<script src="https://auxia.net/interactions/v1/interactions.js"></script>

const auxia = Auxia.initialize({
  apiKey: "YOUR_API_KEY",
  projectId: "YOUR_PROJECT_ID",
  userId: "user@example.com"
});

auxia.updateUserId("logged-in-user@example.com");

auxia.fetchAndRenderTreatments({
  surfaceRequests: [
    {
      surfaceName: "HOME_PAGE",
      surfaceHtmlElementId: "banner-container",
      minimumTreatmentCount: 1,
      maximumTreatmentCount: 5
    }
  ],
  languageCode: "en"
});

<div id="banner-container">
  <!-- Auxia will render treatment content here -->
</div>

auxia.fetchAndRenderTreatments({
  surfaceRequests: [
    {
      surfaceName: "HEADER_BANNER",
      surfaceHtmlElementId: "header-banner",
      minimumTreatmentCount: 0,
      maximumTreatmentCount: 1
    },
    {
      surfaceName: "PRODUCT_RECOMMENDATIONS",
      surfaceHtmlElementId: "product-recs",
      minimumTreatmentCount: 3,
      maximumTreatmentCount: 6
    },
    {
      surfaceName: "FOOTER_PROMO",
      surfaceHtmlElementId: "footer-promo",
      minimumTreatmentCount: 0,
      maximumTreatmentCount: 2
    }
  ],
  languageCode: "en"
});

<header>
  <div id="header-banner"></div>
</header>

<main>
  <section id="product-recs"></section>
</main>

<footer>
  <div id="footer-promo"></div>
</footer>

auxia.fetchAndRenderTreatments({
  surfaceRequests: [
    {
      surfaceName: "HOME_PAGE",
      surfaceHtmlElementId: "promo-banner",
      minimumTreatmentCount: 1,
      maximumTreatmentCount: 1
    }
  ],
  languageCode: "en",
  contextualAttributes: [
    { key: "userSegment", stringValue: "premium" },
    { key: "cartItemCount", integerValue: 3 },
    { key: "isLoggedIn", boolValue: true }
  ]
});

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My App</title>
  <script src="https://auxia.net/interactions/v1/interactions.js"></script>
</head>
<body>
  <header>
    <div id="promo-banner"></div>
  </header>

  <main>
    <h1>Welcome</h1>
    <div id="recommendations"></div>
  </main>

  <script>
    const auxia = Auxia.initialize({
      apiKey: "YOUR_API_KEY",
      projectId: "YOUR_PROJECT_ID",
      userId: getUserId()
    });

    auxia.fetchAndRenderTreatments({
      surfaceRequests: [
        {
          surfaceName: "PROMO_BANNER",
          surfaceHtmlElementId: "promo-banner",
          minimumTreatmentCount: 0,
          maximumTreatmentCount: 1
        },
        {
          surfaceName: "RECOMMENDATIONS",
          surfaceHtmlElementId: "recommendations",
          minimumTreatmentCount: 3,
          maximumTreatmentCount: 6
        }
      ],
      languageCode: "en",
      contextualAttributes: [
        { key: "pageType", stringValue: "home" }
      ]
    });
  </script>
</body>
</html>

auxia.getTreatments({
  surfaceRequests: [
    {
      surfaceName: "HOME_PAGE",
      minimumTreatmentCount: 1,
      maximumTreatmentCount: 5
    }
  ],
  languageCode: "en"
}).then((response) => {
  console.log(response.treatments);
});

{
  responseId: "uuid-string",
  treatments: [
    {
      treatmentId: "treatment-123",
      treatmentTrackingId: "tracking-456",
      rank: 1,
      contentLanguageCode: "en",
      treatmentType: "BANNER",
      surface: "HOME_PAGE",
      contentFields: [
        { fieldName: "html", value: "<div>...</div>" },
        { fieldName: "title", value: "Special Offer" },
        { fieldName: "imageUrl", value: "https://..." },
        { fieldName: "ctaText", value: "Learn More" },
        { fieldName: "ctaUrl", value: "https://..." }
      ]
    }
  ]
}

auxia.getTreatments({
  surfaceRequests: [
    {
      surfaceName: "PRODUCT_CARDS",
      minimumTreatmentCount: 1,
      maximumTreatmentCount: 4
    }
  ],
  languageCode: "en"
}).then((response) => {
  response.treatments.forEach((treatment) => {
    // Get specific fields
    const title = treatment.contentFields.find(f => f.fieldName === "title")?.value;
    const imageUrl = treatment.contentFields.find(f => f.fieldName === "imageUrl")?.value;
    const ctaUrl = treatment.contentFields.find(f => f.fieldName === "ctaUrl")?.value;

    console.log(title, imageUrl, ctaUrl);
  });
});

auxia.getTreatments({
  surfaceRequests: [
    {
      surfaceName: "PRODUCT_CARDS",
      minimumTreatmentCount: 1,
      maximumTreatmentCount: 4
    }
  ],
  languageCode: "en",
  contextualAttributes: [
    { key: "category", stringValue: "electronics" }
  ]
}).then((response) => {
  const container = document.getElementById("product-grid");

  response.treatments.forEach((treatment) => {
    const title = treatment.contentFields.find(f => f.fieldName === "title")?.value;
    const imageUrl = treatment.contentFields.find(f => f.fieldName === "imageUrl")?.value;
    const ctaUrl = treatment.contentFields.find(f => f.fieldName === "ctaUrl")?.value;
    const ctaText = treatment.contentFields.find(f => f.fieldName === "ctaText")?.value || "Learn More";

    const card = document.createElement("div");
    card.className = "product-card";
    card.innerHTML = `
      <img src="${imageUrl}" alt="${title}">
      <h3>${title}</h3>
      <a href="${ctaUrl}" class="cta-button">${ctaText}</a>
    `;

    container.appendChild(card);

    const logInteraction = (interactionType) => auxia.logTreatmentInteraction({
      treatmentTrackingId: treatment.treatmentTrackingId,
      surfaceName: treatment.surface,
      treatmentId: treatment.treatmentId,
      interactionType
    });

    logInteraction("VIEWED");
    card.querySelector(".cta-button").addEventListener("click", () => logInteraction("CLICKED"));
  });
});

auxia.fetchAndRenderTreatments({
  surfaceRequests: [
    {
      surfaceName: "CHECKOUT_UPSELL",
      surfaceHtmlElementId: "upsell-container",
      minimumTreatmentCount: 1,
      maximumTreatmentCount: 3
    }
  ],
  languageCode: "en",
  contextualAttributes: [
    { key: "userSegment", stringValue: "premium" },
    { key: "cartValue", doubleValue: 150.00 },
    { key: "cartItemCount", integerValue: 3 },
    { key: "isLoggedIn", boolValue: true },
    { key: "productCategory", stringValue: "electronics" }
  ]
});