WebViewガイド

概要

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
iOS

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>

ios/{YourApp}/Info.plistに以下のキーを追加してください：

Info.plist

<key>GADIntegrationManager</key>
<string>webview</string>

この設定は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>
    )
}

戻り値：

プロパティ	型	説明
`containerRef`	`React.RefObject<View>`	WebViewをラップする`View`に接続するref
`isReady`	`boolean`	WebViewの登録完了状態
`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	値	説明
`javaScriptEnabled`	`true`	JavaScript実行を有効化
`thirdPartyCookiesEnabled`	`true`	サードパーティCookieを有効化（Android）
`mediaPlaybackRequiresUserAction`	`false`	メディア自動再生を許可
`allowsInlineMediaPlayback`	`true`	インラインメディア再生を許可（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リファレンス

サンプル

サンプルコード

SDKガイド

AI

Android

iOS

React Native

Flutter

Web

REST API

概要

前提条件

プラットフォーム設定

useAdropWebViewフックの使用（推奨）

手動登録

WebView設定

外部URLの処理

関連ドキュメント

バナー広告

リファレンス

サンプル

​概要

​前提条件

​プラットフォーム設定

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

​手動登録

​WebView設定

​外部URLの処理

​関連ドキュメント

バナー広告

リファレンス

サンプル

概要

前提条件

プラットフォーム設定

useAdropWebViewフックの使用（推奨）

手動登録

WebView設定

外部URLの処理

関連ドキュメント