サンプル

概要

このドキュメントは、Adrop React Native SDKの実際の動作例を提供します。すべてのサンプルはTypeScriptで作成されており、実際のプロジェクトですぐに使用できます。

サンプルプロジェクト

GitHubで完全なサンプルプロジェクトを確認できます。

React Nativeサンプルプロジェクト

バナー広告サンプル

refを使用してバナー広告を手動で読み込み、エラーを処理する完全なサンプルです。

import React, { useMemo, useRef, useState } from 'react'
import {
    Button,
    Dimensions,
    Platform,
    StyleSheet,
    Text,
    View,
} from 'react-native'
import { AdropBanner, type AdropBannerMetadata } from 'adrop-ads-react-native'

interface IBanner {
    load: () => void
}

const BannerExample: React.FC = () => {
    const bannerRef = useRef<IBanner>(null)
    const emptyBannerRef = useRef<IBanner>(null)
    const [errorCode, setErrorCode] = useState('')
    const [emptyErrorCode, setEmptyErrorCode] = useState('')

    const unit = useMemo(() => {
        // 실제 배너 광고 유닛 ID를 사용하세요
        return Platform.OS === 'android'
            ? 'PUBLIC_TEST_UNIT_ID_320_50'
            : 'PUBLIC_TEST_UNIT_ID_320_50'
    }, [])

    const loadBanner = () => {
        bannerRef.current?.load()
        setErrorCode('')
    }

    const loadEmptyBanner = () => {
        emptyBannerRef.current?.load()
        setEmptyErrorCode('')
    }

    const onAdClicked = (unitId: string, metadata?: AdropBannerMetadata) =>
        console.log('배너 클릭됨', unitId, metadata)

    const onAdReceived = (unitId: string, metadata?: AdropBannerMetadata) =>
        console.log('배너 수신 성공', unitId, metadata)

    const onAdFailedToReceive = (unitId: string, error?: string) => {
        console.log('배너 수신 실패', unitId, error)
        setErrorCode(error ?? '')
    }

    const onAdImpression = (unitId: string, metadata?: AdropBannerMetadata) =>
        console.log('배너 노출됨', unitId, metadata)

    const onEmptyAdFailedToReceive = (_: string, error?: string) => {
        console.log('배너 수신 실패', _, error)
        setEmptyErrorCode(error ?? '')
    }

    const screenWidth = Dimensions.get('window').width

    return (
        <View style={styles.container}>
            <Button title={'バナーを読み込む (テスト広告)'} onPress={loadBanner} />

            <AdropBanner
                ref={bannerRef}
                unitId={unit}
                style={{ ...styles.banner, width: screenWidth }}
                autoLoad={false}
                onAdClicked={onAdClicked}
                onAdReceived={onAdReceived}
                onAdFailedToReceive={onAdFailedToReceive}
                onAdImpression={onAdImpression}
            />

            {errorCode && (
                <Text style={styles.error}>エラーコード: {errorCode}</Text>
            )}

            <View style={styles.divider} />

            <Button
                title={'バナーを読み込む (空の広告)'}
                onPress={loadEmptyBanner}
            />

            <AdropBanner
                ref={emptyBannerRef}
                unitId={'TEST_UNIT_ID'}
                style={{ ...styles.banner, width: screenWidth }}
                autoLoad={false}
                onAdFailedToReceive={onEmptyAdFailedToReceive}
            />

            {emptyErrorCode && (
                <Text style={styles.error}>エラーコード: {emptyErrorCode}</Text>
            )}
        </View>
    )
}

export default BannerExample

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        marginVertical: 50,
        paddingHorizontal: 16,
    },
    banner: {
        width: '100%',
        height: 80,
        marginVertical: 4,
    },
    error: {
        marginVertical: 2,
        color: 'black',
        textAlign: 'center',
    },
    divider: {
        width: '100%',
        height: 1,
        marginVertical: 16,
        backgroundColor: 'black',
    },
})

主な機能

