Adrop에 웹앱 등록하기

1. Adrop 프로젝트 생성

먼저 앱에 연결할 Adrop 프로젝트를 만들어주세요.

2. Adrop에 웹앱 등록하기

웹앱을 위한 Adrop 콘솔을 사용하기 위해 '프로젝트'에 웹앱 등록이 먼저 필요합니다.

웹앱 빌더 사용방법

Adrop console로 이동해주세요.
프로젝트 페이지 상단 중앙에 Web 아이콘을 클릭해서 설치를 시작해주세요.
앱 도메인 이름 입력란에 앱 도메인을 입력해주세요.

Adrop 프로젝트에 등록된 후에는 이 Adrop 웹 앱의 도메인 이름 값을 변경할 수 없습니다.

앱 닉네임을 입력해주세요.

앱 닉네임 : Adrop 콘솔에서 본인에게만 표시되는 내부 편의를 위한 식별자입니다.

'앱 등록'을 클릭하세요. 안드로이드와 iOS앱이 각각 만들어졌는지 확인해주세요.

3. Adrop 앱키 추가하기

웹앱을 생성하고 나서, 웹앱 탭 > SDK 설정 및 구성 > 코드 스니펫에서 필요한 앱키를 얻을 수 있습니다.

마케터/또는 수익화담당자에게 프로젝트에 멤버 추가를 요청하거나, 앱키만 복사해달라고 요청해주세요.

4. 앱에 Adrop 라이브러리를 추가

CDN에서 Adrop SDK 라이브러리를 로드합니다. 이 스크립트를 복사하여 <head> 태그 하단에 붙여넣으세요.

<head>
    ...
    <script src='https://storage.adrop.io/js/adrop-0.1.2.min.js' type='text/javascript'></script>
    <script>adrop = window.adrop || {}</script>
</head>

5. Adrop 초기화하기

사용하기 전에 파라미터를 적절한 값으로 바꿔주세요.

adrop.initialize('YOUR_APP_KEY')

만약 Typescript를 사용한다면, 하단의 코드를 복사해 *.d.ts 에 붙여넣으세요.

declare var adrop: {
    initialize: (appKey: string) => void;
    request: (unitId: string) => Promise<{ ad: string, unit: string, message: string }>;
    setProperty: (key: string, value: string) => Promise<void>;
    logEvent: (name: string, params?: Record<string, any>) => Promise<void>;
}

3. 만약 ESLint를 사용한다면, .eslintrc.json 의 globals 필드에 "adrop": true를 추가해주세요.

{
   "globals": {
      "adrop": true
   }
}

다음 단계

이제 광고 유닛을 등록하면 사용자에게 광고주의 직광고를 노출할 수 있어요.

광고 유닛 등록 방법을 알려드릴게요.

PreviousAdrop에 React Native 앱 등록하기 NextAdrop에 API를 활용해 등록하기

Last updated 7 months ago