React Native용 Google 모바일 광고 SDK 설정

광고를 게재하고 수익을 창출하려면 React Native 앱에 Google Mobile Ads SDK for React Native을 통합하세요. 이 가이드에서는 Google Mobile Ads SDK for React Native을 설치 및 초기화하고 광고 형식을 선택하는 방법을 설명합니다.

기본 요건

계속하기 전에 다음을 준비하세요.

  • React Native 0.85.0 이상
  • AdMob 계정 및 앱 ID 앱 ID를 가져오려면 AdMob에서 앱 설정하기를 참고하세요.

  • 다음 Android 항목:

    • Android API 수준 24 이상
    • Android 스튜디오 최신 버전
    • Android Gradle 플러그인 (AGP) 버전 8.0 이상

  • 다음 iOS 항목:

    • iOS 버전 13.0 이상
    • Xcode 버전 16.0 이상 및 명령줄 도구가 사용 설정되어 있어야 합니다.
    • CocoaPods

Google Mobile Ads SDK for React Native 설치

Google Mobile Ads SDK for React Native을 설치하려면 다음을 수행합니다.

  1. Google Drive에서 gma-sdk-react-native 폴더를 다운로드합니다.

  2. 작업 프로젝트 디렉터리 외부의 별도 디렉터리에 ZIP 파일의 압축을 풉니다. 이 프로세스는 프로젝트의 구성 파일과의 충돌을 방지할 수 있습니다.

  3. 프로젝트 루트에 local_packages/ 디렉터리를 만듭니다.

  4. 이 디렉터리에서 mobile-ads-0.1.0.tgz 파일을 복사합니다.

    mkdir -p local_packages
cp EXTRACT_DIR/gma-sdk-react-native/google-mobile-ads/mobile-ads-0.1.0.tgz local_packages/

    EXTRACT_DIR를 보관 파일을 추출한 디렉터리의 경로로 바꿉니다.

  5. 원하는 패키지 관리자를 사용하여 패키지를 설치합니다.

    npm

    npm install ./local_packages/mobile-ads-0.1.0.tgz

    털실

    yarn add ./local_packages/mobile-ads-0.1.0.tgz

앱 구성

플랫폼 종속 항목으로 앱을 구성하려면 프로젝트 루트의 app.json 파일에 AdMob 앱 ID를 추가합니다.

테스트를 위해 다음 예에 표시된 샘플 AdMob 앱 ID를 사용하세요.

{
  "name": "APP_NAME",
  "displayName": "APP_NAME",
  "googleMobileAds": {
    "android_app_id": "ca-app-pub-3940256099942544~3347511713",
    "ios_app_id": "ca-app-pub-3940256099942544~1458002511"
  }
}

빌드 시간 동안 Google Mobile Ads SDK for React Native는 android_app_id 속성을 AndroidManifest.xml 파일에 추가하고 빌드된 Info.plist 파일의 ios_app_id 속성을 GADApplicationIdentifier 키로 추가합니다.

플랫폼별 옵션 또는 수동 구성의 경우 다음 플랫폼 중 하나를 선택합니다.

Android

여러 빌드 구성을 관리하거나 React Native를 기존 Android 앱에 통합하는 경우 app.json 파일 대신 프로젝트의 AndroidManifest.xml 파일에 있는 <application> 요소에 AdMob 앱 ID를 추가합니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
  <application>
    <!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 -->
    <meta-data
        android:name="com.google.android.gms.ads.APPLICATION_ID"
        android:value="SAMPLE_APP_ID"
        tools:replace="android:value"/>
  </application>
</manifest>

Gradle은 빌드 시 Android 종속 항목을 자동으로 해결합니다.

iOS

다음 단계를 완료합니다.

  1. 프로젝트의 ios/ 디렉터리에서 CocoaPods 종속 항목을 설치합니다.

    pod install --repo-update

    또는 프로젝트 루트 디렉터리에서 CocoaPods 종속 항목을 설치합니다.

    npx pod-install

    CocoaPods 자동 연결은 빌드된 Info.plist 파일의 app.json 파일에서 ios_app_id 속성을 추가하는 Xcode 빌드 단계 스크립트를 구성합니다.

  2. 앱의 Info.plist 파일에서 Google cstr6suwn9.skadnetwork 및 일부 서드 파티 구매자의 <dict> 요소에 SKAdNetworkItems 키를 추가합니다.

    다음 예시에서는 필수 SKAdNetworkItems 배열이 포함된 전체 Info.plist 파일을 보여줍니다.

    전체 예시

    <key>SKAdNetworkItems</key>