手動ロード: autoLoad={false}に設定し、refを介して希望のタイミングで広告を読み込む
エラー処理: onAdFailedToReceiveコールバックでエラー状態を管理
複数のバナー: 複数のバナーを独立して管理
プラットフォーム対応: Platform.OSでプラットフォーム別のユニットIDを設定

ネイティブ広告サンプル

WebViewと一緒にネイティブ広告を使用し、バックフィル広告も処理するサンプルです。

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

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

    const disabledReset = !errorCode

    const unit = useMemo(() => {
        return Platform.OS === 'android'
            ? 'PUBLIC_TEST_UNIT_ID_NATIVE'
            : 'PUBLIC_TEST_UNIT_ID_NATIVE'
    }, [])

    const openUrl = useCallback((url: string) => {
        Linking.openURL(url).catch((err) =>
            console.error('URL 열기 실패:', err)
        )
    }, [])

    const listener = useMemo(
        (): AdropNativeAdListener => ({
            onAdReceived: (ad) => {
                console.log(
                    `네이티브 광고 수신: ${ad.unitId}`,
                    ad.properties,
                    ad.txId,
                    ad.campaignId,
                    ad.creativeId
                )
                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) => {
            let adropNativeAd = new AdropNativeAd(unitId)
            adropNativeAd.listener = listener
            setNativeAd((prev) => {
                prev?.destroy()
                return adropNativeAd
            })
            setIsLoaded(false)
            setErrorCode('')
        },
        [listener]
    )

    useEffect(() => {
        initialize(unit)
    }, [initialize, unit])

    const load = () => nativeAd?.load()

    const resetTestAd = () => {
        initialize(unit)
    }

    const resetEmptyAd = () => {
        initialize('TEST_UNIT_ID')
    }

    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.icon} />
                    <AdropProfileNameView style={styles.name} />
                </View>

                <AdropHeadLineView style={styles.headline} />
                <AdropBodyView style={styles.body} />

                {nativeAd?.isBackfilled ? (
                    <AdropMediaView style={styles.adStyle} />
                ) : (
                    <WebView
                        source={{
                            html: nativeAd?.properties?.creative ?? '',
                        }}
                        style={styles.adStyle}
                        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>
                <View style={styles.button}>
                    <Button
                        disabled={disabledReset}
                        title={'ネイティブ広告を初期化 (テスト広告)'}
                        onPress={resetTestAd}
                    />
                </View>
                {adView}
                <Text style={styles.description}>
                    ネイティブ広告を初期化した後、読み込みボタンをクリックすると広告が表示されます。
                </Text>
                <View style={styles.button}>
                    <Button
                        disabled={disabledReset}
                        title={'ネイティブ広告を初期化 (空の広告)'}
                        onPress={resetEmptyAd}
                    />
                </View>
                <Text style={styles.description}>
                    ネイティブ広告を初期化した後、読み込みボタンをクリックするとエラーコールバックが呼び出されます。
                </Text>
                {errorCode && (
                    <Text style={styles.error}>エラーコード: {errorCode}</Text>
                )}
            </View>
        </ScrollView>
    )
}

export default NativeAdExample

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        paddingVertical: 5,
        paddingHorizontal: 66,
    },
    button: {
        marginVertical: 4,
    },
    description: {
        color: 'black',
        marginBottom: 24,
        paddingHorizontal: 16,
        textAlign: 'center',
    },
    error: {
        color: 'black',
        marginVertical: 2,
    },
    adContainer: {
        paddingHorizontal: 16,
    },
    adStyle: {
        width: '100%',
        height: 360,
        marginBottom: 24,
    },
    icon: {
        width: 32,
        height: 32,
        marginRight: 8,
    },
    name: {
        fontSize: 14,
        fontWeight: 'bold',
        color: 'black',
    },
    headline: {
        fontSize: 16,
        fontWeight: 'bold',
        color: 'black',
    },
    body: {
        fontSize: 14,
        color: 'black',
        marginVertical: 16,
    },
    rowContainer: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        marginBottom: 8,
    },
})

主な機能

