안녕하세요. 이지이지입니다.
이번 포스팅에서는 앱인벤터에서 구글 애드몹 광고를 달아보는 방법을 알아보겠습니다.
============================================================================================
테스트를 할 때는 반드시 apk 파일로 빌드하여 앱으로 만든 다음 테스트해야 합니다.
Companion으로 연결하여 라이브테스팅할 경우 오류가 발생합니다.
============================================================================================
앱인벤터에서 구글 애드몹 광고를 달기 위해서는 다음과 같은 사항이 필요합니다.
1. 애드몹 앱 ID, 광고단위 ID
2. Admob 확장 프로그램 3개(또는 이상)
오늘 블로그의 내용 순서는
1. 애드몹 앱 ID 및 광고단위 ID 만들기
2. Admob 확장 프로그램 추가하기
3. 앱인벤터 화면구성 및 블록코딩 순입니다.
| 애드몹 앱 ID 및 광고단위 ID 만들기 |
1. 다음 링크를 통해 애드몹 사이트로 이동한 후 로그인 또는 가입합니다.
(가입 방법은 다루지 않으며, 로그인 한 것으로 간주하고 진행하겠습니다.)
Google AdMob: 모바일 앱 수익 창출
인앱 광고를 사용하여 모바일 앱에서 더 많은 수익을 창출하고, 사용이 간편한 도구를 통해 유용한 분석 정보를 얻고 앱을 성장시켜 보세요.
admob.google.com
2. [앱] - [앱 추가]를 차례로 선택합니다.
(기존체 추가해 둔 앱이 있다면 그 앱을 선택하여도 됩니다.)
3. 플랫폼은 [Android], 앱 등록 여부는 [아니요], [계속] 을 선택합니다.
- 현재 앱인벤터에서 iOS로 빌드할 수 없으므로 당연히 Andorid를 선택해야 합니다.
- 만약 기존에 앱이 플레이스토어 같은 곳에 등록이 되어 있다면 [예]를 선택합니다.
4. 앱 이름을 입력하고 [앱 추가]를 클릭합니다.
- 앱 이름은 마음대로 넣으시면 됩니다.
5. 앱 추가가 완료되었습니다. [완료]를 클릭합니다.
6. 좌측 메뉴에서 [광고 단위] - [시작하기]를 클릭합니다.
7. 광고 형식 중 하나를 선택합니다. 이 포스팅에서는 [배너]를 선택해 보겠습니다.
8. 광고 단위 이름을 적절히 입력하고 [광고 단위 만들기]를 선택합니다.
9. [완료] 버튼을 눌러 광고 단위 생성을 완료합니다.
10. 앱인벤터에서 사용할 앱 ID를 알아내기 위해 좌측 메뉴에서 [앱 설정]을 선택합니다.
앱 정보에서 앱 ID를 확인할 수 있습니다.
11. 앱인벤터에서 사용할 광고 단위 ID를 알아내기 위해 좌측 메뉴에서 [광고 단위]를 선택합니다.
광고 단위 이름 밑에 나타나는 것이 광고 단위 ID입니다.
12-1. 애드몹을 테스트 모드에서 실행하기 위한 설정을 해보겠습니다.
좌측 메뉴에서 [설정] - [기기 테스트] - [테스트 기기 추가]를 차례로 클릭합니다.
※ 테스트 기기를 추가하지 않고, 계속 동일한 기기에서 광고에 노출되거나 클릭하면 계정이 정지될 수 있습니다.
12-2. 기기 이름과 플랫폼, 광고 ID/IDFA를 입력하고 [저장]을 클릭합니다.
- 기기 이름은 본인이 알기 쉬운 기기 이름으로 입력하면 됩니다.
- 광고 ID/IDFA는 12-3을 참고하세요.
12-3. 핸드폰의 [설정] - [Google] - [광고]를 차례대로 클릭 후 화면 하단의 [이 기기의 광고 ID]를 확인한 후, 12-2 항목에 입력합니다.
※ 광고 ID의 예: 055e58c4-1c37-4110-9751-5b94~~~~~
이것으로 애드몹에 대한 설정이 완료되었습니다.
| Admob 확장 프로그램 추가하기 |
이제 앱인벤터에 Admob 확장 프로그램을 추가해 보도록 하겠습니다.
1~2 확장 프로그램은 화면구성과 블록코딩 부분에서 제공되는 소스파일에는 포함되어 있습니다.
여러분께서 새롭게 프로젝트를 만들어 구현해보시려면 내려받으시기 바랍니다.
추가해야 할 확장 프로그램은 3가지 이며, 다음과 같습니다.
1. Admob Sdk를 앱인벤터에 추가하기 위한 Admob Sdk Extension
2. 사용자에게 실제 보여 줄 Admob 광고 형태에 따른 Admob Extension (본 포스팅은 2-1. 배너 형태 사용, 택 1)
2-1. 배너 형태
2-2. Interstitial 광고
2-3. Rewarded 광고
2-4. Rewarded Interstitial 광고
2-5. App Open 광고
3. androidmanifest.xml을 생성하기 위해 개발자가 직접 만드는 extension
직접 확장 프로그램을 만들어 보겠습니다. 굉장히 간단한 과정이니 걱정하지 않으셔도 됩니다.
확장 프로그램을 만들기 위해 앱인벤터 파생 프로그래밍인 niotron을 사용하겠습니다.
3-1. 먼저 다음 링크를 통해 niotron 사이트에 접속하여 로그인 합니다. (회원가입 과정은 생략하겠습니다.)
Niotron IDE
ide.niotron.com
3-2. [Create a New Project]를 선택합니다.
3-3. [Project Name]과 [Package Name]을 입력하고 [Continue]를 클릭합니다.
- Project Name에는 적당한 프로젝트 이름을 입력합니다.
- Package Name은 보통 개발자(개발회사) 사이트를 거꾸로 쓰고 마지막에 프로젝트 이름을 입력합니다.
3-4. 다음과 같은 화면이 나오면 아래 내용을 추가합니다.
3-4-1. 9번째 라인(import com.google.appinventor.components.runtime.EventDispatcher;) 아래에
import com.google.appinventor.components.annotations.androidmanifest.*;
3-4-2. 22번째 라인(@UsesPermissions(permissionNames = "") 아래에
@UsesApplicationMetadata(metaDataElements={@MetaDataElement(name="com.google.android.gms.ads.APPLICATION_ID", value="your-app-id")})※ your-app-id 부분에 여러분의 애드몹 앱 ID를 입력합니다. 따옴표(" ")는 삭제하면 안됩니다.
3-4-3. 우측 상단의 [Compile Extension]을 클릭합니다. 그러면 여러분이 입력한 프로젝트 이름으로 확장 프로그램이 생성되고 컴퓨터로 내려받아지게 됩니다.
이것으로 앱인벤터에 광고를 달기 위한 확장 프로그램이 모두 준비되었습니다.
| 화면 구성 |
※ 예제 앱은 휴대폰 기기의 CPU온도와 메모리 사용량, 저장 공간 사용량 등을 보여주는 앱입니다.
본 포스팅에서는 애드몹 관련 부분만 다루고 있습니다.
예제와 같은 앱을 구현하기 위한 화면 구성입니다.
소스파일을 내려받아 참고하시면 되겠습니다.
1. AdmobSdks1: 애드몹을 앱인벤터에서 사용가능하게 해주는 확장 프로그램
2. AdmobBanner1: 애드몹의 광고 형태 중 배너 형태의 광고를 사용자에게 보여줄 확장 프로그램
- AdUnitId 속성에 위에서 만들어 둔 여러분의 광고 단위 ID를 입력합니다.
- TestMode는 체크를 표시하고, 나중에 실제로 앱을 플레이스토어에 게시할 때는 해제해줍니다.
3. EG_DeviceInfo1: androidmanifest.xml을 담고 있는 확장 프로그램으로 위에서 직접 만든 확장 프로그램
4. hor_banner: 애드몹 광고를 보여 줄 HorizontalArrangemnt 컴포넌트
- Tip: height 속성을 Fill Parent로 합니다.
- Tip: AlignVertical 속성을 Bottom: 3으로 설정합니다.
- 이렇게 설정하면 광고가 화면의 맨 하단에 위치하게 됩니다.
| 블록 코딩 |
애드몹 광고를 보여 주기 위한 전체 블록 코딩입니다.
①: Screen1이 처음 실행되었을 때
②: AdmobSDK를 초기설정하라. => 이 앱에서 Admob을 사용할 수 있도록 하라.
③ AdmobSDK가 사용가능하게 되었을 때,
④ 배너형태의 Admob을 로드하고 그 크기는 BannerSize로 하라.
cf.) 크기에는 Large, Medium, Full 등이 있습니다.
⑤ 광고가 로드되었을 때,
⑥ 광고를 hor_banner에 보여주어라.
위에서 보는 것처럼 블록코딩은 매우 간단합니다. 단, 순서를 반드시 지켜 주셔야 합니다.
이상 앱인벤터에 광고 달기에 대한 포스팅을 모두 마칩니다.
참고로 본 포스팅은 앱인벤터 커뮤니티의 다음 글을 거의 옮긴 것이니, 더 구체적인 사항을 참고하시면 좋을 것 같습니다.
[Free] Admob Extension - Add different types of AdMob ads in your application
Admob Extension These extensions will help you to integrate AdMob ads and ads from partner networks as mediation in your app-inventor application. Get Started : You should first integrate the necessary libraries required to display ads in your application.
community.appinventor.mit.edu
앱인벤터에서 광고 달기 또는 본 예제 앱의 다른 부분에 대한 질문이 있으신 분께서는 본 블로그 좌측 상단에 있는 카카오톡 오픈채팅(#이지 앱인벤터) , 댓글 또는 메일로 문의하시기 바랍니다.
댓글