웹앱에 Adrop SDK 설치하기 (Dprecated)

별도의 업데이트 없이 최신 버전의 SDK 를 사용하실 수 있는 API 연동 방식을 사용해 주세요.

Adrop SDK 를 설치하기 전에, 앱에 연결할 플랫폼에 앱등록이 선행되어져야 해요.

*생성된 플랫폼이 없다면, 플랫폼 배포 가이드를 참고하여 플랫폼을 생성해 주세요. *애드컨트롤에 앱 서비스 등록이 안되어 있다면, 앱 등록 가이드 를 확인해주세요.

1. Adrop 앱키 추가하기

설정 파일 준비하기 가이드를 참고해 주세요.

2. 앱에 Adrop 라이브러리 추가

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

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

3. Adrop 초기화하기

Example App

LogoGitHub - OpenRhapsody/adrop-ads-example-webGitHub

  1. 사용하기 전에 파라미터를 등록된 AppKey로 바꿔주세요. 등록된 AppKey는 다음 페이지를 참고해 확인할 수 있어요. 

adrop.initialize('YOUR_APP_KEY')

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

declare var adrop: {
    initialize: (appKey: string) => void;
    request: (unitId: string) => Promise<{ 
        ad: string,
        unit: string,
        message: string,
        creativeId: string,
        headline?: string,
        body?: string,
        destinationURL?: string
        profile?: { displayName: string, displayLogo: string, link: string }
        extra?: { id: string, text: string }[]
        asset?: string
    }>;
    setProperty: (key: string, value: any) => Promise<void>;
    logEvent: (name: string, params?: Record<string, any>) => Promise<void>;
}

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

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

Last updated