プロフィール情報表示: AdropProfileLogoViewとAdropProfileNameViewで広告主情報を表示
WebView統合: HTMLクリエイティブをWebViewでレンダリング
バックフィル処理: isBackfilledプロパティでバックフィル広告を分岐処理
URL処理: WebViewのナビゲーションイベントを処理して外部リンクを開く
メモリ管理: destroy()メソッドで広告オブジェクトをクリーンアップ

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

Hookを使用してインタースティシャル広告を実装するサンプルです。

import React, { useCallback, useMemo, useState } from 'react'
import { Button, Platform, StyleSheet, Text, View } from 'react-native'
import { useAdropInterstitialAd } from 'adrop-ads-react-native'

const InterstitialAdExample: React.FC = () => {
    const unit = useMemo(() => {
        return Platform.OS === 'android'
            ? 'PUBLIC_TEST_UNIT_ID_INTERSTITIAL'
            : 'PUBLIC_TEST_UNIT_ID_INTERSTITIAL'
    }, [])

    const [unitId, setUnitId] = useState(unit)

    const { load, show, errorCode, reset, isLoaded, isOpened, isReady } =
        useAdropInterstitialAd(unitId)

    const disabledReset = !(isOpened || errorCode)

    const loadAd = useCallback(() => {
        if (isReady) {
            load()
        }
    }, [isReady, load])

    const resetTestAd = useCallback(() => {
        reset()
        setUnitId(unit)
    }, [reset, unit])

    const resetEmptyAd = useCallback(() => {
        reset()
        setUnitId('TEST_UNIT_ID')
    }, [reset])

    return (
        <View style={styles.container}>
            <View style={styles.button}>
                <Button title={'インタースティシャル広告を読み込む'} onPress={loadAd} />
            </View>
            <View style={styles.button}>
                <Button
                    disabled={!isLoaded}
                    title={'インタースティシャル広告を表示'}
                    onPress={show}
                />
            </View>
            <View style={styles.button}>
                <Button
                    disabled={disabledReset}
                    title={'インタースティシャル広告を初期化 (テスト広告)'}
                    onPress={resetTestAd}
                />
            </View>
            <Text style={styles.description}>
                インタースティシャル広告を初期化した後、読み込みボタンをクリックすると広告が読み込まれます。
            </Text>
            <View style={styles.button}>
                <Button
                    disabled={disabledReset}
                    title={'インタースティシャル広告を初期化 (空の広告)'}
                    onPress={resetEmptyAd}
                />
            </View>
            <Text style={styles.description}>
                インタースティシャル広告を初期化した後、読み込みボタンをクリックするとエラーコールバックが呼び出されます。
            </Text>
            {errorCode && (
                <Text style={styles.error}>エラーコード: {errorCode}</Text>
            )}
        </View>
    )
}

export default InterstitialAdExample

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        marginVertical: 50,
    },
    button: {
        marginVertical: 4,
    },
    description: {
        color: 'black',
        marginBottom: 24,
        paddingHorizontal: 16,
        textAlign: 'center',
    },
    error: {
        color: 'black',
        marginVertical: 2,
    },
})

主な機能

Hook使用: useAdropInterstitialAd Hookで簡単な状態管理
状態確認: isLoaded、isOpened、isReady状態で広告の状態を追跡
エラー処理: errorCodeでエラー状態を確認
初期化: reset()メソッドで広告を初期化

インタースティシャル広告は画面全体を覆うため、ユーザーエクスペリエンスを考慮して適切なタイミングで表示することが重要です。

リワード広告サンプル

Hookを使用してリワード広告を実装するサンプルです。

import React, { useCallback, useMemo, useState } from 'react'
import { Button, Platform, StyleSheet, Text, View } from 'react-native'
import { useAdropRewardedAd } from 'adrop-ads-react-native'

