Adrop Web SDKをReactプロジェクトに連携して、バナー広告とネイティブ広告を表示できます。
サポートする広告フォーマット
- React 16.8以上
- Node.js 14以上
インストール
NPMまたはYarnを使用してSDKをインストールします。
npm install @adrop/ads-web-sdk
初期化
アプリのエントリーポイント（main.tsxまたはindex.tsx）でSDKを初期化します。SDKはシングルトンパターンで動作するため、一度だけ初期化すれば十分です。
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)
本番環境では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を設定してください。
