스파르타_앱개발 종합반 5주차

수익형 앱

- 앱 마켓에 유료앱 배포 수익 모델

- 앱 배너 광고 수익 모델

- 앱 콘텐츠 판매 수익 모델(인 앱 결제)

- 구독 수익 모델

- 앱 개발 용역 수익 모델

- 외부 브랜드 광고 수익 모델

 

애드몹 => 배너, 전면, 리워드, 네이티브 고급 광고

 

앱에 애드몹 설치

expo install expo-ads-admob

app.json에서 ios 와 android 부분 추가

"ios": {
      "supportsTablet": true,
      "buildNumber": "1.0.0",
      "bundleIdentifier": "com.myhoneytip.gun",
      "config": {
        "googleMobileAdsAppId": ""
      }
    },
    "android": {
          "package": "com.myhoneytip.gun",
          "versionCode": 1,
          "config": {
            "googleMobileAdsAppId": ""
          }
  },

(bundleIdentifier, googleMobileAdsAppId, package 는 내 값으로 변경해야 함)

 

* 가로배너 생성

 1) 앱 선택 후 광고 단위 선택 / 생성

 2) ios, android 선택

 3) 키값 상단에 app.json 파일에서 애드몹 키값 위치에 넣어주기

 

애드몹 사용 시 도구 가져오기 (import 필수)

import {
  setTestDeviceIDAsync,
  AdMobBanner,
  AdMobInterstitial,
  PublisherBanner,
  AdMobRewarded
} from 'expo-ads-admob';

코드 하단에 배너 생성 => 코드 하단에 추가시키기

{Platform.OS === 'ios' ? (
                <AdMobBanner
                  bannerSize="fullBanner"
                  servePersonalizedAds={true}
                  adUnitID="ca-app-pub-5579008343368676/6885179499"
                  style={styles.banner}
                />
            ) : (
                <AdMobBanner
                  bannerSize="fullBanner"
                  servePersonalizedAds={true}
                  adUnitID="ca-app-pub-5579008343368676/9202552776"
                  style={styles.banner}
                />
            )}

 

 

* 전면배너 생성 (card.js)

시작 하자마자 광고를 보여줄 예정이니  useEffect에 담아주기 (사용할 때 마다 복사해가기)

useEffect(()=>{
        // Card.js에 들어오자마자 전면 광고 준비하느라 useEffect에 설정
        //애드몹도 외부 API 이므로 실행 순서를 지키기위해 async/await 사용!
        //안드로이드와 IOS 각각 광고 준비 키가 다르기 때문에 디바이스 성격에 따라 다르게 초기화 시켜줘야 합니다.
        Platform.OS === 'ios' ? AdMobInterstitial.setAdUnitID("ca-app-pub-5579008343368676/6838730428") : AdMobInterstitial.setAdUnitID("ca-app-pub-5579008343368676/4903859898")

        AdMobInterstitial.addEventListener("interstitialDidLoad", () =>
            console.log("interstitialDidLoad")
        );
        AdMobInterstitial.addEventListener("interstitialDidFailToLoad", () =>
            console.log("interstitialDidFailToLoad")
        );
        AdMobInterstitial.addEventListener("interstitialDidOpen", () =>
            console.log("interstitialDidOpen")
        );
        AdMobInterstitial.addEventListener("interstitialDidClose", () => {
              //광고가 끝나면 다음 코드 줄이 실행!
            console.log("interstitialDidClose")
          
        });
    },[])

그리고 card 를 눌렀을때 광고가 보여지기 위해 변수 선언 후 이벤트 onPress 하기

 - try catch 를 사용 함으로써 에러 방지

 - servePersonalizedAds : 사용자가 많이 이용한 콘텐츠를 광고 ( 개인화 )

 - showAsync() : 전면 광고 키는 코드

 - navigate() : 광고 끝나면 넘어갈 화면

    const goDetail = async () =>{
      try {
        await AdMobInterstitial.requestAdAsync({ servePersonalizedAds: true});
        await AdMobInterstitial.showAdAsync();
        await navigation.navigate('DetailPage',{idx:content.idx})
      } catch (error) {
        console.log(error)
        await navigation.navigate('DetailPage',{idx:content.idx})
      }
    }

goDetail 사용하기

 <TouchableOpacity style={styles.card} onPress={()=>{goDetail()}}>

 

*** 배포 ***

필요한 것 => 앱 로고, 스플래시 스크린, 앱 마켓에 올릴 설명 이미지

 

배포 진행 순서

 1) EXPO를 통한 최종 앱 파일 생성

 2) 구글 플레이 개발자 라이센스 가입 및 구입

 3) 구글 플레이 스토어에 앱 배포

 

안드로이드 & ios 배포

안드로이드 : pdf 파일 순서대로 진행

ios : 맥 os 필요, 안드로이드보다 훨-씬 까다로워서 진행 과정 많은 시간 필요