const RewardedAdExample: React.FC = () => {
    const unit = useMemo(() => {
        return Platform.OS === 'android'
            ? 'PUBLIC_TEST_UNIT_ID_REWARDED'
            : 'PUBLIC_TEST_UNIT_ID_REWARDED'
    }, [])

    const [unitId, setUnitId] = useState(unit)

    const { load, show, errorCode, reset, isLoaded, isOpened, isReady } =
        useAdropRewardedAd(unitId)

    const disabledReset = !(isOpened || errorCode)

    const loadAd = useCallback(() => {
        if (isReady) {
            load()
        }
    }, [isReady, load])

    const resetTestAd = useCallback(() => {
        reset()
        setUnitId(unit)
    }, [reset, unit])

    const resetEmptyAd = useCallback(() => {
        reset()
        setUnitId('TEST_UNIT_ID')
    }, [reset])

    return (
        <View style={styles.container}>
            <View style={styles.button}>
                <Button title={'リワード広告を読み込む'} onPress={loadAd} />
            </View>
            <View style={styles.button}>
                <Button
                    disabled={!isLoaded}
                    title={'リワード広告を表示'}
                    onPress={show}
                />
            </View>
            <View style={styles.button}>
                <Button
                    disabled={disabledReset}
                    title={'リワード広告を初期化 (テスト広告)'}
                    onPress={resetTestAd}
                />
            </View>
            <Text style={styles.description}>
                リワード広告を初期化した後、読み込みボタンをクリックすると広告が読み込まれます。
            </Text>
            <View style={styles.button}>
                <Button
                    disabled={disabledReset}
                    title={'リワード広告を初期化 (空の広告)'}
                    onPress={resetEmptyAd}
                />
            </View>
            <Text style={styles.description}>
                リワード広告を初期化した後、読み込みボタンをクリックするとエラーコールバックが呼び出されます。
            </Text>
            {errorCode && (
                <Text style={styles.error}>エラーコード: {errorCode}</Text>
            )}
        </View>
    )
}

export default RewardedAdExample

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        marginVertical: 50,
    },
    button: {
        marginVertical: 4,
    },
    description: {
        color: 'black',
        marginBottom: 24,
        paddingHorizontal: 16,
        textAlign: 'center',
    },
    error: {
        color: 'black',
        marginVertical: 2,
    },
})

主な機能

Hook使用: useAdropRewardedAd Hookで簡単な状態管理
報酬処理: リスナーを介して報酬付与タイミングを確認(リスナー設定方法はリワード広告ガイドを参照)
状態管理: isLoaded、isOpened、isReadyで広告の状態を確認

リワード広告は、ユーザーが広告を最後まで視聴する必要があります。onEarnRewardコールバックでのみ報酬を付与してください。

ポップアップ広告サンプル

クラスを使用してポップアップ広告を実装しカスタマイズするサンプルです。

import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { Button, Platform, StyleSheet, Text, View } from 'react-native'
import {
    type AdropListener,
    AdropPopupAd,
    type AdropPopupAdColors,
} from 'adrop-ads-react-native'

