ネイティブ広告

概要

ネイティブ広告はアプリのデザインに合わせて広告UIを自由にカスタマイズできる広告フォーマットです。広告素材（画像、動画）、タイトル、説明、CTAボタンなどの要素を個別に配置して自然なユーザー体験を提供できます。

主な機能

完全なUIカスタマイズ：アプリのデザインシステムに合わせて広告レイアウトを自由に構成
多様なメディア対応：画像および動画広告素材対応
柔軟なクリック処理：全体クリックまたはカスタムクリック処理が可能
プロフィール情報表示：広告主プロフィールロゴおよび名前対応
バックフィル広告対応：バックフィル広告かどうか確認可能

AdropNativeAdクラス

ネイティブ広告をロードして管理するメインクラスです。

コンストラクタ

new AdropNativeAd(unitId: string, useCustomClick?: boolean)

unitId

string

required

広告ユニットID（コンソールで発行）

useCustomClick

boolean

default:"false"

カスタムクリック処理使用有無

true：開発者が直接クリック処理を実装（ビデオ広告コントローラー使用可能）
false：AdropNativeAdViewがすべてのクリックイベントを自動処理

メソッド

メソッド	説明
`load()`	広告をリクエストしてロードします
`destroy()`	広告リソースを解放します

プロパティ

プロパティ	タイプ	説明
`isLoaded`	`boolean`	広告ロード完了有無（読み取り専用）
`unitId`	`string`	広告ユニットID（読み取り専用）
`useCustomClick`	`boolean`	カスタムクリック処理使用有無（読み取り専用）
`creativeId`	`string`	広告素材ID（読み取り専用）
`txId`	`string`	トランザクションID（読み取り専用）
`campaignId`	`string`	キャンペーンID（読み取り専用）
`isBackfilled`	`boolean`	バックフィル広告かどうか（読み取り専用）
`properties`	`AdropNativeProperties`	広告プロパティ情報（読み取り専用）
`listener`	`AdropNativeAdListener`	広告イベントリスナー

AdropNativeAdViewコンポーネント

ネイティブ広告を表示するコンテナコンポーネントです。

Props

interface Props extends ViewProps {
  nativeAd?: AdropNativeAd
}

nativeAd

AdropNativeAd

表示するネイティブ広告インスタンス

使用例

<AdropNativeAdView nativeAd={nativeAd} style={styles.adContainer}>
  {/* 広告要素 */}
</AdropNativeAdView>

AdropNativeAdViewは広告コンテキストを提供するため、すべての広告要素ビューはこのコンポーネント内部に配置する必要があります。

ネイティブ広告要素ビュー

AdropProfileLogoView

広告主プロフィールロゴを表示する画像コンポーネントです。

<AdropProfileLogoView style={styles.profileLogo} />

Props: ImageProps（React NativeのImageコンポーネントプロパティ）

AdropProfileNameView

広告主プロフィール名を表示するテキストコンポーネントです。

<AdropProfileNameView style={styles.profileName} />

Props: TextProps（React NativeのTextコンポーネントプロパティ）

AdropHeadLineView

広告タイトルを表示するテキストコンポーネントです。

<AdropHeadLineView style={styles.headline} />

Props: TextProps（React NativeのTextコンポーネントプロパティ）

AdropBodyView

広告本文を表示するテキストコンポーネントです。

<AdropBodyView style={styles.body} />

Props: TextProps（React NativeのTextコンポーネントプロパティ）

AdropMediaView

広告画像または動画を表示するメディアコンポーネントです。

<AdropMediaView style={styles.media} />

Props: ViewProps（React NativeのViewコンポーネントプロパティ）

バックフィル広告でない場合、動画広告はWebViewを使用して直接レンダリングする必要があります（実装例を参照）。

AdropCallToActionView

行動誘導フレーズ（CTA）を表示するテキストコンポーネントです。

<AdropCallToActionView style={styles.cta} />

Props: TextProps（React NativeのTextコンポーネントプロパティ）

AdropAdvertiserView

広告主名を表示するテキストコンポーネントです。

<AdropAdvertiserView style={styles.advertiser} />

Props: TextProps（React NativeのTextコンポーネントプロパティ）

AdropIconView

広告アイコンを表示する画像コンポーネントです。

<AdropIconView style={styles.icon} />

Props: ImageProps（React NativeのImageコンポーネントプロパティ）

AdropNativeAdListenerインターフェース

広告イベントを処理するリスナーインターフェースです。

interface AdropNativeAdListener {
  onAdReceived?: (ad: AdropNativeAd) => void
  onAdClicked?: (ad: AdropNativeAd) => void
  onAdImpression?: (ad: AdropNativeAd) => void
  onAdFailedToReceive?: (ad: AdropNativeAd, errorCode?: any) => void
}

