RN: Expo Google AdMob

npm install react-native-google-mobile-ads expo-build-properties expo-tracking-transparency

app.json

{
  "expo": {
    "plugins": [
      "react-native-google-mobile-ads",
        {
          "userTrackingPermission": "This identifier will be used to deliver personalized ads to you."
        }
    ],
    "android": {
      "config": {
        "googleMobileAdsAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx"
      }
    },
    "ios": {
      "config": {
        "googleMobileAdsAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
        "skAdNetworkItems": [
          "cstr6suwn9.skadnetwork",
          "4fzdc2evr5.skadnetwork",
          // ... 다른 항목들 추가
        ]
    }
  },
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-7599683938794734~2775151817",
    "ios_app_id": "ca-app-pub-7599683938794734~2442085688"
  }
}

배너광고

import React, { useState, useEffect } from 'react'
import { View } from 'react-native'
import {
  BannerAd,
  InterstitialAd,
  TestIds,
  AdEventType,
  BannerAdSize,
} from 'react-native-google-mobile-ads'

const BannerAds = () => {
  const [interstitialLoaded, setInterstitialLoaded] = useState(false)
  const [interstitial] = useState(
    InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL, {
      requestNonPersonalizedAdsOnly: true,
      keywords: ['fashion', 'clothing'],
    })
  )

  useEffect(() => {
    interstitial.load()

    const unsubscribeLoaded = interstitial.addAdEventListener(
      AdEventType.LOADED,
      () => {
        setInterstitialLoaded(true)
      }
    )

    return unsubscribeLoaded
  }, [interstitial])

  const handleShowInterstitial = async () => {
    if (interstitialLoaded) {
      await interstitial.show()
    }
  }

  return (
    <BannerAd
      unitId={TestIds.BANNER}
      size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
      requestOptions={{
        requestNonPersonalizedAdsOnly: true,
      }}
      />
  )
}

export default BannerAds

전면광고 - 인터스텔라

import React, { useState, useEffect } from 'react'
import { View, Button } from 'react-native'
import {
  InterstitialAd,
  TestIds,
  AdEventType,
} from 'react-native-google-mobile-ads'

const Card = () => {
  const [interstitialLoaded, setInterstitialLoaded] = useState(false)
  const [interstitial] = useState(
    InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL, {
      requestNonPersonalizedAdsOnly: true,
      keywords: ['fashion', 'clothing'],
    })
  )

  useEffect(() => {
    const interstitial = InterstitialAd.createForAdRequest(
      TestIds.INTERSTITIAL,
      {
        requestNonPersonalizedAdsOnly: true,
        keywords: ['fashion', 'clothing'],
      }
    )

    const unsubscribeLoaded = interstitial.addAdEventListener(
      AdEventType.LOADED,
      () => {
        setInterstitialLoaded(true)
      }
    )

    interstitial.load()

    return unsubscribeLoaded
  }, [])

  const handleShowInterstitial = async () => {
    if (interstitialLoaded) {
      await interstitial.show()
    }
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Interstitial Ad" onPress={handleShowInterstitial} />
    </View>
  )
}

export default Card

npx expo prebuild --clean
npx expo run:ios
npx expo run:android