728x90
반응형
2021.10.29 - [앱개발] - 4주차 - 파이어베이스
[5주차 수업 목표]
- 수익형 앱 만들기
- 구글 광고, 애드몹 적용
- 배포하기
- 오늘 배울 것
- 오늘 배울 내용
필요한 앱 기능이 모두 갖춰졌습니다
열심히 만든 앱인 만큼, 수익성도 갖추고 배포가 잘되면 완벽한 마무리가 될 것 같습니다.
1) 수익성 앱: 앱에서 수익을 내는 방법
2) 구글광고,애드몹: 구글을 광고 플랫폼을 이용한 수익창출
3) 배포하기: 리액트 네이티브&Expo 앱 쉽게 배포하기 - 앱에서 수익을 내는 방법
👉 5주차까지 잘 도착했다면, 여러분들은 앱 개발자나 다름없습니다.
비영리 단체 또는 자선사업가가 아니라면, 앱 개발을 통해 수익을 내면 일석이조일 겁니다.
힘들게 앱 개발을 배운 만큼!
앱 개발자가 앱으로 수익을 낼 수 있는 방법에 대해 알아봅시다! - 구글 광고, 애드몹(AdMob)
- 배포를 위한 체크리스트
✅배포를 위해선 꼭 해야하는 절차들이 있습니다.
Expo를 이용하지 않았다면 앱 배포를 위해 신경쓸게 무척 많았을 겁니다.
배포 마저 쉽게 도와주는 Expo를 이용해 우리가 만든 앱을 배포해봅시다!
- 오늘 배울 내용
- [수익형 앱]앱에서 수익을 내는 방법
- 수익을 낼 수 있는 방법들
열심히 앱 개발 공부를 한만큼, 이 앱이 돈을 벌어다 주었으면 합니다. 그럼 더 열심히 공부할 수 있을것 같은데 말이죠!
앱으로 수익을 낼 수 있는 방법들을 모두 살펴보면 아래와 같습니다
- 앱 마켓에 유료앱 배포 수익 모델
- 앱 내 배너 광고 수익 모델
- 앱 콘텐츠 판매 수익 모델: 인 앱 결제
- 구독 수익 모델
- 앱 개발 용역 수익 모델
- 외부 브랜드 광고 수익 모델
👉여기서 앱 개발 초보자가 가장 쉽게 수익 구조를 앱에 연결 할 수 있는 방법은 [앱 내 배너 광고 수익 모델] 입니다.
배너 수익 방식도 다양한데요!
1. 배너 클릭
2. 배너 광고 시청
3. 배너 광고 사용자 참여
이 3가지 모두 앱에 쉽게 적용할 수 있는 방법을
구글 애드몹 광고 서비스에서 제공해줍니다. 돈벌러 가봅시다!
- 수익을 낼 수 있는 방법들
- [구글광고] 애드몹(AdMob) - 설정
- 애드몹 소개
- 애드몹 광고 종류
- 애드몹 가입 및 프로젝트 생성
👉 애드몹 가입 절차
https://accounts.google.com/ServiceLogin/webreauth?service=admob&passive=1209600&osid=1&continue=https%3A%2F%2Fapps.admob.com%2Fv2%2Fhome&followup=https%3A%2F%2Fapps.admob.com%2Fv2%2Fhome&flowName=GlifWebSignIn&flowEntry=ServiceLogin
1.
3.
4.
5. 지급 설정 클릭 후 개인정보 입력 페이지에서 인적사항 기입. 완료!
- 앱에 애드몹 사용 준비하기
구글 애드몹 역시 Expo에서 지원해줍니다.
> https://docs.expo.dev/versions/latest/sdk/admob/
하지만 공식 문서에서 애드몹의 사용가능 플랫폼을 보면, 모두 가능하지만 웹에서는 안된다는 것을 확인할 수 있습니다. 웹의 경우 구글에서는 구글 애드센스를 지원하기 때문인데, 우린 앱개발 중이니 참고만 합니다!
- [실습 ✍️] 앱에 애드몹 설치하기
>> expo install expo-ads-admob
✨bundleIdentifier, package는 일반적으로 com.company.appname형식을 따릅니다."ios": { "supportsTablet": true, "buildNumber": "1.0.0", "bundleIdentifier": "com.myhoneytip.gun", "config": { "googleMobileAdsAppId": "" } }, "android": { "package": "com.myhoneytip.gun", "versionCode": 1, "config": { "googleMobileAdsAppId": "" } },
(여러분만의 값으로 구성해서 넣어주세요. 영어로...)
이 둘 값은 앱 마켓들과 구글에 여러분 앱 이름을 알려주는 부분입니다.
ios, android의 각각의 googleMobileAdsAppId 는 [구글광고] 애드몹(AdMob) - 가로 배너 생성 내용에서 적용합니다
- 앱에 애드몹 사용 준비하기
- 애드몹 소개
- [구글광고] 애드몹(AdMob) - 가로 배너 생성
- 앱 하단 가로 배너 광고 생성 및 적용
첫 번째로, 앱 하단에 가로 형태로 존재하는 배너를 적용합니다.
적용 순서는 다음과 같습니다.
- 애드몹 가로 배너 광고 단위 설정
- 앱 상에 적용
- EXPO 구글 애드몹 사용 설명서
https://docs.expo.dev/versions/latest/sdk/admob/
- [실습 ✍️] 애드몹 가로 배너 광고 단위 설정
- 적용 할 앱을 선택한 후 광고 단위 추가 버튼을 클릭합니다
- 배너 생성시 마다 어디에 쓸 배너 광고인지 구분하면, 추후에 각 배너별 추적 분석이 용이합니다
- 두 키 코드값은 앱 상에서 배너를 적용할 때 필요합니다.
- 첫 번째 키 값은 app.json에 비워 뒀던 android의 googleMobileAdsAppId 에 적용합니다.
- iOS도 앱생성 → 광고 단위 생성 → 가로배너 생성 → 키값 순서대로 진행 한 후, app.json에 적용해주세요!
- 적용 할 앱을 선택한 후 광고 단위 추가 버튼을 클릭합니다
- [실습 ✍️] 앱 상에 적용
광고 단위 생성 후 부여 받은 두 번째 키값은 app.json이 아닌 실제 Main.js 코드 단에서 사용될 키 값입니다.
구글에서 부여한 가로배너를 앱과 연결하는 정보가 담겨 있는데요! 다음 Main.js 코드를 적용해주세요
적용하기 전에 코드 단에서 부르는 가로 배너의 이름은 AdMobBanner 입니다.
광고 이름들이 정해져 있어요!
반드시 애드몹의 여러분들 키 값을 적용해야 보여요!
- 결과 확인
👉 이렇게 가로 배너를 설치하게되면, 사용자들이 누른 순간 우린 광고 수익을 얻게 됩니다.
광고 수익 현환은 애드몹 메인 화면에서 확인이 가능합니다
- 결과 확인
- 앱 하단 가로 배너 광고 생성 및 적용
- [구글광고] 애드몹(AdMob) - 전면 배너 생성
- 나만의 꿀팁 앱 팁 선택시 디테일 페이지 가기전에 광고 달기!
- [실습 ✍️]애드몹 전면 광고 배너 설정
👉 애드몹에서 전면 광고 유형을 활성화 해야합니다.
- [실습 ✍️]앱 상에 설치
전면광고는 가로배너보다는 비교적 까다롭습니다. 그래도 설명서대로 따라해보면 어려움이 없습니다.
전면 광고를 사용자들에게 보여주는 상황은
" 팁을 누르고! 디테일 화면으로 넘어가기 바로전!" 입니다.
그럼 Card.js 광고를 달아야겠네요!
코드 단에 들어가기 전에 사용 할 전면 광고의 코드단에서의 이름은 interstitial 입니다.
[주목 👀] 전면 광고를 달았는데 자꾸 피자만 나온다!- 애드몹 함수의 업데이트로 인해서 인지, 최근에 피자 화면만 나온다는 제보를 받았습니다
- 문제 해결은 굉장히 간단합니다!
- goDetail() 함수에 모든 로직을 넣으면 되는데요! 다음과 같이 수정해보세요! (굵은 코드로 처리한부분)
- 나만의 꿀팁 앱 팁 선택시 디테일 페이지 가기전에 광고 달기!
- 전면 광고 적용 모습
(*/ω＼*) 저는 애드몹 광고 가입을 오늘 해부러서, 낼 이어서 쓸게요 >_ㅇ
728x90
반응형
'앱개발' 카테고리의 다른 글
| 스파르타 앱개발종합반 완강 후기 (0) | 2021.11.06 |
|---|---|
| 5주차 앱 배포하기 (0) | 2021.11.04 |
| 4주차 - 파이어베이스 (0) | 2021.10.29 |
| 4주차 - 앱과 서버 (0) | 2021.10.28 |
| 3주차 - 앱다운 앱기능 (0) | 2021.10.21 |