コールバックメソッド	説明
`onAdReceived`	広告受信成功時に呼び出されます
`onAdClicked`	広告クリック時に呼び出されます
`onAdImpression`	広告露出時に呼び出されます
`onAdFailedToReceive`	広告受信失敗時に呼び出されます

AdropNativePropertiesタイプ

広告プロパティ情報を含むタイプです。

type AdropNativeProperties = {
  icon?: string                      // アイコン画像URL
  cover?: string                     // カバー画像URL
  headline?: string                  // 広告タイトル
  body?: string                      // 広告本文
  creative?: string                  // 広告素材HTML（WebViewレンダリング用）
  asset?: string                     // アセット情報
  destinationURL?: string            // 遷移先URL
  advertiserURL?: string             // 広告主URL
  accountTag?: string                // アカウントタグ
  creativeTag?: string               // 素材タグ
  advertiser?: string                // 広告主名
  callToAction?: string              // 行動誘導フレーズ
  profile?: AdropNativeProfile       // プロフィール情報
  extra?: Record<string, string>     // 追加情報
  isBackfilled?: boolean             // バックフィル広告かどうか
}

AdropNativeProfileタイプ

広告主プロフィール情報を含むタイプです。

type AdropNativeProfile = {
  displayName: string                // プロフィール表示名
  displayLogo: string                // プロフィールロゴ画像URL
}

実装例

以下はネイティブ広告を実装する完全な例です。

import React, { useCallback, useEffect, useMemo, useState } from 'react'
import {
  AdropBodyView,
  AdropHeadLineView,
  AdropMediaView,
  AdropNativeAd,
  AdropNativeAdView,
  AdropProfileLogoView,
  AdropProfileNameView,
} from 'adrop-ads-react-native'
import type { AdropNativeAdListener } from 'adrop-ads-react-native'
import { WebView } from 'react-native-webview'
import {
  Button,
  Dimensions,
  ScrollView,
  StyleSheet,
  Text,
  View,
  Linking,
  Platform,
} from 'react-native'

const NativeAdExample: React.FC = () => {
  const [nativeAd, setNativeAd] = useState<AdropNativeAd>()
  const [isLoaded, setIsLoaded] = useState(false)
  const [errorCode, setErrorCode] = useState('')

  // URL開きハンドラー
  const openUrl = useCallback((url: string) => {
    Linking.openURL(url).catch((err) =>
      console.error('Failed to open URL:', err)
    )
  }, [])

  // 広告イベントリスナー
  const listener = useMemo(
    (): AdropNativeAdListener => ({
      onAdReceived: (ad) => {
        console.log('広告受信:', ad.unitId, ad.properties)
        setIsLoaded(true)
        setErrorCode('')
      },
      onAdFailedToReceive: (_, error) => {
        console.log('広告受信失敗:', error)
        setErrorCode(error)
      },
      onAdClicked: (ad) => {
        console.log('広告クリック:', ad.unitId)
      },
      onAdImpression: (ad) => {
        console.log('広告露出:', ad.unitId)
      },
    }),
    []
  )

  // 広告初期化
  const initialize = useCallback(
    (unitId: string) => {
      const adropNativeAd = new AdropNativeAd(unitId)
      adropNativeAd.listener = listener

      setNativeAd((prev) => {
        prev?.destroy()
        return adropNativeAd
      })

      setIsLoaded(false)
      setErrorCode('')
    },
    [listener]
  )

  // コンポーネントマウント時に広告初期化
  useEffect(() => {
    initialize('YOUR_UNIT_ID')

    // コンポーネントアンマウント時に広告解放
    return () => {
      nativeAd?.destroy()
    }
  }, [])

  // 広告ロード
  const load = () => nativeAd?.load()

  // 広告ビューレンダリング
  const adView = useMemo(() => {
    if (!isLoaded) return null

    return (
      <AdropNativeAdView
        nativeAd={nativeAd}
        style={{
          ...styles.adContainer,
          width: Dimensions.get('window').width,
        }}
      >
        {/* プロフィール領域 */}
        <View style={styles.rowContainer}>
          <AdropProfileLogoView style={styles.profileLogo} />
          <AdropProfileNameView style={styles.profileName} />
        </View>

        {/* 広告タイトル */}
        <AdropHeadLineView style={styles.headline} />

        {/* 広告本文 */}
        <AdropBodyView style={styles.body} />

        {/* メディア領域 */}
        {nativeAd?.isBackfilled ? (
          // バックフィル広告：AdropMediaView使用
          <AdropMediaView style={styles.media} />
        ) : (
          // 一般広告：WebViewでレンダリング
          <WebView
            source={{
              html: nativeAd?.properties?.creative ?? '',
            }}
            style={styles.media}
            javaScriptEnabled={true}
            mediaPlaybackRequiresUserAction={false}
            allowsInlineMediaPlayback={true}
            scrollEnabled={false}
            onNavigationStateChange={(event) => {
              // Android WebViewイベント
              if (
                event.url &&
                event.url !== 'about:blank' &&
                !event.url.startsWith('data:')
              ) {
                openUrl(event.url)
              }
            }}
            onOpenWindow={(event) => {
              // iOS WebViewイベント（window.open）
              if (event.nativeEvent?.targetUrl) {
                openUrl(event.nativeEvent.targetUrl)
              }
            }}
          />
        )}
      </AdropNativeAdView>
    )
  }, [isLoaded, nativeAd, openUrl])

  return (
    <ScrollView>
      <View style={styles.container}>
        {/* 広告ロードボタン */}
        <View style={styles.button}>
          <Button title="広告ロード" onPress={load} />
        </View>

        {/* 広告ビュー */}
        {adView}

        {/* エラー表示 */}
        {errorCode && (
          <Text style={styles.error}>
            Error: {errorCode}
          </Text>
        )}
      </View>
    </ScrollView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 5,
    paddingHorizontal: 16,
  },
  button: {
    marginVertical: 8,
  },
  adContainer: {
    paddingHorizontal: 16,
  },
  rowContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    marginBottom: 8,
  },
  profileLogo: {
    width: 32,
    height: 32,
    marginRight: 8,
    borderRadius: 16,
  },
  profileName: {
    fontSize: 14,
    fontWeight: 'bold',
    color: 'black',
  },
  headline: {
    fontSize: 16,
    fontWeight: 'bold',
    color: 'black',
    marginTop: 8,
  },
  body: {
    fontSize: 14,
    color: 'black',
    marginVertical: 8,
  },
  media: {
    width: '100%',
    height: 360,
    marginTop: 8,
  },
  error: {
    color: 'red',
    marginVertical: 8,
  },
})