<array>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>cstr6suwn9.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>4fzdc2evr5.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>2fnua5tdw4.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>ydx93a7ass.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>p78axxw29g.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>v72qych5uu.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>ludvb6z3bs.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>cp8zw746q7.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>3sh42y64q3.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>c6k4g5qg8m.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>s39g8k73mm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>wg4vff78zm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>3qy4746246.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>f38h382jlk.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>hs6bdukanm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>mlmmfzh3r3.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>v4nxqhlyqp.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>wzmmz9fp6w.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>su67r6k2v3.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>yclnxrl5pm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>t38b2kh725.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>7ug5zh24hu.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>gta9lk7p23.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>vutu7akeur.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>y5ghdn5j9k.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>v9wttpbfk9.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>n38lu8286q.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>47vhws6wlr.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>kbd757ywx3.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>9t245vhmpl.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>a2p9lx4jpn.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>22mmun2rn5.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>44jx6755aq.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>k674qkevps.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>4468km3ulz.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>2u9pt9hc89.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>8s468mfl3y.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>klf5c3l5u5.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>ppxm28t8ap.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>kbmxgpxpgc.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>uw77j35x4d.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>578prtvx9j.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>4dzt52r2t5.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>tl55sbb4fm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>c3frkrj4fj.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>e5fvkxwrpn.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>8c4e2ghe7u.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>3rd42ekr43.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>97r2b46745.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>3qcr597p9d.skadnetwork</string>
  </dict>
</array>

Google Mobile Ads SDK for React Native 초기화

광고를 로드하기 전에 initialize 메서드를 호출하여 Google Mobile Ads SDK for React Native를 초기화합니다. 앱 실행 시 루트 App.tsx 구성요소 등에서 initialize 메서드를 한 번 호출합니다.

다음 예에서는 Google Mobile Ads SDK for React Native을 초기화합니다.

import {InitializationStatus, initialize} from '@google/mobile-ads';
import {useEffect, useState} from 'react';
import {Text, View} from 'react-native';

/**
 * Root application component demonstrating Google Mobile Ads SDK initialization.
 */
export function App() {
  const [isInitialized, setIsInitialized] = useState<boolean>(false);

  useEffect(() => {
    // Initialize the Google Mobile Ads SDK.
    initialize({}, (status: InitializationStatus) => {
      console.log('Mobile Ads SDK initialized successfully:', status);
      setIsInitialized(true);
    });
  }, []);

  return (
    <View>
      <Text>
        {isInitialized ? 'Mobile Ads SDK Ready' : 'Initializing SDK...'}
      </Text>
    </View>
  );
}

광고 형식을 선택합니다.

Google Mobile Ads SDK for React Native를 초기화한 후 광고를 구현할 수 있습니다. AdMob에서는 다음과 같은 광고 형식을 제공합니다.

형식 설명 문서
앱 오프닝 광고 사용자가 앱을 열거나 앱으로 다시 전환할 때 로드 중인 화면이나 스플래시 화면에 오버레이되어 표시됩니다. 앱 오프닝 광고 설정하기
전면 광고 호스트 앱의 인터페이스를 완전히 덮는 전체 화면 광고입니다. 이러한 광고는 활동이 바뀌는 시점 또는 게임에서 다음 레벨로 넘어갈 때처럼 앱 흐름의 자연스러운 전환 시점에 게재됩니다. 전면 광고 설정
리워드 제공됨 동영상 광고를 시청하거나 플레이어블 광고와 상호작용하는 사용자에게 보상을 제공하는 전체 화면 광고입니다. 보상형 광고 설정하기
보상형 전면 광고 자연스러운 앱 전환 중에 자동으로 게재되는 광고에 대해 보상을 제공하는 인센티브형 광고 형식입니다. 보상형 전면 광고 설정하기