개발/FRONT

Capacitor 환경에서 Google 광고 AdMob 붙이기

Hdev&Shoes 2025. 12. 23. 21:26
728x90

 

 

Capacitor(Android) 프로젝트에 Google AdMob을 추가하는 방법을 정리했다. 

1. 준비물

  • Capacitor 4/5 기반 프로젝트
  • AdMob 앱 ID, 광고 단위 ID (게시글에는 [your_admob_app_id], [your_banner_unit_id]처럼 마스킹)
  • Firebase 설정 파일 google-services.json (게시글에는 실제 값 대신 [client_id], [package_name] 등으로 표기)

2. 패키지 설치 및 동기화

npm install @capacitor/admob
npx cap sync android

Capacitor 플러그인을 설치하고 안드로이드 플랫폼에 반영한다.

3. google-services.json 배치 (민감정보 마스킹)

실제 파일은 android/app/google-services.json에 둔다. 

{
"client": [
{
"client_info": {
"mobilesdk_app_id": "[mobilesdk_app_id]",
"android_client_info": {
"package_name": "[package_name]"
}
},
"oauth_client": [
{
"client_id": "[client_id]",
"client_type": 1,
"android_info": {
"package_name": "[package_name]",
"certificate_hash": "[sha1_fingerprint]"
}
}
],
"api_key": [
{
"current_key": "[api_key]"
}
]
}
]
}
주의: 실제 client_id, api_key, certificate_hash 등은 노출하지 않는다.

4. AdMob 초기화 및 배너/전면 광고 예제

4.1 초기화

import { AdMob, AdOptions, BannerAdSize } from '@capacitor/admob';
async function initAdMob() {
await AdMob.initialize({
requestTrackingAuthorization: true, // iOS ATT (Android는 무시)
testingDevices: [], // 필요 시 테스트 디바이스 ID
initializeForTesting: true // 개발 단계에서는 true
});
}

4.2 배너 광고

const bannerOptions: AdOptions = {
adId: '[your_banner_unit_id]',
adSize: BannerAdSize.ADAPTIVE_BANNER,
position: 'BOTTOM_CENTER'
};
await AdMob.showBanner(bannerOptions);

4.3 전면(Interstitial) 광고

await AdMob.prepareInterstitial({
adId: '[your_interstitial_unit_id]'
});
// 필요 시점에 호출
await AdMob.showInterstitial();

4.4 보상형(Rewarded) 광고

await AdMob.prepareRewardVideoAd({
adId: '[your_rewarded_unit_id]'
});
// 시청 후 리워드 처리
await AdMob.showRewardVideoAd();

5. 개인정보(PII)와 테스트 모드 설정

  • 실제 키 노출 금지: 블로그/깃헙 등 공개 영역에는 [client_id], [api_key], [ad_unit_id] 등으로 마스킹
  • 테스트 모드: 개발 단계에서는 initializeForTesting: true 또는 테스트용 ad unit ID(구글 샘플) 사용
  • GDPR/ATT 대응: 필요 시 CMP(동의 관리) 적용, iOS는 ATT 권한 요청 설정
  • 로그/스냅샷 주의: 콘솔 로그, 스크린샷, 포스팅에 실제 키가 남지 않도록 확인

6. 빌드/배포 체크리스트

  • 실제 릴리즈 빌드는 테스트 모드 해제, 실제 광고 단위 ID로 교체
  • google-services.json은 실제 프로젝트의 package_name / sha1_fingerprint와 일치해야 한다
  • 릴리즈 서명 키와 SHA-1이 AdMob/Firebase 콘솔에 등록되어 있는지 확인
  • Capacitor 빌드 후 npx cap sync android 재실행 여부 확인
✅ 핵심 요약:
  • 설치: @capacitor/admob → npx cap sync android.
  • 광고 ID는 [your_admob_app_id], [your_banner_unit_id] 교체.
  • 개발 땐 테스트 모드/샘플 ID, 배포 땐 실제 ID + 테스트 모드 해제.

카카오톡 오픈 채팅 링크

https://open.kakao.com/o/seCteX7h

 

728x90