バナー広告 - Ad Control Help Center

実装方法

バナー広告は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"
  data-adrop-custom-click="true">
</div>

Data Attributes

data-adrop-unit

string

必須

Ad Controlコンソールで作成したユニットID

data-adrop-context-id

string

コンテキストターゲティング用Context ID

data-adrop-theme

string

デフォルト:"light"

テーマ設定（lightまたはdark） - ダークモード設定を参照

data-adrop-custom-click

boolean

デフォルト:false

カスタムクリック処理の有効化 - trueに設定するとSDKが自動で目的地URLに移動せず、adClickedイベントのみ発生させます。開発者がクリック動作を直接実装できます。

data-adrop-backfill-mode

string

デフォルト:"responsive"

バックフィル広告のレンダリングモード（responsive または fixed）。詳細はバックフィルレンダリングモードガイドを参照してください。（SDK 1.2.3+）

data-adrop-ad-id

string

広告識別子 — デバイスで表示機能で登録済みテストデバイスからドラフトクリエイティブをプレビューするときに必要です。本番環境にハードコードしないでください。

広告の再リクエスト

広告枠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',
    useCustomClick: true  // カスタムクリック処理の有効化
  });
</script>

renderAdオプション

unit

string

必須

Ad Controlコンソールで作成したユニットID

uid

string

ユーザー識別子（SDK設定値を個別の広告枠で上書きする場合に使用）

contextId

string

コンテキストターゲティング用Context ID

theme

string

デフォルト:"light"

テーマ設定（lightまたはdark） - ダークモード設定を参照

useCustomClick

boolean

デフォルト:false

backfillMode

'responsive' | 'fixed'

デフォルト:"responsive"

バックフィル広告のレンダリングモード。詳細はバックフィルレンダリングモードガイドを参照してください。（SDK 1.2.3+）

adId

string

広告の再リクエスト

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);

広告サイズ

推奨：レスポンシブな幅 + ユニット登録サイズと一致する aspect-ratio。枠が端末幅に合わせて伸縮し、高さは比率で固定されるため CLS が発生しません。

<div
  data-adrop-unit="YOUR_UNIT_ID"
  data-adrop-backfill-mode="fixed"
  style="width: 100%; aspect-ratio: 320 / 100;">
</div>

ピクセル単位の整列が必要な場合は固定ピクセルサイズもサポートします。

<div
  data-adrop-unit="YOUR_UNIT_ID"
  style="width: 320px; height: 100px;">
</div>

区分	サイズ設定	配置
ダイレクト広告	レスポンシブ対応、高さ必須	水平/垂直中央
バックフィル広告	コンテナ幅に合わせて自動マッチ（`responsive`）またはコンテナ高さに合わせる（`fixed`）	水平中央

バックフィル広告のコンテナ作成パターンとレンダリングモードの選択基準はバックフィルレンダリングモードガイドを参照してください。

イベント処理

広告の状態変化を検出して、適切な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, adData) {
    console.log('広告表示:', unit);
  }

  // クリック
  function handleClicked(unit, adData) {
    console.log('広告クリック:', unit);
  }

  // バックフィル広告なし
  function handleBackfillNoFill(unit) {
    console.warn('バックフィル広告なし:', unit);
  }

  // 動画再生開始
  function handleVideoStart(unit, adData) {
    console.log('動画開始:', unit);
  }

  // 動画再生完了
  function handleVideoEnd(unit, adData) {
    console.log('動画完了:', 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);
  adrop.on(Adrop.Events.AD_VIDEO_START, handleVideoStart, filter);
  adrop.on(Adrop.Events.AD_VIDEO_END, handleVideoEnd, filter);
</script>

サポートするイベント

イベント	定数	説明
広告受信	`AD_RECEIVED`	広告リクエスト成功
広告なし	`AD_NO_FILL`	配信可能なダイレクト広告なし
リクエスト失敗	`AD_FAILED`	広告リクエスト失敗
インプレッション	`AD_IMPRESSION`	広告インプレッション記録
クリック	`AD_CLICKED`	ユーザーが広告をクリック
バックフィルなし	`AD_BACKFILL_NO_FILL`	バックフィル広告なし
動画開始	`AD_VIDEO_START`	動画広告の再生開始
動画完了	`AD_VIDEO_END`	動画広告の再生完了

イベントリスナーの解除

不要になったイベントリスナーはoff()で解除してください。

adrop.off(Adrop.Events.AD_RECEIVED, handleReceived);

AdData

イベントハンドラーで受け取る広告データです。詳細なフィールド情報はリファレンス > AdDataを参照してください。

カスタムクリック処理

useCustomClickが有効化されるとSDKが自動で目的地URLに移動しません。代わりにクリックイベントを処理してカスタム動作を実装できます。

<script>
  const adrop = Adrop.instance();
  
  // カスタム動作で広告クリック処理
  function handleCustomClick(unit, adData) {
    console.log('広告クリック:', unit);
    console.log('目的地URL:', adData.destinationURL);
    
    // カスタムクリック動作実装
    // 例：確認ダイアログ表示、分析トラッキングなど
    const userConfirmed = confirm('広告主ページを訪問しますか？');
    if (userConfirmed && adData.destinationURL) {
      window.open(adData.destinationURL, '_blank');
    }
  }
  
  // クリックハンドラー登録
  adrop.on(Adrop.Events.AD_CLICKED, handleCustomClick);
  
  // カスタムクリック有効化して広告レンダリング
  const container = document.getElementById('ad-container');
  adrop.renderAd(container, {
    unit: 'YOUR_UNIT_ID',
    useCustomClick: true
  });
</script>

カスタムクリック処理が有効化されると、ユーザーが広告をクリックしたときの動作を完全に制御できます。destinationURLはadClickedイベントデータに含まれて提供されます。

完全なサンプル

<!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, adData) {
      console.log('広告クリック:', unit);
    });
  </script>
</body>
</html>

​実装方法

​Data Attributes方式

​Data Attributes

​広告の再リクエスト

​renderAd方式

​renderAdオプション

​広告の再リクエスト

​広告の削除

​広告サイズ

​イベント処理

​サポートするイベント

​イベントリスナーの解除

​AdData

​カスタムクリック処理

​完全なサンプル

実装方法

Data Attributes方式

Data Attributes

広告の再リクエスト

renderAd方式

renderAdオプション

広告の再リクエスト

広告の削除

広告サイズ

イベント処理

サポートするイベント

イベントリスナーの解除

AdData

カスタムクリック処理

完全なサンプル