React Native에서 광고를 표시하는 방법은 무엇입니까?

모바일 광고는 항상 앱 수익화 💰의 가장 좋은 부분으로 간주됩니다. 그래서 우리는 앱에 Google Admob을 통합하기로 결정했습니다. 그러면 iOS와 Android 모두에서 광고를 표시할 수 있습니다.

다양한 기사를 훑어보고 Google의 AdMob 공식 문서와 여기저기 흩어져 있는 정보를 읽은 후. 모든 것이 한 곳에 있는 이 블로그를 쓰기로 결정했습니다.

아래의 2단계를 따르면 매우 쉽게 Google Admob을 통합할 수 있습니다.

AdMob 계정 설정

코드 수준 통합

애드몹 계정 설정

먼저 Google AdMob 서비스를 사용하려면 Here에서 AdMob 계정을 만들어야 합니다.

AdMob에서 계정을 성공적으로 만든 후에는 이름이 플랫폼(ios 또는 android)인 앱을 만들어야 합니다.



앱이 생성되면 아래와 같이 모든 광고를 특정 애플리케이션에 타겟팅하는 데 사용되는 appId를 받게 됩니다.

App ID : ca-app-pub-3940256099942544~1458002511

이제 Admob에 등록된 앱 ID가 있으므로 광고를 만들어 봅시다. 배너, 중간 광고, 보상형 광고 중에서 광고를 선택할 수 있습니다. 여기서는 간단한 배너 광고를 예로 들어 보겠습니다.



이제 마지막이자 가장 중요한 단계는 Admob 계정 설정입니다.
광고 슬롯을 만들어야 합니다. 이 슬롯은 광고를 타겟팅할 수 있는 iOS 및 Android 앱에서 사용하는 슬롯입니다.



다음 단계에서 코드 수준 통합을 위해 방금 생성한 광고 슬롯을 사용할 것입니다.

Ad Unit Id : ca-app-pub-3940256099942544/6300978111

참고 : 광고는 결제 정보Here를 완료한 후에만 위의 adSlot ID에서 게재되기 시작하며 새 계정의 경우 광고 게재를 시작하는 데 시간이 걸릴 수 있습니다.

코드 수준 통합

리액트 네이티브 앱에서 Google Admob을 사용하기 위해서는 react-native-admob라는 라이브러리를 설치해야 합니다.

npm i -S react-native-admob@next

그런 다음 실행

react-native link react-native-admob

Ios 앱은 기본적으로 추가해야 하는 앱에 광고를 표시할 수 없습니다GoogleMobileAds.framework.

위의 프레임워크를 앱으로 가져오는 가장 간단한 방법은 CocoaPods를 사용하는 것입니다. Podfile에 아래 줄을 추가하세요.

pod 'Google-Mobile-Ads-SDK'

그런 다음 아래 명령을 실행하십시오.

pod install --repo-update

Google 모바일 광고 프레임워크에 대한 자세한 내용은 Here을 참조하세요.

이제 광고를 표시하기 위해 Android 및 iOS 코드에서 설정한 계정에서 얻은 appId 및 adUnitId를 추가해 보겠습니다.

IOS

Info.plist에 AdMob 애플리케이션 ID를 추가해야 합니다.

 <key>GADApplicationIdentifier</key>
 <string>ca-app-pub-3940256099942544~1458002511</string>

Android

AndroidManifest.xml에 Admob 애플리케이션 ID(com.google.android.gms.ads.APPLICATION_ID) 추가

<meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-3940256099942544~1458002511"/>

react-native-admob usage

react-native-admob의 구현은 매우 간단했습니다. 방금 'AdMobBanner'를 가져와 adSlot Id를 전달했습니다.

import React from 'react';
import {SafeAreaView, View} from 'react-native';
import {AdMobBanner} from 'react-native-admob';

const App = () => {
  const onFailToRecieveAd = (error) => console.log(error);

  return (
    <>
      <SafeAreaView>
        <AdMobBanner
          adSize="largeBanner"
          adUnitID="ca-app-pub-3940256099942544/6300978111"
          testDeviceID="CF583E54-34C6-453C-80FC-493D2468A51E"
          didFailToReceiveAdWithError={onFailToRecieveAd}
        />
      </SafeAreaView>
    </>
  );
};

export default App;

그게 다입니다 :) 앱에 광고가 표시됩니다 🍻

문제가 발생하면 Github RepoHere에서 위의 예를 찾을 수 있습니다.