ネイティブ広告

<div data-adrop-unit="YOUR_NATIVE_UNIT_ID"></div>

<div
  data-adrop-unit="YOUR_NATIVE_UNIT_ID"
  data-adrop-render="custom"
  data-adrop-entire-click="true"
  data-adrop-custom-click="true"
  class="native-ad">

  <!-- 広告主プロフィール -->
  <div class="ad-profile">
    <img data-adrop-native="profile.displayLogo" alt="広告主">
    <span data-adrop-native="profile.displayName"></span>
  </div>

  <!-- 広告コンテンツ -->
  <h3 data-adrop-native="headline"></h3>
  <img data-adrop-native="asset" alt="広告">
  <p data-adrop-native="body"></p>

  <!-- 追加テキスト項目 -->
  <span data-adrop-native="extra.price"></span>

  <!-- CTAボタン -->
  <button data-adrop-native="callToAction"></button>
</div>

<div id="native-ad-container" class="native-ad">
  <div class="ad-profile">
    <img data-adrop-native="profile.displayLogo" alt="広告主">
    <span data-adrop-native="profile.displayName"></span>
  </div>
  <h3 data-adrop-native="headline"></h3>
  <img data-adrop-native="asset" alt="広告">
  <p data-adrop-native="body"></p>
  <button data-adrop-native="callToAction"></button>
</div>

<script>
  const container = document.getElementById('native-ad-container');
  const adrop = Adrop.instance();

  adrop.renderAd(container, {
    unit: 'YOUR_NATIVE_UNIT_ID',
    contextId: 'YOUR_CONTEXT_ID',
    theme: 'light',
    trackMode: 1,        // カスタムUI使用時必須
    isEntireClick: true, // 全体領域クリックを有効化
    useCustomClick: true // カスタムクリック処理の有効化
  });
</script>

<div id="native-ad-container"></div>

<script>
  async function loadNativeAd() {
    const adrop = Adrop.instance();

    const response = await adrop.requestAd({
      unit: 'YOUR_NATIVE_UNIT_ID',
      trackMode: 1
    });

    if (response.code === 0 && response.result) {
      const ad = response.result;
      const container = document.getElementById('native-ad-container');

      container.innerHTML =
        '<div class="native-ad">' +
          '<div class="ad-header">' +
            '<img src="' + (ad.profile?.displayLogo || '') + '" alt="ロゴ">' +
            '<span>' + (ad.profile?.displayName || '') + '</span>' +
          '</div>' +
          '<h3>' + (ad.headline || '') + '</h3>' +
          '<img src="' + (ad.asset || '') + '" alt="広告">' +
          '<p>' + (ad.body || '') + '</p>' +
          '<a href="' + ad.destinationURL + '" target="_blank">' + ad.callToAction + '</a>' +
        '</div>';
    }
  }

  loadNativeAd();
</script>

<script>
  const adrop = Adrop.instance();
  const filter = { unit: 'YOUR_NATIVE_UNIT_ID' };

  function handleReceived(unit, adData) {
    console.log('広告受信:', adData);
  }

  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 handleVideoStart(unit, adData) {
    console.log('動画開始:', unit);
  }

  // 動画再生完了
  function handleVideoEnd(unit, adData) {
    console.log('動画完了:', unit);
  }

  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_VIDEO_START, handleVideoStart, filter);
  adrop.on(Adrop.Events.AD_VIDEO_END, handleVideoEnd, filter);
</script>

<script>
  const adrop = Adrop.instance();
  
  // カスタム動作で広告クリック処理
  function handleCustomClick(unit, adData) {
    console.log('広告クリック:', unit);
    console.log('目的地URL:', adData.destinationURL);
    
    // カスタムクリック動作実装
    // 例：SPA内ナビゲーション、モーダル表示、分析追跡など
    if (adData.destinationURL) {
      // カスタムナビゲーションロジック
      window.location.href = adData.destinationURL;
    }
  }
  
  // クリックハンドラー登録
  const filter = { unit: 'YOUR_NATIVE_UNIT_ID' };
  adrop.on(Adrop.Events.AD_CLICKED, handleCustomClick, filter);
  
  // カスタムクリック有効化して広告レンダリング
  const container = document.getElementById('native-ad-container');
  adrop.renderAd(container, {
    unit: 'YOUR_NATIVE_UNIT_ID',
    trackMode: 1,
    isEntireClick: true,
    useCustomClick: true
  });
</script>