const PopupAdExample: React.FC = () => {
    const [popupAd, setPopupAd] = useState<AdropPopupAd>()
    const [isLoaded, setIsLoaded] = useState(false)
    const [isShown, setIsShown] = useState(false)
    const [errorCode, setErrorCode] = useState('')

    const disabledReset = !(errorCode || isShown)

    const unit = useMemo(() => {
        return Platform.OS === 'android'
            ? 'PUBLIC_TEST_UNIT_ID_POPUP_BOTTOM'
            : 'PUBLIC_TEST_UNIT_ID_POPUP_BOTTOM'
    }, [])

    const listener: AdropListener = useMemo(() => {
        return {
            onAdImpression: (ad: AdropPopupAd) =>
                console.log(
                    `팝업 광고 노출: ${ad.unitId}, ${ad.createIds()}, ${
                        ad.txId
                    }, ${ad.campaignId} ${ad.destinationURL}`
                ),
            onAdClicked: (ad: AdropPopupAd) => {
                console.log(
                    `팝업 광고 클릭: ${ad.unitId}, ${ad.destinationURL}`
                )
                ad.close()
            },
            onAdReceived: (ad: AdropPopupAd) => {
                setIsLoaded(true)
                console.log(`팝업 광고 수신: ${ad.unitId}`)
                setErrorCode('')
            },
            onAdFailedToReceive: (_: AdropPopupAd, error: any) => {
                console.log('팝업 광고 수신 실패', error)
                setErrorCode(error)
            },
            onAdDidDismissFullScreen: (ad: AdropPopupAd) =>
                console.log(`팝업 광고 닫힘: ${ad.unitId}`),
            onAdDidPresentFullScreen: (ad: AdropPopupAd) =>
                console.log(`팝업 광고 표시됨: ${ad.unitId}`),
            onAdFailedToShowFullScreen: (_: AdropPopupAd, error: any) =>
                setErrorCode(error),
        } as AdropListener
    }, [])

    useEffect(() => {
        return () => {
            popupAd?.destroy()
        }
    }, [popupAd])

    const initialize = useCallback(
        (unitId: string) => {
            // 팝업 광고 색상 커스터마이징
            let hideForTodayTextColor = '#456'
            let backgroundColor = 'rgba(53, 255, 63, 0.3)'
            let customColors: AdropPopupAdColors = {
                hideForTodayTextColor,
                backgroundColor,
            }

            let adropPopupAd = new AdropPopupAd(unitId, customColors)
            adropPopupAd.listener = listener
            setPopupAd((prev) => {
                prev?.destroy()
                return adropPopupAd
            })
        },
        [listener]
    )

    useEffect(() => {
        initialize(unit)
    }, [initialize, unit])

    const load = () => popupAd?.load()
    const show = () => {
        popupAd?.show()
        setIsShown(true)
    }
    const resetTestAd = () => {
        initialize(unit)
        resetState()
    }

    const resetEmptyAd = () => {
        initialize('TEST_UNIT_ID')
        resetState()
    }

    const resetState = () => {
        setIsLoaded(false)
        setIsShown(false)
        setErrorCode('')
    }

    return (
        <View style={styles.container}>
            <View style={styles.button}>
                <Button title={'ポップアップ広告を読み込む'} onPress={load} />
            </View>
            <View style={styles.button}>
                <Button
                    disabled={!isLoaded}
                    title={'ポップアップ広告を表示'}
                    onPress={show}
                />
            </View>
            <View style={styles.button}>
                <Button
                    disabled={disabledReset}
                    title={'ポップアップ広告を初期化 (テスト広告)'}
                    onPress={resetTestAd}
                />
            </View>
            <Text style={styles.description}>
                ポップアップ広告を初期化した後、読み込みボタンをクリックすると広告が読み込まれます。
            </Text>
            <View style={styles.button}>
                <Button
                    disabled={disabledReset}
                    title={'ポップアップ広告を初期化 (空の広告)'}
                    onPress={resetEmptyAd}
                />
            </View>
            <Text style={styles.description}>
                ポップアップ広告を初期化した後、読み込みボタンをクリックするとエラーコールバックが呼び出されます。
            </Text>
            {errorCode && (
                <Text style={styles.error}>エラーコード: {errorCode}</Text>
            )}
        </View>
    )
}

export default PopupAdExample

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        marginVertical: 50,
    },
    button: {
        marginVertical: 4,
    },
    description: {
        color: 'black',
        marginBottom: 24,
        paddingHorizontal: 16,
        textAlign: 'center',
    },
    error: {
        color: 'black',
        marginVertical: 2,
    },
})

主な機能

クラスベース: AdropPopupAdクラスを直接使用
カラーカスタマイズ: AdropPopupAdColorsでポップアップスタイルを設定
クリック時に閉じる: onAdClickedでad.close()を呼び出し
メモリ管理: useEffectクリーンアップでdestroy()を呼び出し

ターゲティング設定サンプル

広告ターゲティングを設定するサンプルです。

import React, { useEffect } from 'react'
import { View } from 'react-native'
import Adrop, { AdropGender } from 'adrop-ads-react-native'

