実装方法
バナー広告はHTML属性のみで簡単に実装できます。別途関数呼び出しなしで広告枠がレンダリングされる際に自動的に広告がリクエストされます。
開発環境ではテストユニットIDを使用してください：PUBLIC_TEST_UNIT_ID_320_100
Data Attributes方式
data-adrop-unit属性を追加するだけでSDKが自動的に広告を読み込みます。
<div
data-adrop-unit="YOUR_UNIT_ID"
data-adrop-context-id="YOUR_CONTEXT_ID"
data-adrop-theme="light">
</div>
Data Attributes
広告の再リクエスト
広告枠DOMを新しく作成して既存DOMを置き換えると、広告が再リクエストされます。
const container = document.getElementById('ad-wrapper');
const newAd = document.createElement('div');
newAd.setAttribute('data-adrop-unit', 'YOUR_UNIT_ID');
Adrop.instance().clear(container);
container.appendChild(newAd);
renderAd方式
広告読み込みタイミングを直接制御したい場合に使用します。
<div id="ad-container"></div>
<script>
const container = document.getElementById('ad-container');
const adrop = Adrop.instance();
adrop.renderAd(container, {
unit: 'YOUR_UNIT_ID',
contextId: 'YOUR_CONTEXT_ID',
theme: 'light'
});
</script>
renderAdオプション
ユーザー識別子（SDK設定値を個別の広告枠で上書きする場合に使用）
広告の再リクエスト
renderAd()を再度呼び出すと、広告が再リクエストされます。
const container = document.getElementById('ad-container');
Adrop.instance().renderAd(container, {
unit: 'YOUR_UNIT_ID'
});
広告の削除
clear()を呼び出してコンテナから広告を削除できます。
const container = document.getElementById('ad-container');
Adrop.instance().clear(container);
広告サイズ
コンテナをユニットに登録したサイズに合わせて設定してください。
<div
data-adrop-unit="YOUR_UNIT_ID"
style="width: 320px; height: 100px;">
</div>
| 区分 | サイズ設定 | 配置 |
|---|
| ダイレクト広告 | レスポンシブ対応、高さ必須 | 水平/垂直中央 |
| バックフィル広告 | 初期幅合わせ、高さ必須 | 水平中央 |
イベント処理
広告の状態変化を検出して、適切なUI処理ができます。
<script>
const adrop = Adrop.instance();
// 広告受信成功
function handleReceived(unit, adData) {
console.log('広告受信:', unit);
}
// 配信可能なダイレクト広告なし
function handleNoFill(unit) {
console.warn('広告なし:', unit);
}
// リクエスト失敗
function handleFailed(unit) {
console.error('広告失敗:', unit);
}
// インプレッション
function handleImpression(unit) {
console.log('広告表示:', unit);
}
// クリック
function handleClicked(unit) {
console.log('広告クリック:', unit);
}
// バックフィル広告なし
function handleBackfillNoFill(unit) {
console.warn('バックフィル広告なし:', unit);
}
// 特定ユニットのみフィルタリング
const filter = { unit: 'YOUR_UNIT_ID' };
adrop.on(Adrop.Events.AD_RECEIVED, handleReceived, filter);
adrop.on(Adrop.Events.AD_NO_FILL, handleNoFill, filter);
adrop.on(Adrop.Events.AD_FAILED, handleFailed, filter);
adrop.on(Adrop.Events.AD_IMPRESSION, handleImpression, filter);
adrop.on(Adrop.Events.AD_CLICKED, handleClicked, filter);
adrop.on(Adrop.Events.AD_BACKFILL_NO_FILL, handleBackfillNoFill, filter);
</script>
サポートするイベント
| イベント | 定数 | 説明 |
|---|
| 広告受信 | AD_RECEIVED | 広告リクエスト成功 |
| 広告なし | AD_NO_FILL | 配信可能なダイレクト広告なし |
| リクエスト失敗 | AD_FAILED | 広告リクエスト失敗 |
| インプレッション | AD_IMPRESSION | 広告インプレッション記録 |
| クリック | AD_CLICKED | ユーザーが広告をクリック |
| バックフィルなし | AD_BACKFILL_NO_FILL | バックフィル広告なし |
イベントリスナーの解除
不要になったイベントリスナーはoff()で解除してください。
adrop.off(Adrop.Events.AD_RECEIVED, handleReceived);
AdData
イベントハンドラーで受け取る広告データです。詳細なフィールド情報はリファレンス > AdDataを参照してください。
完全なサンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>バナー広告サンプル</title>
</head>
<body>
<header>
<!-- ヘッダーバナー広告 -->
<div
data-adrop-unit="HEADER_BANNER_UNIT_ID"
style="width: 100%; height: 80px;">
</div>
</header>
<main>
<h1>コンテンツ</h1>
</main>
<footer>
<!-- フッターバナー広告 -->
<div
data-adrop-unit="FOOTER_BANNER_UNIT_ID"
data-adrop-theme="dark"
style="width: 320px; height: 100px;">
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/@adrop/ads-web-sdk@latest/dist/adrop-ads.min.js"></script>
<script>
const adrop = Adrop.observe({
appId: 'YOUR_APP_ID',
debug: true
});
adrop.on(Adrop.Events.AD_CLICKED, function(unit) {
console.log('広告クリック:', unit);
});
</script>
</body>
</html>
