웹 연동 튜토리얼

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>A2 Banner Example</title>
    <style>
      * { box-sizing: border-box; }
      body { margin: 0; background: #f6f8fa; color: #172b4d; font: 16px/1.6 system-ui, sans-serif; }
      main { max-width: 820px; margin: 40px auto; padding: 28px; background: white; border: 1px solid #dce3eb; border-radius: 12px; }
      h1 { margin: 0 0 8px; font-size: 28px; }
      p { margin: 8px 0 20px; }
      label { display: block; margin-top: 16px; font-weight: 600; }
      input { display: block; width: 100%; margin-top: 6px; padding: 10px; font: inherit; border: 1px solid #a9b5c6; border-radius: 6px; }
      button { margin-top: 20px; padding: 10px 22px; border: 0; border-radius: 6px; background: #175cd3; color: white; font: inherit; cursor: pointer; }
      button:disabled { opacity: .6; cursor: wait; }
      .hint { color: #52627a; font-size: 14px; }
      #status { margin: 24px 0; padding: 16px; background: #f1f5fa; border-radius: 6px; }
      #status p { margin: 0; overflow-wrap: anywhere; }
      #slot img { display: block; max-width: 100%; height: auto; }
      #slot a { display: inline-block; position: relative; }
      .badge { position: absolute; top: 6px; right: 6px; padding: 0 5px; border-radius: 3px; background: #fff; color: #172b4d; font-size: 11px; }
      details { margin-top: 24px; }
      summary { cursor: pointer; font-weight: 600; }
      pre { max-height: 380px; overflow: auto; padding: 16px; background: #10243a; color: #e8eef5; font-size: 13px; }
      @media (max-width: 600px) { main { margin: 16px; padding: 20px; } }
    </style>
  </head>
  <body>
    <main>
      <h1>A2 Banner Example</h1>
      <p>Enter your A2 server URL and AdUnit ID to display a 300×250 banner.</p>
      <form id="settings">
        <label for="base-url">A2 server URL</label>
        <input id="base-url" type="url" placeholder="&lt;A2_API_URL&gt;" required />
        <label for="tagid">AdUnit ID</label>
        <input id="tagid" placeholder="Paste the AdUnit ID from Ad Manager" required pattern="[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}" />
        <button id="load" type="submit">Load ad</button>
      </form>
      <p class="hint">Use On Ad Response tracking. Each successful ad response records an impression. Click the banner once to send a click event.</p>
      <section id="status" aria-live="polite" aria-label="Request status">
        <p id="request">Ad request: waiting</p>
        <p id="display">Rendering: waiting</p>
        <p id="event">Click delivery: waiting</p>
      </section>
      <div id="slot"></div>
      <p class="hint">Verify collected impressions and clicks in Ad Manager's AdUnit Analytics.</p>
      <details>
        <summary>Response JSON</summary>
        <pre id="response">No response yet.</pre>
      </details>
    </main>
    <script>
      const form = document.querySelector("#settings");
      const load = document.querySelector("#load");
      const requestStatus = document.querySelector("#request");
      const displayStatus = document.querySelector("#display");
      const eventStatus = document.querySelector("#event");
      const slot = document.querySelector("#slot");
      const responseText = document.querySelector("#response");

      function httpUrl(value) {
        const url = new URL(value);
        if (!["http:", "https:"].includes(url.protocol)) {
          throw new Error("Use an HTTP or HTTPS URL");
        }
        return url;
      }

      async function sendClick(baseUrl, adLog) {
        eventStatus.textContent = "Click delivery: sending";
        try {
          const result = await fetch(`${baseUrl}/dmp/v0/log`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ type: "ad_log", action: "clk", ad_log: adLog }),
            keepalive: true,
          });
          if (!result.ok) throw new Error(`HTTP ${result.status}`);
          eventStatus.textContent = `Click delivery: HTTP ${result.status} — check metrics`;
        } catch (error) {
          eventStatus.textContent = `Click delivery failed: ${error.message}. Check Network and Console before retrying.`;
        }
      }

      form.addEventListener("submit", async (event) => {
        event.preventDefault();
        load.disabled = true;
        requestStatus.textContent = "Ad request: loading";
        displayStatus.textContent = "Rendering: waiting";
        eventStatus.textContent = "Click delivery: waiting";
        slot.replaceChildren();
        responseText.textContent = "Waiting for response...";
        try {
          const baseUrl = httpUrl(document.querySelector("#base-url").value.trim()).href.replace(/\/+$/, "");
          const tagid = document.querySelector("#tagid").value.trim();
          const result = await fetch(`${baseUrl}/app/v0/ad/${encodeURIComponent(tagid)}`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ user: { id: "quickstart-user-001" } }),
          });
          const text = await result.text();
          responseText.textContent = text || "(Empty response body)";
          if (result.status === 204) throw new Error("HTTP 204: no eligible ad. Check the AdUnit, allocation, and line item period.");
          if (!result.ok) throw new Error(`HTTP ${result.status}`);
          const response = JSON.parse(text);
          responseText.textContent = JSON.stringify(response, null, 2);
          const banner = response.ad?.display?.banner;
          const adLog = response.ext?.ad_log;
          if (!banner?.img || !banner.link?.url || !adLog) {
            throw new Error("Missing banner image, landing URL, or ad_log. Use the Quickstart image banner.");
          }
          const imageUrl = httpUrl(banner.img);
          const landingUrl = httpUrl(banner.link.url);
          requestStatus.textContent = `Ad request: HTTP ${result.status}`;
          const image = document.createElement("img");
          image.width = response.ad.display.w || 300;
          image.height = response.ad.display.h || 250;
          image.alt = "A2 Quickstart sample ad";
          image.onload = () => { displayStatus.textContent = "Rendering: complete"; };
          image.onerror = () => { displayStatus.textContent = "Rendering: image failed to load. Check the image URL in Response JSON."; };
          const link = document.createElement("a");
          link.href = landingUrl.href;
          link.target = "_blank";
          link.rel = "noopener noreferrer";
          link.addEventListener("click", () => { void sendClick(baseUrl, adLog); });
          link.append(image);
          if (banner.ext?.show_ad_badge) {
            const badge = document.createElement("span");
            badge.className = "badge";
            badge.textContent = "Ad";
            link.append(badge);
          }
          slot.replaceChildren(link);
          image.src = imageUrl.href;
        } catch (error) {
          requestStatus.textContent = `Ad request failed: ${error.message}`;
          if (error instanceof TypeError) {
            requestStatus.textContent += ". Check the server URL, HTTPS, and CORS in the browser's Network and Console tabs.";
          }
        } finally {
          load.disabled = false;
        }
      });
    </script>
  </body>
</html>