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

​
概要

Adrop Web SDKをReactプロジェクトに連携して、バナー広告とネイティブ広告を表示できます。

​
サポートする広告フォーマット

  • バナー広告
  • ネイティブ広告（カスタムUI対応）

​
要件

  • React 16.8以上
  • Node.js 14以上

​
インストール

NPMまたはYarnを使用してSDKをインストールします。 
npm install @adrop/ads-web-sdk

​
初期化

アプリのエントリーポイント（main.tsxまたはindex.tsx）でSDKを初期化します。SDKはシングルトンパターンで動作するため、一度だけ初期化すれば十分です。
main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Adrop } from '@adrop/ads-web-sdk';
import App from './App';

// アプリレンダリング前にSDKを初期化
Adrop.observe({
  appId: 'YOUR_APP_ID',
  debug: import.meta.env.DEV  // 開発環境でのみtrue
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

​
初期化オプション (AdropConfig)

​
appId
string
必須
Ad Controlコンソールで発行されたアプリID
​
uid
string
ユーザー識別子（ターゲティングに活用）
​
appKey
string
API認証キー（ユーザー属性更新時に必要）
​
debug
boolean
デフォルト:false
デバッグログを有効化
本番環境ではdebug: falseに設定してください。

​
インスタンスアクセス

初期化後、どこからでもAdrop.instance()でSDKにアクセスできます。 
import { Adrop } from '@adrop/ads-web-sdk';

function MyComponent() {
  const handleClick = () => {
    const adrop = Adrop.instance();
    // SDKを使用
  };

  return <button onClick={handleClick}>広告を読み込む</button>;
}

​
設定の動的変更

ログイン後にユーザーIDを設定するなど、ランタイムで設定を変更できます。 
// setConfigを使用
Adrop.instance().setConfig({
  uid: 'USER_ID',
  appKey: 'YOUR_APP_KEY'
});
ターゲティング広告が正常に動作するには、広告枠表示前にuidを設定してください。

​
WebView設定（バックフィル広告用）

WebアプリがWebViewで実行され、バックフィル広告を表示する場合は、ネイティブアプリの設定が必要です。以下のプラットフォーム別ガイドをご参照ください。

Android設定

Android WebView設定方法

iOS設定

iOS WebView設定方法

​
目次

バナー広告

バナー広告の実装

ネイティブ広告

ネイティブ広告の実装

ターゲティング設定

オーディエンス/コンテキストターゲティング

リファレンス

クラス、インターフェース、定数

サンプル

React、CDNサンプルコード