バナー広告
バナー広告は画像ベースの広告で、Web サイトで最も一般的に使われている広告形式です。AdStage SDK は、バナー広告の自動サイズ調整、スライド機能、バックグラウンド読み込みに対応しています。
// HTML にコンテナを用意
// <div id="banner-container"></div>
// SDK の初期化（1 回のみ）
AdStage.init({
apiKey: process.env.NEXT_PUBLIC_ADSTAGE_API_KEY
});
// 基本のバナー広告を作成
AdStage.ads.banner('banner-container', {
width: '100%',
height: 250
});
AdStage.ads.banner('banner-container', {
width: '100%',
height: 250,
onClick: (adData) => {
console.log('バナー広告がクリックされました:', adData);
// 独自のロジックを追加できます
}
});
| オプション | 型 | デフォルト値 | 説明 |
|---|
width | string | number | '100%' | バナーの幅（px または %） |
height | number | 250 | バナーの高さ（px） |
onClick | function | undefined | クリック時に実行されるコールバック関数 |
| オプション | 型 | デフォルト値 | 説明 |
|---|
autoSlide | boolean | false | 広告が複数ある場合の自動スライド |
slideInterval | number | 5000 | スライドの間隔（ミリ秒） |
adId | string | undefined | 特定の広告 ID を指定 |
| オプション | 型 | デフォルト値 | 説明 |
|---|
language | 'ko' | 'en' | 'ja' | 'zh' | undefined | 言語別のフィルタリング |
deviceType | 'MOBILE' | 'DESKTOP' | undefined | デバイス別のフィルタリング |
country | 'KR' | 'US' | 'JP' | 'CN' | 'DE' | undefined | 国別のフィルタリング |
最もシンプルな CDN 方式で、HTML からすぐに使えます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>バナー広告の例</title>
</head>
<body>
<h1>マイ Web サイト</h1>
<!-- バナー広告のコンテナ -->
<div id="banner-container" style="width: 100%; height: 250px; border: 1px solid #ddd;">
読み込み中...
</div>
<!-- AdStage SDK の読み込み -->
<script src="https://unpkg.com/@adstage/web-sdk/dist/index.umd.js"></script>
<script>
// SDK の初期化
AdStage.init({
apiKey: 'your-api-key'
});
// バナー広告を作成
AdStage.ads.banner('banner-container', {
width: '100%',
height: 250
});
</script>
</body>
</html>
バナー広告が複数あるときに、自動でスライドさせる機能です。
AdStage.ads.banner('banner-container', {
width: '100%',
height: 250,
autoSlide: true, // 自動スライドを有効化
slideInterval: 3000 // 3 秒ごとにスライド
});
画面サイズに応じてバナーのサイズを調整する方法です。
// メディアクエリを活用したレスポンシブ実装
const getResponsiveHeight = () => {
if (window.innerWidth <= 768) {
return 100; // モバイル：高さ 100px
} else if (window.innerWidth <= 1024) {
return 200; // タブレット：高さ 200px
} else {
return 250; // デスクトップ：高さ 250px
}
};
AdStage.ads.banner('banner-container', {
width: '100%',
height: getResponsiveHeight(),
deviceType: window.innerWidth <= 768 ? 'MOBILE' : 'DESKTOP'
});
// ウィンドウのリサイズ時に再作成
window.addEventListener('resize', () => {
// 既存の広告を削除してから新しく作成
AdStage.ads.destroy(slotId);
slotId = AdStage.ads.banner('banner-container', {
width: '100%',
height: getResponsiveHeight(),
deviceType: window.innerWidth <= 768 ? 'MOBILE' : 'DESKTOP'
});
});
特定のバナー広告だけを表示したいときに使います。
AdStage.ads.banner('banner-container', {
width: '100%',
height: 250,
adId: 'banner-ad-123' // 特定の広告 ID
});
SDK が画像サイズに合わせてコンテナを自動で最適化します。
// 画像サイズに合わせて自動調整
AdStage.ads.banner('banner-container', {
width: '100%',
height: 'auto' // 画像の比率に合わせて自動調整
});
広告はバックグラウンドで読み込まれるため、スロット ID をすぐに受け取れます。
// スロット ID を即座に返す
const slotId = AdStage.ads.banner('banner-container');
console.log('スロットが作成されました:', slotId); // すぐに実行される
// 実際の広告は非同期で読み込まれる
DOM からコンテナが削除されると、広告も自動でクリーンアップされます。
const slotId = AdStage.ads.banner('banner-container');
// DOM からコンテナを削除すると自動でクリーンアップされる
document.getElementById('banner-container').remove();
// destroy() を手動で呼び出す必要はない
SDK が自動で付与する CSS クラスを使ってスタイリングできます。
/* 広告コンテナの基本スタイル */
.adstage-ad {
position: relative;
overflow: hidden;
border-radius: 8px;
}
/* 読み込み中の状態 */
.adstage-loading {
opacity: 0.7;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* 読み込み完了 */
.adstage-loaded {
opacity: 1;
transition: opacity 0.3s ease;
}
/* エラー状態 */
.adstage-error {
border: 1px solid #ff6b6b;
background-color: #ffe0e0;
}
// すべてのスロットを確認
const allSlots = AdStage.ads.getAllSlots();
console.log('すべての広告スロット:', allSlots);
// 特定のスロットを確認
const slot = AdStage.ads.getSlotById(slotId);
console.log('スロット情報:', slot);