const TargetingExample: React.FC = () => {
    useEffect(() => {
        // 사용자 성별 설정
        Adrop.setProperty('gender', AdropGender.MALE)

        // 사용자 나이 설정
        Adrop.setProperty('age', 25)

        // 사용자 생년월일 설정
        Adrop.setProperty('birth', '1998-05-20')

        // 커스텀 속성 설정 (문자열)
        Adrop.setProperty('customKey', 'customValue')

        // 커스텀 속성 설정 (숫자)
        Adrop.setProperty('level', 10)

        // 커스텀 속성 설정 (불린)
        Adrop.setProperty('isPremium', true)
    }, [])

    return <View />
}

export default TargetingExample

使用可能なターゲティングプロパティ

プロパティ	タイプ	説明
`gender`	`AdropGender`	ユーザーの性別(`MALE`、`FEMALE`、`UNKNOWN`)
`age`	`number`	ユーザーの年齢
`birth`	`string`	ユーザーの生年月日(YYYY-MM-DD)
カスタムキー	`string \| number \| boolean`	アプリで定義されたカスタムプロパティ

ターゲティングプロパティは広告リクエスト時にサーバーに送信され、より関連性の高い広告を表示するために使用されます。

エラー処理ユーティリティ

エラーコードを人間が読めるメッセージに変換するユーティリティのサンプルです。

import { AdropErrorCode } from 'adrop-ads-react-native'

export const descriptionOf = (errorCode: string): string => {
    switch (errorCode) {
        case AdropErrorCode.network:
            return 'ネットワーク状態が不安定です'
        case AdropErrorCode.internal:
            return 'SDK内部エラーが発生しました'
        case AdropErrorCode.initialize:
            return 'Adropを先に初期化する必要があります'
        case AdropErrorCode.invalidUnit:
            return '広告ユニットIDが無効です'
        case AdropErrorCode.notTargetCountry:
            return 'サポートされていない国ではSDKを使用できません'
        case AdropErrorCode.inactive:
            return 'アクティブな広告キャンペーンがありません'
        case AdropErrorCode.adNoFill:
            return '条件に合った広告を受信できません。もう一度お試しください'
        case AdropErrorCode.adDuplicated:
            return '広告受信後は再度ロードできません'
        case AdropErrorCode.adLoading:
            return '広告リクエスト後、サーバーの応答を待っています'
        case AdropErrorCode.adEmpty:
            return '受信した広告がありません'
        case AdropErrorCode.adShown:
            return 'この広告はすでに表示されています'
        case AdropErrorCode.adHideForToday:
            return '本日はこれ以上ロードできません'
        case AdropErrorCode.adLandscapeUnsupported:
            return '横向きモードでは広告を表示できません'
        case AdropErrorCode.undefined:
            return '未定義のエラーです'
        default:
            return ''
    }
}

エラーコードリスト

エラーコード	説明
`network`	ネットワーク接続の問題
`internal`	SDK内部エラー
`initialize`	SDK初期化が必要
`invalidUnit`	無効なユニットID
`notTargetCountry`	サポートされていない国
`inactive`	アクティブなキャンペーンがない
`adNoFill`	広告がない
`adDuplicated`	重複ロードの試み
`adLoading`	広告ロード中
`adEmpty`	広告未受信
`adShown`	すでに表示された広告
`adHideForToday`	今日は表示しないを選択
`adLandscapeUnsupported`	横向きモード非対応

完全な統合サンプル

すべての広告フォーマットを1つのアプリで使用するサンプルです。

import React, { useEffect } from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import Adrop from 'adrop-ads-react-native'
import BannerExample from './views/BannerExample'
import NativeAdExample from './views/NativeAdExample'
import InterstitialAdExample from './views/InterstitialAdExample'
import RewardedAdExample from './views/RewardedAdExample'
import PopupAdExample from './views/PopupAdExample'

const Tab = createBottomTabNavigator()

const App = () => {
    useEffect(() => {
        // Adrop SDK 초기화
        Adrop.initialize(false) // 테스트 모드: false, 프로덕션: true
    }, [])

    return (
        <NavigationContainer>
            <Tab.Navigator>
                <Tab.Screen
                    name="バナー"
                    component={BannerExample}
                />
                <Tab.Screen
                    name="ネイティブ"
                    component={NativeAdExample}
                />
                <Tab.Screen
                    name="インタースティシャル"
                    component={InterstitialAdExample}
                />
                <Tab.Screen
                    name="リワード"
                    component={RewardedAdExample}
                />
                <Tab.Screen
                    name="ポップアップ"
                    component={PopupAdExample}
                />
            </Tab.Navigator>
        </NavigationContainer>
    )
}

