공식문서를 찾아서
firebase admob 공식문서 를 사용하려 했지만 404에러가 발생해서... 더이상 지원하지 않나 구글링을 하던 도중 해당 이슈페이지를 발견했습니다.
내용을 파악하자면... 변경된내용을 머지요청했는데 main에 머지될때까지는 반영이 안될거다... 라는것 같습니다..
Ah - sorry,
we've already merged the change where Admob is removed from firebase following it's removal upstream,
and the documentation site goes live immediately after merges to main branch.
It is not as great of an experience but for now
until we have the admob code re-hosted in a non-firebase repo
you can go direct to the usage docs and types
/ API reference from the v11.5.0 (current stable) tag일반적으로 릴리스 간에 문서 사이트가 업데이트되면 좋겠지만, 이번 케이스의 경우 아직 해당 버전에서 활성화된 모듈에 대한 설명서는 사라집니다. 오래된 버전의 문서가 여전히 유용하기 때문에 유지할 수 있는 방법이 있는지 찾아봐야할 것 같습니다.
대충 구글 파이어베이스팀이 해당 내용을 삭제했다는건가...
여튼! 아래 링크에서 확인하면 된다고 합니다.
https://github.com/invertase/react-native-firebase/tree/v11.5.0/docs/admob
https://github.com/invertase/react-native-firebase/blob/v11.5.0/packages/admob/lib/index.d.ts공식문서 살펴보기
수동설치
다음은 React Native <= 0.59 를 사용하거나 라이브러리를 수동으로 통합해야 하는 경우에만 필요합니다.
안드로이드
1. Gradle 설정 업데이트
/android/settings.gradle 파일에 다음을 추가합니다.
include ':@react-native-firebase_admob'
project(':@react-native-firebase_admob').projectDir = new File(rootProject.projectDir, './../node_modules/@react-native-firebase/admob/android')2. Gradle 종속성 업데이트
React Native Firebase 모듈 종속성을 /android/app/build.gradle 파일에 추가합니다.
dependencies {
// ...
implementation project(path: ":@react-native-firebase_admob")
}3. Android 애플리케이션에 패키지 추가
React Native Firebase 모듈 패키지를 가져와서 /android/app/src/main/java/**/MainApplication.java 파일에 적용합니다.
import io.invertase.firebase.admob.ReactNativeFirebaseAdmobPackage; // 패키지 import
protected List<ReactPackage> getPackages() {
return Arrays.asList(
new MainReactPackage(),
new ReactNativeFirebaseAdmobPackage(), // 레지스트리에 패키지추가4. 프로젝트 Rebuild
위의 단계가 완료되면 안드로이드 프로젝트를 다시 빌드합니다.
npx react-native run-androidiOS
1. RNFBAdMob Pod 추가
RNFBAdMob Pod를 프로젝트의 /ios/Pod 파일에 추가합니다.
target 'app' do
# ...
pod 'RNFBAdMob', :path => '../node_modules/@react-native-firebase/admob'
end2. Pod 업데이트 및 프로젝트 Rebuild
프로젝트에 RNFBAdMob Pod를 설치하려면 로컬 포드를 업데이트해야 할 수 있습니다.
$ cd ios/
$ pod install --repo-update포드가 로컬에 설치되면 iOS 프로젝트를 다시 빌드합니다.
npx react-native run-ios광고 보여주기
페이지: https://github.com/invertase/react-native-firebase/blob/v11.5.0/docs/admob/displaying-ads.md
AdMob 패키지를 사용하면 인터스티셜, 보상 및 배너의 3가지 유형의 광고를 표시할 수 있습니다.
인터스티셜 광고
인터스티셜은 사용자가 닫을 때까지 앱의 인터페이스를 포함하는 전체 화면 광고입니다.
이러한 유형의 광고는 프로그래밍 방식으로 로드된 다음 응용 프로그램 흐름 중에 적절한 지점을 표시합니다. (예: 게임 앱의 레벨이 완료된 후 OR 게임 오버)
그 광고들은 필요할 때 갈 준비가 되어 있는지 확인하기 위해 배경에 미리 로드될 수 있습니다.
새 인터스티셜을 만들려면 InterstitialAd 클래스에서 createForAdRequest 메서드를 호출합니다.
이 방법의 첫 번째 인수는 광고 단위 ID입니다.
테스트의 경우 테스트ID를 사용할 수 있지만 프로덕션의 경우 광고 단위 아래에 있는 Google Admob 대시보드의 ID를 사용해야 합니다.
import { InterstitialAd, TestIds, AdEventType } from '@react-native-firebase/admob';
import { Platform } from 'react-native';
const aos = 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';
const ios = 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';
const adUnitId = __DEV__ ? TestIds.INTERSTITIAL : Platform.OS === 'android' ? aos : ios;
const interstitial = InterstitialAd.createForAdRequest(adUnitId, {
requestNonPersonalizedAdsOnly: true,
keywords: ['fashion', 'clothing'],
});두번째 인수는 키워드 및 위치와 같은 광고를 로드하는 동안 보낼 추가적인 선택적인 요청옵션 개체입니다.
추가 요청 옵션을 설정하면 애드놉이 네트워크에서 더 나은 맞춤형 광고를 선택하는 데 도움이 됩니다.
사용 가능한 모든 옵션을 보려면 Request Options 설명서를 참조하세요.
CreateForAdRequest 호출은 InterstitialAd 클래스의 인스턴스를 반환합니다.
이 클래스는 인터스티셜을 로드하고 표시하기 위한 여러 유틸리티를 제공합니다.
네트워크에서 광고가 로드되었거나 오류가 발생한 경우와 같은 이벤트를 청취하려면 onAdEvent 메서드를 통해 구독할 수 있습니다.
import React, { useEffect, useState } from 'react';
import { Button, Platform } from 'react-native';
import { InterstitialAd, AdEventType, TestIds } from '@react-native-firebase/admob';
const aos = 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';
const ios = 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';
const adUnitId = __DEV__ ? TestIds.INTERSTITIAL : Platform.OS === 'android' ? aos : ios;
const interstitial = InterstitialAd.createForAdRequest(adUnitId, {
requestNonPersonalizedAdsOnly: true,
keywords: ['fashion', 'clothing'],
});
function App() {
const [loaded, setLoaded] = useState(false);
useEffect(() => {
const eventListener = interstitial.onAdEvent(type => {
if (type === AdEventType.LOADED) setLoaded(true);
});
interstitial.load(); // Start loading the interstitial straight away
return () => eventListener(); // 언마운트될때 Unsubscribe (cleanup)
}, []);
if (!loaded) return null; // 아직 표시할 광고가 없음
return (
<Button title="인터스티셜 광고" onPress={() => interstitial.show()}/>
);
}onAdEvent() 함수를 통해 인터스티셜 이벤트에 가입하고 load() 를 통해 네트워크에서 새로운 광고를 로드하기 시작합니다.
광고를 사용할 수 있게 되면 로컬 상태가 설정되어 버튼이 표시된 구성 요소를 다시 렌더링합니다.
이 버튼을 누르면 인터스티셜 인스턴스의 표시 메서드가 호출되고 응용 프로그램 위에 광고가 표시됩니다.
또한 onAdEvent() 리스너는 사용자가 광고를 클릭하거나 광고를 닫고 앱으로 돌아가는 등 애플리케이션 내부의 이벤트가 발생할 때 트리거합니다.
사용 가능한 이벤트의 전체 목록을 보려면 AdEventType 설명서를 참조하세요.
필요한 경우 InterstitialAd 클래스의 기존 인스턴스를 재사용해서 더 많은 광고를 로드하고 필요할 때 표시할 수 있습니다.
리워드 광고
리워드 광고는 사용자가 닫을 때까지 앱의 인터페이스를 포함하는 전체 화면 광고입니다. 리워드 광고 내용은 구글 애드몹 대시보드를 통해 제어합니다.
리워드 광고의 목적은 비디오를 보거나 대화형 양식을 통해 옵션을 제출하는 것 등의 광고 내부의 작업을 완료한 후 사용자에게 보상하는 것입니다.
사용자가 작업을 완료하면 게임머니 같은 것으로 보상할 수 있습니다.
새로운 인터스티셜을 만들려면 RewardedAd 클래스에서 createForAdRequest 메서드를 호출합니다.
이 방법의 첫 번째 인수는 광고 단위 ID입니다. 테스트의 경우 테스트ID를 사용할 수 있지만 프로덕션의 경우 "광고단위" 아래에 있는 Google AdMob 대시보드의 ID를 사용해야 합니다.
import { RewardedAd, TestIds } from '@react-native-firebase/admob';
import { Platform } from 'react-native';
const aos = 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';
const ios = 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';
const adUnitId = __DEV__ ? TestIds.INTERSTITIAL : Platform.OS === 'android' ? aos : ios;
const rewarded = RewardedAd.createForAdRequest(adUnitId, {
requestNonPersonalizedAdsOnly: true,
keywords: ['fashion', 'clothing'],
});두번째 인수는 키워드 및 위치와 같은 광고를 로드하는동안 추가적인 선택적 요청옵션 개체입니다.
추가 요청 옵션을 설정하면 애드몹이 네트워크에서 더 나은 맞춤형 광고를 선택하는 데 도움이 됩니다. 사용 가능한 모든 옵션을 보려면 Request Options 설명서를 참조하세요.
ForAdRequest를 생성하기 위한 호출은 보상된 광고를 로드하고 표시하기 위한 많은 유틸리티를 제공하는 RegressedAd 클래스의 인스턴스를 반환합니다.
네트워크에서 광고가 로드되었거나 오류가 발생한 경우와 같은 이벤트를 청취하려면 onAdEvent 메서드를 통해 구독할 수 있습니다.
import React, { useEffect, useState } from 'react';
import { Button, Platform } from 'react-native';
import { RewardedAd, RewardedAdEventType, TestIds } from '@react-native-firebase/admob';
const aos = 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';
const ios = 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';
const adUnitId = __DEV__ ? TestIds.INTERSTITIAL : Platform.OS === 'android' ? aos : ios;
const rewarded = RewardedAd.createForAdRequest(adUnitId, {
requestNonPersonalizedAdsOnly: true,
keywords: ['fashion', 'clothing'],
});
function App() {
const [loaded, setLoaded] = useState(false);
useEffect(() => {
const eventListener = rewarded.onAdEvent((type, error, reward) => {
if (type === RewardedAdEventType.LOADED) setLoaded(true);
if (type === RewardedAdEventType.EARNED_REWARD) console.log('보상 획득', reward);
});
rewarded.load(); // 리워드광고 로드시작
return () => eventListener(); // cleanup: 언마운트될때 이벤트 구독해지
}, []);
if (!loaded) return null; // 보여줄 광고가 없음
return (
<Button title="리워드광고보기" onPress={() => rewarded.show()}/>
);
}onAdEvent() 를 통해 리워드 광고 이벤트를 구독하고 load() 를 통해 즉시 네트워크에 새로운 광고를 로드하기 시작합니다.
광고를 사용할 수 있게 되면 로컬 상태가 설정되어 버튼이 표시된 컴포넌트를 다시 렌더링합니다.
버튼을 누르면 보상된 광고 인스턴스의 표시방법이 호출되고 광고가 프로그램 위에 표시됩니다.
인터스티셜 광고와 마찬가지로, 사용자가 광고를 클릭하거나 광고를 닫고 앱으로 돌아갈 때 이벤트는 onAdEvent() 이벤트리스너 트리거에서 반환됩니다.
하지만 사용자가 광고 작업을 완료하면 추가 AERNED_REWARD 이벤트가 트리거될 수 있습니다.
대시보드에서 설정된 리워드 양과 타입을 포함한 추가 리워드 프로퍼티는 이벤트와 함께 받습니다.
자세한 내용은 RegressedAdEventType 설명서를 참조하세요.
필요한 경우 RewardAd 클래스의 기존 인스턴스를 재사용해서 더 많은 광고를 로드하고 필요할 때 사용할 수 있습니다.
EARNED_REWARD 이벤트는 클라이언트에서만 발생하지만 SSV Server Side Verification 을 사용해서 사용자가 광고 작업을 완료했는지 확인할 수 있습니다.
이를 위해 광고 대시보드에서 서버측 확인 콜백 URL을 지정해야 합니다.
SSV 콜백이 호출될 때 RequestOptions 매개변수에서 serverSideVerificationOptions 필드를 설정해서 SSV 매개변수를 사용자 정의(커스텀)할 수 있습니다.
const rewardedAd = RewardedAd.createForAdRequest(adUnitId, {
serverSideVerificationOptions: {
userId: '9999',
customData: 'my-custom-data',
},
});이처럼 광고를 요청하면 AdMob은 아래처럼 userId, customData 필드를 사용해서 서버를 호출합니다.
[14/Aug/2020 12:51:43] "GET /views/admob-ssv/?ad_network=...&ad_unit=...&custom_data=my-custom-data&reward_amount=1&reward_item=test_reward_item×tamp=1597377102267&transaction_id=148cc85...&user_id=9999&signature=MEUCIQCQSi3cQ2PlxlEAkpN...&key_id=3335... HTTP/1.1" 200 0이러한 수신 요청이 진짜인지 확인하려면 사용자가 직접 확인해야 합니다.
콜백 매개변수 및 확인에 대한 자세한 내용은 AdMob SDK SSV 설명서를 참조하세요.
배너광고
배너 광고는 기존 애플리케이션 내에 통합될 수 있는 부분적인 광고입니다.
인터스티셜 및 보상 광고와 달리 배너는 애플리케이션의 제한된 영역만 차지하고 해당 영역 안에서 광고를 표시합니다. 이를 통해 중단 작업 없이 광고를 통합할 수 있습니다.
모듈은 BannerAd 컴포넌트를 제공합니다. 배너를 표시하려면 unitId 및 크기 prop이 필요합니다.
import React from 'react';
import { Platform } from 'react-native';
import { BannerAd, BannerAdSize, TestIds } from '@react-native-firebase/admob';
const aos = 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';
const ios = 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';
const adUnitId = __DEV__ ? TestIds.INTERSTITIAL : Platform.OS === 'android' ? aos : ios;
function App() {
return (
<BannerAd
unitId={adUnitId}
size={BannerAdSize.FULL_BANNER}
requestOptions={{ requestNonPersonalizedAdsOnly: true }}
/>
);
}size prop은 BannerAdSize 타입을 사용하며, 광고를 볼 수있으면 선택한 크기의 공간을 채울 것입니다.
만약 지정된 크기의 인벤토리를 사용할 수 없는 경우 AdFailedToLoad를 통해 오류가 발생합니다.
requestOptions prop은 키워드 및 위치처럼 광고를 로드하는 동안 보낼 추가적인 선택적 요청 옵션 개체입니다.
추가 요청 옵션을 설정하면 애드몹이 네트워크에서 더 나은 맞춤형 광고를 선택하는 데 도움이 됩니다.
사용 가능한 모든 옵션을 보려면 Request Options 설명서를 참조하세요.
이 컴포넌트는 또한 이벤트를 수신하기 위한 prop을 제공합니다. 이 prop을 사용해서 앱이 사용자이거나 네트워크가 이벤트를 트리거하는 상태를 처리할 수 있습니다.
- onAdClosed
- onAdFailedToLoad
- onAdleftApplication
- onAdOpened
컴포넌트의 각 렌더링은 한 번에 여러 광고를 표시할 수 있도록 단일 광고를 로드합니다.
현재 마운트된 컴포넌트에 대한 광고를 다시 로드하거나 변경해야 하는 경우 코드 내부에서 강제로 리렌더링해야 합니다.
