共通機能

// 1) SDK の初期化（アプリ全体で 1 回）
AdStage.init({
  apiKey: 'your-api-key',
  debug: process.env.NODE_ENV === 'development'
});
 
// 2) コンテナ DOM の準備後に呼び出し（id と Element のどちらも可）
AdStage.ads.banner('banner-container', { /* オプション */ });
// AdStage.ads.text(element, { /* オプション */ });
// AdStage.ads.video('video-wrapper', { /* オプション */ });
 
// 3) 必要に応じて手動で削除（ほとんどの場合は不要: 自動クリーンアップに対応）
AdStage.ads.destroy(slotId);

import { AdStageProvider, useAdStageInstance } from '@adstage/web-sdk';
 
// layout / root
<AdStageProvider config={{ apiKey: process.env.NEXT_PUBLIC_ADSTAGE_API_KEY, debug: true }}>
  {children}
</AdStageProvider>
 
// 個別のコンポーネント
function BannerSlot() {
  const adstage = useAdStageInstance();
  const ref = useRef(null);
  useEffect(() => {
    if (!adstage || !ref.current) return;
    const id = adstage.ads.banner(ref.current, { width: '100%', height: 250 });
    return () => adstage.ads.destroy(id);
  }, [adstage]);
  return <div ref={ref} style={{ height: 250 }} />;
}

graph TD
  A[init の呼び出し] --> B[slot 関数の呼び出し]
  B --> C[コンテナの探索/リトライ]
  C --> D[サーバーへの広告リクエスト]
  D --> E[非同期読み込み]
  E --> F[レンダリング]
  F --> G[インプレッションのトラッキング]
  G --> H[クリック/インタラクションのトラッキング]

// すべてのスロット情報
const all = AdStage.ads.getAllSlots();
 
// 特定のスロットを照会
const slot = AdStage.ads.getSlotById(slotId);
 
// 手動で削除（必要な場合）
AdStage.ads.destroy(slotId);

interface AdSlot {
  id: string;                 // スロット ID（slotId）
  containerId: string;        // コンテナ DOM の id
  adType: 'BANNER' | 'TEXT' | 'VIDEO' | 'NATIVE' | 'INTERSTITIAL' | 'POPUP';
  width: number | string;     // 数値（px）または文字列（'100%' など）
  height: number | string;    // 数値（px）または文字列（'auto' など）
  isLoaded: boolean;          // 広告の読み込み完了の有無
  isVisible: boolean;         // 表示状態
  refreshRate: number;        // 自動更新の周期（秒）
  lazyLoad: boolean;          // 遅延読み込みの有無
  targeting: Record<string, any>;
 
  // スロットのメソッド
  load(): Promise<Advertisement | null>;
  render(ad: Advertisement): void;
  refresh(): Promise<void>;
  destroy(): void;
}

function selectDeviceType() {
  return window.innerWidth <= 768 ? 'MOBILE' : 'DESKTOP';
}
 
const base = { language: 'ko', deviceType: selectDeviceType() };
const id = AdStage.ads.banner('rwd-banner', { width: '100%', height: 250, ...base });
 
window.addEventListener('resize', () => {
  AdStage.ads.destroy(id);
  const next = AdStage.ads.banner('rwd-banner', { width: '100%', height: 250, deviceType: selectDeviceType() });
});

.adstage-ad, .adstage-text-ad, .adstage-video-ad { position: relative; overflow: hidden; }
.adstage-loading { opacity: .6; transition: opacity .15s; }
.adstage-loaded { opacity: 1; }
.adstage-error { outline: 1px solid #f87171; }

AdStage.init({ apiKey: 'your-api-key', debug: true });

AdStage.ads.banner('banner-container', {
  width: '100%',
  height: 250,
  onClick: (adData) => {
    console.log('広告がクリックされました:', adData);
    // 追加のトラッキング/ルーティングのロジック
  }
});

const slotId = AdStage.ads.banner('banner-container', { width: '100%', height: 250 });
 
const timer = setInterval(() => {
  const slot = AdStage.ads.getSlotById(slotId);
  if (slot?.isLoaded) {
    console.log('読み込み完了:', slot);
    clearInterval(timer);
  }
}, 200);

function dumpAdStage() {
  const slots = AdStage.ads.getAllSlots();
  console.table(slots.map(s => ({
    id: s.id,
    containerId: s.containerId,
    adType: s.adType,
    isLoaded: s.isLoaded
  })));
}