はじめに

概要

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

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

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

要件

React 16.8以上
Node.js 14以上

インストール

NPMまたはYarnを使用してSDKをインストールします。

npm install @adrop/ads-web-sdk

yarn add @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)

string

必須

Ad Controlコンソールで発行されたアプリID

string

ユーザー識別子（ターゲティングに活用）

string

API認証キー（ユーザー属性更新時に必要）

boolean

デフォルト:false

デバッグログを有効化

'responsive' | 'fixed'

デフォルト:"responsive"

媒体全体のバックフィルレンダリングモード。スロット単位のオプションが優先されます。詳細はバックフィルレンダリングモードガイドを参照してください。（SDK 1.2.3+）

本番環境では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サンプルコード

サンプル

バナー広告

SDKガイド

AI

Android

iOS

React Native

Flutter

Web

REST API

概要

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

要件

インストール

初期化

初期化オプション (AdropConfig)

インスタンスアクセス

設定の動的変更

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

Android設定

iOS設定

目次

バナー広告

ネイティブ広告

ターゲティング設定

リファレンス

サンプル

​概要

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

​要件

​インストール

​初期化

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

​インスタンスアクセス

​設定の動的変更

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

Android設定

iOS設定

​目次

バナー広告

ネイティブ広告

ターゲティング設定

リファレンス

サンプル

概要

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

要件

インストール

初期化

初期化オプション (AdropConfig)

インスタンスアクセス

設定の動的変更

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

目次