export default NativeAdExample

テストユニットID

開発およびテスト時には以下のテストユニットIDを使用してください。

プラットフォーム	フォーマット	テストユニットID
Android/iOS	ネイティブ（画像）	`PUBLIC_TEST_UNIT_ID_NATIVE`
Android/iOS	ネイティブビデオ（16:9）	`PUBLIC_TEST_UNIT_ID_NATIVE_VIDEO_16_9`
Android/iOS	ネイティブビデオ（9:16）	`PUBLIC_TEST_UNIT_ID_NATIVE_VIDEO_9_16`

プロダクション配布前に必ず実際のユニットIDに置き換えてください。

次のステップ

バナー広告

バナー広告を実装する

インタースティシャル広告

インタースティシャル広告を実装する

ポップアップ広告

ポップアップ広告を実装する

リワード広告

リワード広告を実装する

SDKガイド

AI

Android

iOS

React Native

Flutter

Web

REST API

概要

主な機能

AdropNativeAdクラス

コンストラクタ

メソッド

プロパティ

AdropNativeAdViewコンポーネント

Props

使用例

ネイティブ広告要素ビュー

AdropProfileLogoView

AdropProfileNameView

AdropHeadLineView

AdropBodyView

AdropMediaView

AdropCallToActionView

AdropAdvertiserView

AdropIconView

AdropNativeAdListenerインターフェース

AdropNativePropertiesタイプ

AdropNativeProfileタイプ

実装例

テストユニットID

次のステップ

バナー広告

インタースティシャル広告

ポップアップ広告

リワード広告

SDKガイド

AI

Android

iOS

React Native

Flutter

Web

REST API

​概要

​主な機能

​AdropNativeAdクラス

​コンストラクタ

​メソッド

​プロパティ

​AdropNativeAdViewコンポーネント

​Props

​使用例

​ネイティブ広告要素ビュー

​AdropProfileLogoView

​AdropProfileNameView

​AdropHeadLineView

​AdropBodyView

​AdropMediaView

​AdropCallToActionView

​AdropAdvertiserView

​AdropIconView

​AdropNativeAdListenerインターフェース

​AdropNativePropertiesタイプ

​AdropNativeProfileタイプ

​実装例

​テストユニットID

​次のステップ

バナー広告

インタースティシャル広告

ポップアップ広告

リワード広告

概要

主な機能

AdropNativeAdクラス

コンストラクタ

メソッド

プロパティ

AdropNativeAdViewコンポーネント

Props

使用例

ネイティブ広告要素ビュー

AdropProfileLogoView

AdropProfileNameView

AdropHeadLineView

AdropBodyView

AdropMediaView

AdropCallToActionView

AdropAdvertiserView

AdropIconView

AdropNativeAdListenerインターフェース

AdropNativePropertiesタイプ

AdropNativeProfileタイプ

実装例

テストユニットID

次のステップ