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

​
概要

React NativeアプリのWebViewでバックフィル広告を表示できます。Adrop SDKは簡単に統合できるuseAdropWebViewフックと、手動のregisterWebView APIを提供しています。

​
前提条件

プロジェクトにreact-native-webviewパッケージをインストールしてください。 
npm install react-native-webview

yarn add react-native-webview
WebViewバックフィル広告には、AndroidとiOSの両方でadrop-ads-backfillの設定が必要です。設定方法ははじめにを参照してください。

​
プラットフォーム設定

WebViewでバックフィル広告を有効にするには、ネイティブプラットフォームの設定が必要です。
android/app/src/main/AndroidManifest.xmlに以下を追加してください：
AndroidManifest.xml
<manifest>
    <application>
        <!-- WebViewバックフィル広告連携 -->
        <meta-data
            android:name="com.google.android.gms.ads.INTEGRATION_MANAGER"
            android:value="webview"/>
    </application>
</manifest>
この設定はWebViewでバックフィル広告が正常に動作するために必要です。設定がないと、バックフィル広告が表示されない場合があります。

​
useAdropWebViewフックの使用（推奨）

useAdropWebViewフックがWebViewの登録を自動的に処理します。 
import React from 'react'
import { View } from 'react-native'
import { WebView } from 'react-native-webview'
import { useAdropWebView } from 'adrop-ads-react-native'

const WebViewScreen: React.FC = () => {
    const { containerRef, isReady, onLayout } = useAdropWebView()

    return (
        <View ref={containerRef} style={{ flex: 1 }} onLayout={onLayout}>
            <WebView
                source={isReady ? { uri: 'https://your-website.com' } : { html: '' }}
                style={{ flex: 1 }}
                javaScriptEnabled={true}
                thirdPartyCookiesEnabled={true}
                mediaPlaybackRequiresUserAction={false}
                allowsInlineMediaPlayback={true}
            />
        </View>
    )
}
戻り値：
プロパティ型説明
containerRefReact.RefObject<View>WebViewをラップするViewに接続するref
isReadybooleanWebViewの登録完了状態
onLayout() => voidレイアウト時に登録をトリガーするコールバック
isReadyがtrueになってからWebコンテンツをロードしてください。登録完了前にURLを渡すと、広告が表示されない場合があります。

​
手動登録

Adrop.registerWebViewを使用して手動でWebViewを登録することもできます。 
import React, { useEffect, useRef, useState } from 'react'
import { findNodeHandle, View } from 'react-native'
import { WebView } from 'react-native-webview'
import { Adrop } from 'adrop-ads-react-native'

const WebViewScreen: React.FC = () => {
    const containerRef = useRef<View>(null)
    const [isReady, setIsReady] = useState(false)

    useEffect(() => {
        const register = async () => {
            if (containerRef.current) {
                const tag = findNodeHandle(containerRef.current)
                if (tag != null) {
                    await Adrop.registerWebView(tag)
                    setIsReady(true)
                }
            }
        }
        register()
    }, [])

    return (
        <View ref={containerRef} style={{ flex: 1 }}>
            <WebView
                source={isReady ? { uri: 'https://your-website.com' } : { html: '' }}
                style={{ flex: 1 }}
                javaScriptEnabled={true}
                thirdPartyCookiesEnabled={true}
                mediaPlaybackRequiresUserAction={false}
                allowsInlineMediaPlayback={true}
            />
        </View>
    )
}
react-native-webviewのrefはimperative handleであるため、findNodeHandleは直接動作しません。WebViewをViewでラップし、そのViewのrefを使用してください。

​
WebView設定

バックフィル広告が正常に動作するには、以下のWebView propsが必要です：
Prop値説明
javaScriptEnabledtrueJavaScript実行を有効化
thirdPartyCookiesEnabledtrueサードパーティCookieを有効化（Android）
mediaPlaybackRequiresUserActionfalseメディア自動再生を許可
allowsInlineMediaPlaybacktrueインラインメディア再生を許可（iOS）

​
外部URLの処理

アプリで自社ドメイン以外のURLを外部ブラウザで開くロジックがある場合、広告リソースリクエスト（例：googleads.g.doubleclick.net）がブロックされないようにする必要があります。 広告リソース（iframe、スクリプトなど）は広告SDKによって自動的にロードされ、ユーザーが直接クリックしたものではありません。ユーザーが直接クリックしたナビゲーションのみを外部ブラウザにリダイレクトしてください。 
import { Linking } from 'react-native'

const allowedHost = 'my-domain.com'

<WebView
    source={{ uri: 'https://my-domain.com' }}
    style={{ flex: 1 }}
    javaScriptEnabled={true}
    thirdPartyCookiesEnabled={true}
    mediaPlaybackRequiresUserAction={false}
    allowsInlineMediaPlayback={true}
    onShouldStartLoadWithRequest={(request) => {
        const url = request.url
        const host = new URL(url).host

        // ユーザーが直接クリックした場合のみ外部ブラウザで開く
        // 広告リソース（例：googleads.g.doubleclick.net）はiframe/スクリプトでロードされるためブロックしない
        if (!host.includes(allowedHost) && request.navigationType === 'click') {
            Linking.openURL(url)
            return false
        }

        return true
    }}
/>
自社ドメイン以外のすべてのリクエストをブロックまたはリダイレクトしないでください。googleads.g.doubleclick.netのような広告リソースはバックフィル広告のプロセスで自動的にロードされ、WebView内で正常にロードされる必要があります。

​
関連ドキュメント

バナー広告

バナー広告の実装方法

リファレンス

APIリファレンス

サンプル

サンプルコード