export default App

ベストプラクティス

1. メモリ管理

広告オブジェクトは使用後に必ずクリーンアップしてください。

useEffect(() => {
    const nativeAd = new AdropNativeAd('YOUR_UNIT_ID')

    return () => {
        nativeAd.destroy()
    }
}, [])

2. エラーハンドリング

すべての広告ロード時にエラー処理を実装してください。

const [error, setError] = useState<string | null>(null)

const handleAdFailedToReceive = (unitId: string, errorCode?: string) => {
    setError(errorCode ?? '不明なエラー')
    // エラーログ、代替コンテンツの表示など
}

3. 状態管理

Hookを使用して広告の状態を追跡してください。

const { isLoaded, isOpened, isReady, errorCode } = useAdropInterstitialAd(unitId)

// ボタンを無効化
<Button
    disabled={!isLoaded}
    title="広告を表示"
    onPress={show}
/>

4. プラットフォーム分岐

プラットフォームごとに異なるユニットIDを使用してください。

const unitId = useMemo(() => {
    return Platform.OS === 'android'
        ? 'ANDROID_UNIT_ID'
        : 'IOS_UNIT_ID'
}, [])

5. テストユニットIDの使用

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

const isProduction = false

const unitId = isProduction
    ? 'YOUR_PRODUCTION_UNIT_ID'
    : 'PUBLIC_TEST_UNIT_ID_320_50'

次のステップ

APIリファレンス

完全なAPIドキュメントを確認

バナー広告

バナー広告の詳細ガイド

ネイティブ広告

ネイティブ広告の詳細ガイド

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

インタースティシャル広告の詳細ガイド

SDKガイド

AI

Android

iOS

React Native

Flutter

Web

REST API

概要

サンプルプロジェクト

React Nativeサンプルプロジェクト

バナー広告サンプル

主な機能

ネイティブ広告サンプル

主な機能

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

主な機能

リワード広告サンプル

主な機能

ポップアップ広告サンプル

主な機能

ターゲティング設定サンプル

使用可能なターゲティングプロパティ

エラー処理ユーティリティ

エラーコードリスト

完全な統合サンプル

ベストプラクティス

1. メモリ管理

2. エラーハンドリング

3. 状態管理

4. プラットフォーム分岐

5. テストユニットIDの使用

次のステップ

APIリファレンス

バナー広告

ネイティブ広告

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

SDKガイド

AI

Android

iOS

React Native

Flutter

Web

REST API

​概要

​サンプルプロジェクト

React Nativeサンプルプロジェクト

​バナー広告サンプル

​主な機能

​ネイティブ広告サンプル

​主な機能

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

​主な機能

​リワード広告サンプル

​主な機能

​ポップアップ広告サンプル

​主な機能

​ターゲティング設定サンプル

​使用可能なターゲティングプロパティ

​エラー処理ユーティリティ

​エラーコードリスト

​完全な統合サンプル

​ベストプラクティス

​1. メモリ管理

​2. エラーハンドリング

​3. 状態管理

​4. プラットフォーム分岐

​5. テストユニットIDの使用

​次のステップ

APIリファレンス

バナー広告

ネイティブ広告

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

概要

サンプルプロジェクト

バナー広告サンプル

主な機能

ネイティブ広告サンプル

主な機能

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

主な機能

リワード広告サンプル

主な機能

ポップアップ広告サンプル

主な機能

ターゲティング設定サンプル

使用可能なターゲティングプロパティ

エラー処理ユーティリティ

エラーコードリスト

完全な統合サンプル

ベストプラクティス

1. メモリ管理

2. エラーハンドリング

3. 状態管理

4. プラットフォーム分岐

5. テストユニットIDの使用

次のステップ