react-native-google-mobile-ads 구글 애드몹 앱에 광고넣기, 부정클릭 막기(테스트 기기 설정)

https://docs.page/invertase/react-native-google-mobile-ads

React Native Google Mobile Ads

 

ios, android 

react native에서 셋팅하는 법~!

 

1. 설치하기

# Install the admob module
yarn add react-native-google-mobile-ads

2. 

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"
  }
}

 

각 앱 id는 애드몹에서 받아와야한다. 

애드몹 계정 생성하기~!

(참고로 애드몹 계정 생성할 때 개인/법인 잘 선택해야함. 계좌 유형에서 개인에서 법인으로 바꾸고 싶었는데 안되어서

삭제하고 다시 만듦...유형 바꿀 수 없다고 해서!!!)

 

3. 애드몹 계정 생성 후 앱 ID 받아서 app.json파일에 넣기

앱추가하기: 앱 > 앱 추가

앱 ID 받아오기 : 앱> 앱 설정 > 앱 ID

4. SKAdNetwork를 활성화하여 전환 추적(iOS)
"Google 모바일 광고 SDK는 IDFA를 사용할 수 없는 경우에도 Google 및 참여하는 제3자 구매자가 앱 설치를 기여할 수 있는 Apple의 SKAdNetwork를 사용하여 전환 추적을 지원합니다. 프로젝트 app.json 파일 내에서 50개의 필수 SKAdNetwork 식별자를 추가합니다."

 

아래처럼 추가

{
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "sk_ad_network_items": [
      "cstr6suwn9.skadnetwork",
      "4fzdc2evr5.skadnetwork",
      "4pfyvq9l8r.skadnetwork",
      "2fnua5tdw4.skadnetwork",
      "ydx93a7ass.skadnetwork",
      "5a6flpkh64.skadnetwork",
      "p78axxw29g.skadnetwork",
      "v72qych5uu.skadnetwork",
      "ludvb6z3bs.skadnetwork",
      "cp8zw746q7.skadnetwork",
      "c6k4g5qg8m.skadnetwork",
      "s39g8k73mm.skadnetwork",
      "3qy4746246.skadnetwork",
      "3sh42y64q3.skadnetwork",
      "f38h382jlk.skadnetwork",
      "hs6bdukanm.skadnetwork",
      "prcb7njmu6.skadnetwork",
      "v4nxqhlyqp.skadnetwork",
      "wzmmz9fp6w.skadnetwork",
      "yclnxrl5pm.skadnetwork",
      "t38b2kh725.skadnetwork",
      "7ug5zh24hu.skadnetwork",
      "9rd848q2bz.skadnetwork",
      "y5ghdn5j9k.skadnetwork",
      "n6fk4nfna4.skadnetwork",
      "v9wttpbfk9.skadnetwork",
      "n38lu8286q.skadnetwork",
      "47vhws6wlr.skadnetwork",
      "kbd757ywx3.skadnetwork",
      "9t245vhmpl.skadnetwork",
      "a2p9lx4jpn.skadnetwork",
      "22mmun2rn5.skadnetwork",
      "4468km3ulz.skadnetwork",
      "2u9pt9hc89.skadnetwork",
      "8s468mfl3y.skadnetwork",
      "av6w8kgt66.skadnetwork",
      "klf5c3l5u5.skadnetwork",
      "ppxm28t8ap.skadnetwork",
      "424m5254lk.skadnetwork",
      "ecpz2srf59.skadnetwork",
      "uw77j35x4d.skadnetwork",
      "mlmmfzh3r3.skadnetwork",
      "578prtvx9j.skadnetwork",
      "4dzt52r2t5.skadnetwork",
      "gta9lk7p23.skadnetwork",
      "e5fvkxwrpn.skadnetwork",
      "8c4e2ghe7u.skadnetwork",
      "zq492l623r.skadnetwork",
      "3rd42ekr43.skadnetwork",
      "3qcr597p9d.skadnetwork"
    ]
  }
}

배너 광고를 쓸 것이기에 

 

5. 애드몹에서 배너광고 생성

앱 > 광고 단위 > 광고 단위 추가

배너 선택해서 추가

추가하면 

광고 단위 ID 가 나옴

 

6. 앱에 배너광고 붙이기

 

 

원하는 화면에 다음과 같이 붙이기

ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy 이 자리에 

광고 단위 ID  넣기

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

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

function App() {
  return (
    <BannerAd
      unitId={adUnitId}
      size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
      requestOptions={{
        requestNonPersonalizedAdsOnly: true,
      }}
    />
  );
}

--

나는 android , ios 각각 광고단위ID가 있어서 다음과 같이 넣어줌. 

import {Platform } from 'react-native'

const unitId =
  Platform.OS === 'ios'
    ? 'ca-app-pub-....'
    : 'ca-app-pub-....'
    
    
 
 const Home = ()=>{
 return <>  <BannerAd
          // unitId={TestIds.BANNER}
          unitId={unitId}
          size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
        />
        </>
 }
 export default Home

 

 

7. 부정클릭 막기 

테스트 기기 등록

앱>설정>기기 테스트

 

 

안드로이드: 설정>Google>광고>이 기기의 광고ID
iOS: idfa 추출가능한 앱 설치(예: TUNE) >IFA(IDFA)

 

이렇게 가져오면 됨. 근데 IOS에서 IFA가 안뜬다?

하면 설정에서 

앱 추적 권한을 허용하면 된다~!~!

 

부정클릭 막는 이유 -

애드몹에서 부정클릭으로 간주하면 앱이 정지될 수 있다고 함!

같은 IP주소도 확인하고 패턴으로 인위적은 클릭을 감지한다고..

 

--

번외)

 

이렇게 보면 간단하지만..

ios빌드는 잘되어도

안드로이드 빌드가 상당히 힘들었다..

 

1. 모듈의 종속성이 중복되어서 일어난 빌드 에러

Duplicate class com.google.android.gms.measurement.internal.zzit found in modules 블라블라

 

 

app/build.gradle 파일에서

 

이런 식으로 해당 라이브러리 쓸 때 중복되는 애들을 제외시키는 exclude를 추가해봤는데도 안되었음

implementation('com.example:my-library:1.0') {
    exclude group: 'com.google.android.gms'
}

내가 쓰고 있는 모듈의 종속성 확인하는 방법 명령어 (./gradlew clean 이거는 캐시 지우는거~)

cd android && ./gradlew clean && ./gradlew app:dependencies

 

1-1. 해결방법

app/build.gradle 파일 하단에 이거 추가함

버전을 고정으로 박아둠. 

해결책을 chatgpt로 찾았다!

configurations.all {
  resolutionStrategy {
    force 'com.google.android.gms:play-services-ads:20.4.0'
    force 'androidx.work:work-runtime:2.7.0'
  }
}

2. react-native-google-mobile-ads 라이브러리 말고 다른 대안?

 

안드로이드 빌드해결 못하고 눈을 돌려 firebase로 애드몹 연동해서 쓸까했지만...

react-native-firebase를 깔고 보니

"Firebase SDK에서 Admob을 더이상 지원하지 않습니다. 따라서 최신 react-native-firebase를 사용하면 Admob을 사용할 수 없습니다."라 해서 다시 원점으로 돌아왔었음.

 

react-native-admob-native-ads 

추가로 찾아본 이 라이브러리는 내가 썼던 애랑 같은 라이브러리라고 함.