メインコンテンツへスキップ

​
実装方法

ネイティブ広告は、アプリのデザインに合わせてカスタムUIで広告を表示できます。
方式説明推奨
基本テンプレートSDK提供テンプレート使用迅速な実装
カスタムUI直接UI構成デザインカスタマイズが必要な場合
開発環境ではテストユニットIDを使用してください：PUBLIC_TEST_UNIT_ID_NATIVE

​
基本テンプレート

バナー広告と同じ方式で基本テンプレートを使用できます。SDKが提供するテンプレートに画像、テキストが自動的にレンダリングされます。 
function NativeAd() {
  return <div data-adrop-unit="YOUR_NATIVE_UNIT_ID" />;
}
基本テンプレートは広告主プロフィールセクションをサポートしていません。広告主プロフィールを表示するには、カスタムUIを使用してください。

​
カスタムUI

​
1. Data Attributes方式

data-adrop-render="custom"属性を追加し、内部要素にdata-adrop-native属性でフィールドをバインディングします。 
function CustomNativeAd() {
  return (
    <div
      data-adrop-unit="YOUR_NATIVE_UNIT_ID"
      data-adrop-render="custom"
      data-adrop-entire-click="true"
      className="native-ad"
    >
      {/* 広告主プロフィール */}
      <div className="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>
  );
}

​
Data Attributes

​
data-adrop-unit
string
required
アドコントロールコンソールで作成したユニットID
​
data-adrop-render
string
required
カスタムUI使用時はcustomに設定
​
data-adrop-context-id
string
コンテキストターゲティング用Context ID
​
data-adrop-theme
string
default:"light"
テーマ設定（lightまたはdark）
​
data-adrop-entire-click
boolean
default:false
全体領域クリックを有効化
  • false：テキスト/画像のみクリック可能、広告主プロフィールクリック時はプロフィールリンクに移動
  • true：コンテナ全体クリック可能、すべてのクリックが広告先に移動

​
2. renderAd方式

広告読み込みタイミングを直接制御したい場合に使用します。 
import { useEffect, useRef } from 'react';
import Adrop from '@adrop/ads-web-sdk';

function CustomNativeAd() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const adrop = Adrop.instance();

    if (containerRef.current) {
      adrop.renderAd(containerRef.current, {
        unit: 'YOUR_NATIVE_UNIT_ID',
        contextId: 'YOUR_CONTEXT_ID',
        theme: 'light',
        trackMode: 1,        // カスタムUI使用時必須
        isEntireClick: true  // 全体領域クリックを有効化
      });
    }

    return () => {
    };
  }, []);

  return (
    <div ref={containerRef} className="native-ad">
      <div className="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>
  );
}

​
renderAdオプション

​
unit
string
required
アドコントロールコンソールで作成したユニットID
​
uid
string
ユーザー識別子（SDK設定値を個別の広告枠で上書きする場合に使用）
​
contextId
string
コンテキストターゲティング用Context ID
​
trackMode
number
required
カスタムUI使用時は1に設定
​
isEntireClick
boolean
default:false
全体領域クリックを有効化
​
theme
string
default:"light"
テーマ設定（lightまたはdark）

​
フィールドバインディング

data-adrop-native属性で広告データをUI要素にバインディングします。
フィールド説明要素タイプ
profile.displayLogo広告主ロゴURL<img>
profile.displayName広告主名テキスト
headline広告タイトルテキスト
body広告説明テキスト
assetメイン画像URL<img>
callToActionCTAボタンテキストテキスト
extra.{key}追加テキスト項目テキスト
extra.{key}はアドコントロールコンソールで設定した追加テキスト項目のIDです。必須設定していない場合は空の可能性があります。
広告主プロフィール（profile.displayLogo、profile.displayName）を表示するには、アドコントロールコンソールで該当広告ユニットの広告主プロフィール表示を有効化する必要があります。

​
広告サイズ

カスタムUIのサイズは自由に設定できます。
区分サイズ設定配置
ダイレクト広告レスポンシブ対応水平/垂直中央
バックフィル広告初期幅合わせ、高さ必須水平中央
バックフィル広告はコンテナサイズに合う素材をリクエストします。適切なサイズを指定してください。

​
requestAdでデータのみ取得

UIを完全に直接制御したい場合は、requestAdで広告データのみを取得できます。 
import { useState, useEffect } from 'react';
import Adrop from '@adrop/ads-web-sdk';

function NativeAd() {
  const [adData, setAdData] = useState<AdData | null>(null);

  useEffect(() => {
    async function loadAd() {
      const adrop = Adrop.instance();

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

      if (response.code === 0 && response.result) {
        setAdData(response.result);
      }
    }

    loadAd();
  }, []);

  if (!adData) return null;

  return (
    <div className="native-ad">
      <div className="ad-header">
        {adData.profile?.displayLogo && (
          <img src={adData.profile.displayLogo} alt="広告主" />
        )}
        <span>{adData.profile?.displayName}</span>
      </div>
      <h3>{adData.headline}</h3>
      {adData.asset && <img src={adData.asset} alt="広告" />}
      <p>{adData.body}</p>
      <a href={adData.destinationURL} target="_blank" rel="noopener noreferrer">
        {adData.callToAction}
      </a>
    </div>
  );
}
requestAd使用時はインプレッション/クリック追跡を直接実装する必要があります。また、この方式ではバックフィル広告はサポートされていません。特別な場合でなければrenderAdを推奨します。

​
AdropAdResponse

requestAd()の戻り値です。
フィールドタイプ説明
codenumberレスポンスコード（0：成功、4000-4003：エラー）
msgstringレスポンスメッセージ
resultAdData広告データ（成功時のみ存在）

​
AdData

広告データオブジェクトです。イベントハンドラーでも同じ構造で渡されます。詳細はリファレンス > AdDataを参照してください。
フィールドタイプ説明
formatstring広告フォーマット（banner、nativeAd、backfill）
unitstringユニットID
headlinestring広告タイトル
bodystring広告説明
callToActionstringCTAボタンテキスト
assetstringメイン画像URL
destinationURLstringクリック時の移動先URL
profile.displayLogostring広告主ロゴURL
profile.displayNamestring広告主名
profile.linkstring広告主プロフィールリンク
extraRecord<string, string>追加テキスト項目

​
イベント処理

import { useEffect, useRef } from 'react';
import Adrop from '@adrop/ads-web-sdk';

function NativeAd({ unitId }: { unitId: string }) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const adrop = Adrop.instance();
    const filter = { unit: unitId };

    const handleReceived = (unit: string, adData: any) => {
      console.log('広告受信:', adData);
    };

    const handleNoFill = (unit: string) => {
      console.warn('広告なし:', unit);
    };

    const handleFailed = (unit: string) => {
      console.error('広告失敗:', unit);
    };

    const handleImpression = (unit: string) => {
      console.log('広告表示:', unit);
    };

    const handleClicked = (unit: string) => {
      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);

    if (containerRef.current) {
      adrop.renderAd(containerRef.current, {
        unit: unitId,
        trackMode: 1,
        isEntireClick: true
      });
    }

    return () => {
      adrop.off(Adrop.Events.AD_RECEIVED, handleReceived);
      adrop.off(Adrop.Events.AD_NO_FILL, handleNoFill);
      adrop.off(Adrop.Events.AD_FAILED, handleFailed);
      adrop.off(Adrop.Events.AD_IMPRESSION, handleImpression);
      adrop.off(Adrop.Events.AD_CLICKED, handleClicked);

    };
  }, [unitId]);

  return (
    <div ref={containerRef} className="native-ad">
      <div className="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>
  );
}

​
サポートするイベント

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