[앱개발] 리액트네이티브 구글애드몹 (React-native Google Admob) 앱광고달기

주의 : 개발시 테스트ID로 테스트해야 정책위반안됨 

 

 

 

React-native VS Expo  둘중 선택해서 설치하면되는데, 나같은경우는 여러가지 에러 이슈로(;;) 리액트로 진행할것임!!!!!

(에뮬레이터 chevron-left.png 는 이미지인데, Metro가 얘를 JS처럼 해석하려다가 내부적으로 쓰이는 missing-asset-registry-path 모듈을 못 찾아서 서버가 죽어버려서 무한로딩되는 오류가 있었음;; 2일동안 온갖 삽질해도 해결안되서 프로젝트 갈아엎음 ㅋㅋㅋㅋㅋㅋㅋㅋ또 dev client빌드, 설치도해줘야해서 걍 리액트네이티브쓰기로 함)

 

리액트 네이티브 expo 광고도 가능한데 선택은 알아서!

자 다시 리액트로 설명 ㄱㄱ 하겠음

일단 구글애드몹을 설치한다

# Install the admob module
npm install react-native-google-mobile-ads

 

 

app.json에 복붙하기

// <project-root>/app.json
{
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
  }
}

 

변경사항을 다시 빌드하기위해 아래명령어를 실행 (나는 안드로이드니까 npx reacte-native run-android로 ㄱㄱ했음)

# For iOS
npx pod-install
npx react-native run-ios

# For Android
npx react-native run-android

 

 

구글 AdMob에 접속한다

https://admob.google.com/v2/home

AdMob

 

사이드에 앱 -> 앱추가 눌러서 쭉쭉진행하면 아래처럼 추가가 완료되었습니다 라고 뜸 -> 완료를 누른다

구글애드몹 앱추가

 

 

광고단위 추가를 한다

광고단위추가

 

 

배너광고 추가할거니까 배너선택

애드몹 배너광고단위 선택

 

 

광고단위이름을 입력한다

애드몹 배너광고단위이름입력

 

 

광고 단위 만들기를 클릭하면 광고단위가 생성

앱id, 광고id

1번에있는 아이디 : 앱 ID

2번에있는 아이디 : 광고단위ID

 

 

아래소스는 공식문서에 있는 소스임

해당 배너광고 소스를 App.tsx에 붙여넣어준다

import React, { useState, useRef } from 'react';
import { Platform } from 'react-native';
import { BannerAd, BannerAdSize, TestIds, useForeground } from 'react-native-google-mobile-ads';

const adUnitId = __DEV__ ? TestIds.ADAPTIVE_BANNER : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

function App() {
  const bannerRef = useRef<BannerAd>(null);

  // (iOS) WKWebView can terminate if app is in a "suspended state", resulting in an empty banner when app returns to foreground.
  // Therefore it's advised to "manually" request a new ad when the app is foregrounded (https://groups.google.com/g/google-admob-ads-sdk/c/rwBpqOUr8m8).
  useForeground(() => {
    Platform.OS === 'ios' && bannerRef.current?.load();
  });

  return (
    <BannerAd ref={bannerRef} unitId={adUnitId} size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER} />
  );
}

반응형

 

나같은경우는 아래처럼 복붙했음

App.tsx

  import { NewAppScreen } from '@react-native/new-app-screen';

  import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native';

  import React, { useRef } from 'react';

  import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';

  const adUnitId = __DEV__ ? TestIds.ADAPTIVE_BANNER : 'ca-app-pub-광고단위ID';

  function App() {

    const isDarkMode = useColorScheme() === 'dark';

    const bannerRef = useRef<BannerAd>(null);

    return (

      <>

      <View style={styles.container}>

        <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />

        <NewAppScreen templateFileName="App.tsx" />

      </View>

      <BannerAd ref={bannerRef} unitId={adUnitId} size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER} />

      </>

    );

  }

  const styles = StyleSheet.create({

    container: {

      flex: 1,

    },

  });

  export default App;

 

 

app.json

{

  "name": "앱이름",

  "displayName": " 앱이브",

  "react-native-google-mobile-ads": {

    "android_app_id": "앱ID 입력"

  }

}

 

 

 

테스트하니까

아래처럼 짠!

잘 뜬다 

애드몹 테스트결과 하단에 광고가 잘뜸

 

 

 

 

주의 : 개발시 테스트ID로 테스트해야 정책위반안됨