Vungle - Adobe Air 시작하기

Adobe Air 확장 방법

시작하기 전에 주의할 사항

  • 현재 테스트 모드는 사용 불가능 합니다. 통합 테스트를 하려면 벙글 대시보드에서 어플리케이션을 활성화 해주십시오.

  • Vungle 확장은 Adobe AIR SDK 4.0 이상이 필요합니다. Flash Builder 또는 Flash Professional에서 AIR SDK를 업데이트하는 방법은 본 가이드의 끝에서 "AIR SDK를 어떻게 업데이트하나요?"를 참조하세요.

  • Android로 작업할 경우, Vungle AIR 확장은 JDK 7이 개발 시스템에 설치되어야 합니다.

  • ActionScript 3 Class Documentation을 볼 수 있습니다.

  • 샘플 애플리케이션 클래스의 'example/VungleExample.as'를 검토하세요. (Flash Professional 사용자이고 Document Class를 사용하는 방법을 모르는 경우, 본 가이드의 끝에서 “Flash CS6에서 VungleExample Document Class를 어떻게 사용하나요?”를 참조하세요.)

1. 확장 라이브러리 포함하기

우선, 모바일 프로젝트에 새로운 AIR를 만들고 네이티브 확장을 추가하세요.

Android를 대상으로 하는 경우, Google 플레이 서비스 및/또는 Android Support v4 라이브러리를 프로젝트에 추가해야 합니다. 다수의 다른 확장은 이러한 라이브러리를 이미 포함하고 있으므로 추가할 필요가 없습니다. 확장을 추가하려면 아래의 단계를 반복하되 com.vungle.extensions.Vungle.ane 대신에 com.vungle.extensions.android.GooglePlayServices.ane 및/또는 com.vungle.extensions.android.AndroidSupportLib.ane를 사용하세요.

Flash Professional CS6 이상

  1. Android용 AIR 또는 iOS 프로젝트용 AIR를 만드세요.
  2. 파일 > 게시 설정...을 선택하세요.
  3. 'ActionScript Settings'의 '스크립트' 옆에 있는 렌치 아이콘을 선택하세요.
  4. 라이브러리 경로 탭을 선택하세요.
  5. 'Browse for Native Extension(ANE) 파일'을 클릭하고 com.vungle.extensions.Vungle.ane 파일을 선택하세요. 확인을 누르세요.
  6. 플레이어 설정의 '대상' 옆에 있는 렌치 아이콘을 선택하세요.
  7. Android를 대상으로 하는 경우, '권한' 탭을 선택하고 '인터넷', 'WRITE_EXTERNAL_STORAGE' 및 'ACCESS_NETWORK_STATE'를 활성화하세요.
  8. '수동으로 권한 관리 및 이 앱의 manifest 추가' 상자에 체크 표시를 하세요.
  9. 확인을 누르세요.

Flash Builder 4.6 이상

  1. 프로젝트 속성으로 이동하세요.
  2. Actionscript 빌드 경로에서 네이티브 확장을 선택하세요.
  3. ANE 추가...를 선택하고 com.vungle.extensions.Vungle.ane 파일로 이동하세요.
  4. Actionscript 빌드 패키징 > Google Android를 선택하세요.
  5. 네이티브 확장 탭을 선택하고 확장 옆에 있는 '패키지' 체크박스를 클릭하세요.
  6. iOS를 대상으로 하는 경우, 'Apple iOS'로 변경하여 4단계와 5단계를 반복하세요.

2. 애플리케이션 디스크립터 업데이트

Vungle이 작동하기 위해서는, 앱의 애플리케이션 XML 파일을 변경해야 합니다. IDE로 만든 XML 파일을 아래와 같이 수정하세요. (Flash Professional 사용자인 경우, 'Flash Professional CS6 이상에 라이브러리 포함하기'에 있는 단계들을 따랐는지 확인해 주세요. 그렇지 않을 경우, Flash가 변경 사항을 되돌릴 수 있습니다.)

  1. 앱 디스크립터 파일에 AIR SDK를 4.0 이상으로 설정하세요.

    <application xmlns="http://ns.adobe.com/air/application/4.0">
  2. 디스크립터의 확장에 링크를 포함하세요.

    <extensions>
    <extensionID>com.vungle.extensions.Vungle</extensionID>
    </extensions>
  3. Android를 대상으로 하는 경우, Google 플레이 서비스 및/또는 Android Support Lib 확장을 포함해야 할 수 있습니다. 해당 확장 ID를 여기에도 추가하세요.

    <extensions>
    <extensionID>com.vungle.extensions.Vungle</extensionID>
    <extensionID>com.vungle.extensions.android.GooglePlayServices</extensionID>
    <extensionID>com.vungle.extensions.android.AndroidSupportLib</extensionID>
    </extensions>

Android를 대상으로 하는 AIR 애플리케이션

Android를 대상으로 하는 경우, Android XML 요소의 Android Manifest 추가를 업데이트해서 인터넷, WRITE_EXTERNAL_STORAGE 및 ACCESS_NETWORK_STATE 권한을 포함하고, FullScreenAdActivity 활동 정의를 추가하며, VungleService 서비스를 추가하고, google-play-services 버전 meta-data 태그를 추가하세요.

<android> 
<manifestAdditions><![CDATA[ 
<manifest android:installLocation="auto"> 

  <uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="18"/> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <application> <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version"/> <activity android:name="com.vungle.publisher.FullScreenAdActivity" android:configChanges="keyboardHidden|orientation|screenSize" android:theme="@android:style/Theme.NoTitleBar.Fullscreen" /> <service android:name="com.vungle.publisher.VungleService" android:exported="false" /> </application> </manifest> ]]></manifestAdditions> </android>

3. Vungle API 통합하기

Vungle API는 단 몇 라인의 ActionScript로 애플리케이션에 추가될 수 있습니다.

Vungle 확장 초기화

애플리케이션이 시작할 때 API를 초기화하세요. (순수 ActionScript를 사용하는 경우, Document Class의 생성자에서 하세요. Flex를 사용하는 경우, 메인 클래스의 initialize() 이벤트에서 호출하세요. Flash에 타임라인 코드를 사용하는 경우, Frame 1에서 하세요.)

  1. API 클래스 가져오기

    import com.vungle.extensions.*; 
    import com.vungle.extensions.events.*;
  2. Vungle.create()을 호출하여 API를 초기화하고 Vungle Dashboard의 애플리케이션 ID를 포함하는 배열을 삽입하세요. 동일한 프로젝트에서 iOS와 Android 모두를 대상으로 하는 경우, 배열에서 iOS ID가 먼저 오고 그 뒤에 Android ID가 오도록 하세요.

    확장 생성 과정에서 Vungle에 오류가 발생할 수 있기 때문에 try/catch에서 Vungle.create()에 대한 호출을 랩해야 합니다. (예를 들어, 데스크탑에서 실행할 경우 확장이 오류를 유발합니다.)

    try
    { 
      // initialize with your app id 
      Vungle.create(["your_vungle_id"]); 
    
      // -OR- initialize including both ios and android ids for multiplatform apps 
      // Vungle.create(["your_ios_vungle_id","your_android_vungle_id"]); 
    } catch (error:Error) {
      // could not create extension. Are you running on something besides iOS/Android?
    }

삽입 광고 표시

삽입 광고를 표시하려면 displayAd()를 호출하세요. 먼저 sAdAvailable() 메소드를 사용하여 광고가 있는지 확인해 보세요.

if (Vungle.vungle.isAdAvailable())
{
    Vungle.vungle.playAd();
}

보상형 광고 표시

보상형 광고를 표시하려면 displayIncentivizedAd()를 호출하세요. 먼저 isAdAvailable() 메소드를 사용하여 광고가 있는지 확인해 보세요. 이 기능은 2개의 매개 변수를 선택할 수 있습니다. 광고에 닫기 버튼 표시 여부와 사용자 인식 스트링을 선택할 수 있습니다(Vungle의 서버 측 웹훅과 함께 사용할 수 있으며, 사용자가 동영상 광고 시청을 완료할 때마다 HTTP GET이 트리거됨).

if (Vungle.vungle.isAdAvailable())
{
    var config:VungleAdConfig = new VungleAdConfig();
    config.incentivized = true;
    Vungle.vungle.playAd(config);
}

보상형 광고 시청을 완료한 사용자에게 보상을 제공하려면, 아래에 설명된 대로 AD_VIEWED 이벤트 리스너를 구현해야 합니다.

이벤트 리스너 추가

Vungle 확장은 5개의 이벤트를 보냅니다: VungleEvent.AD_PLAYABLE, VungleEvent.AD_STARTED, VungleEvent.AD_FINISHED, VungleEvent.AD_VIEWED and VungleEvent.AD_LOG

  1. 광고가 플레이될 준비가 되면 AD_PLAYABLE 이 호출됩니다. 
    Vungle.vungle.addEventListener(VungleEvent.AD_PLAYABLE, onAdPlayable);
    
    function onAdPlayable(e:VungleEvent):void
    {
        trace("ad playable");
    }
    
  2. AD_STARTED 와 AD_FINISHED 는 각각 광고가 보여질 때와 종료될 때 호출됩니다.

    Vungle.vungle.addEventListener(VungleEvent.AD_STARTED, onAdStarted); 
    Vungle.vungle.addEventListener(VungleEvent.AD_FINISHED, onAdFinished); 
    
    function onAdStarted(e:VungleEvent):void 
    { 
      trace("ad displayed"); 
    } 
    
    function onAdFinished(e:VungleEvent):void
    { 
      trace("ad dismissed: " + e.wasCallToActionClicked);
    }
  3. The AD_VIEWED 이벤트는 사용자가 Vungle 광고 시청을 완료했을 때와 동영상의 일부를 시청했을 때 트리거됩니다. 'watched' 속성은 사용자가 본 동영상의 초 단위 시간입니다. 'length' 속성은 동영상의 총 길이입니다.

    (이 이벤트는 프리롤 HTML 에셋이 광고에 있고 사용자가 동영상을 보기 전에 광고를 껐을 때와 같은 특정 상황에서는 호출되지 않습니다.)

    보상형 광고의 경우, Vungle은 사용자가 동영상의 80% 이상을 시청했을 때 시청 완료로 처리합니다.

    Vungle.vungle.addEventListener(VungleEvent.AD_VIEWED, onAdViewed); 
    
    function onAdViewed(e:VungleEvent):void 
    { 
      trace("watched"+e.watched+" of "+e.length+" second video."); 
      var percentComplete:Number=e.watched/e.length; 
      if(percentComplete>0.80) 
      { 
        trace("counts a completed view- present reward."); 
      } 
    }
  4. 벙글 SDK에서 로그 메세지를 보낼 때 AD_LOG 가 호출됩니다. 디버깅을 위애 이 이벤트를 사용할 수 있습니다. 로깅은 iOS에서만 수행됩니다.

    
    Vungle.vungle.setLoggingEnabled(true);
    Vungle.vungle.addEventListener(VungleEvent.AD_LOG, onAdLog);
    
    private function onAdLog(e:VungleEvent):void
    {
        log("ad log: " + e.message);
    }
  5.  

자동 회전 토글

setAutoRotationEnabled() 메소드를 사용해서 동영상이 사용자의 기기 방향에 따라 자동으로 회전할지 여부를 선택할 수 있습니다:

Vungle.vungle.setAutoRotation(true);

추가 옵션들

앞서 본 것 처럼 playAd()에 VungleAdConfig 으로 설정 옵션들을 포함하는 오브젝트를 파라미터로 넣을 수 있습니다.

orientation

이 속성으로 광고의 회전 방향을 정할 수 있습니다. iOS와 Android의 플래그가 다르므로 VungleOrientation 클래스 에서 자세한 내용을 확인하세요. 여러 플래그들을 비트연산자 | (or) 으로 연결할 수 있습니다.

config.orientation = VungleOrientation.ANDROID_AUTOROTATE | VungleOrientation.IOS_PORTRAIT;

soundEnabled

이 속성으로 광고의 소리를 끄거나 킬 수 있습니다.

backButtonImmediatelyEnabled

이 옵션으로 Android 기기에서 광고 재생 중에 뒤로 버튼 사용 가능 여부를 선택할 수 있습니다. 만약 true이면 유저가 백버튼을 눌러 광고에서 즉시 빠져나갈 수 있게 합니다. iOS에서는 이 기능을 사용할 수 없습니다.

immersiveMode

Android의 KitKat 이상의 기기에서 Immersive mode를 활성화 또는 비활성화합니다.

incentivized

유저에게 광고 시청에 대한 보상을 주려면 true로 설정하세요. true인 경우, 사용자가 광고를 건너뛰려고 할 때 확인 대화 상자를 보게 됩니다.

incentivizedUserId

보상 광고를 위한 특별한 유저 아이디 입니다. S2S 콜백을 사용하려면 이 유저가 광고 시청을 하였는지 입증하기 위해 이 값을 입력해야 합니다.

incentivizedCancelDialogTitle, incentivizedCancelDialogBodyText, incentivizedCancelDialogCloseButtonText, incentivizedCancelDialogKeepWatchingButtonText

이 옵션들로 유저가 보상광고를 스킵하려 할 때 보이는 다이얼로그의 내용을 변경할 수 있습니다.

extra1 … extra8

You can use this to keep track of metrics such as age group, gender, etc.

placement

An optional ad placement name for enhanced data categorization when requesting data through the Vungle Reporting API.

largeButtons

이 옵션은 iOS에서만 사용가능합니다. 만약 true이면 플레이 중의 버튼들의 크기가 상대적으로 크게 보여집니다.

 

Global defaults

You can use global configuration object to set default values for the options:


// set any configuration options you like
VungleAdConfig.globalConfig.orientation = VungleOrientation.ANDROID_MATCH_VIDEO;
VungleAdConfig.globalConfig.soundEnabled = false;

Then enery new VungleAdConfig object is created with these values set by default. playAd() without options also uses the global configuration.

Deprecated methods

Since v2.4.0 the following methods are deprecated:


Vungle.vungle.displayAd(showCloseButton:Boolean, orientationHint:int):void;
Vungle.vungle.displayIncentivizedAd(name:String, showCloseButton:Boolean, orientationHint:int):void;
Vungle.vungle.setSoundEnabled(enabled:Boolean):void;
Vungle.vungle.setBackButtonEnabled(backEnabled:Boolean):void;
Vungle.vungle.setIncentivizedBackButtonEnabled(backEnabled:Boolean):void;

These methods have been kept for backward compatibility. It's not recommended to use them in new applications or mix with the playAd() method call.

문제 해결 및 자주 묻는 질문

“Flash Professional CS6에서 VungleExample.as Document Class를 어떻게 사용하나요?”

  1. 먼저, 애플리케이션을 만든 다음, 본 가이드의 1~3 섹션을 따라 확장을 추가하세요.

  2. VungleExample.as를 .fla와 같은 폴더에 복사하여 붙여넣으세요. 콘텐츠를 복사하여 타임라인에 붙여넣지는 마세요. 작동하지 않습니다.

  3. 51번 라인에서 앱 ID를 변경하세요. 변경된 ID가 귀하의 Vungle 앱 ID입니다.

  4. Flash 속성에서 'Document Class' 아래에 'VungleExample'을 따옴표 없이 입력하고 확인을 누르세요.

  5. 애플리케이션을 빌드하고 설치하세요.

“Flash Professional CS6에서 AIR SDK(4.0 이상)의 새로운 버전을 어떻게 설치하나요?”

이 링크를 따라가서 최신 AIR SDK를 찾으세요. 이미 AIR 4.0 이상을 설치한 경우, 이 단계를 건너뛸 수 있습니다. 그렇지 않을 경우, 아래의 설명을 따르세요.

  1. 하드 드라이브에서 AIR 4.0 이상의 SDK 패키지를 압축 해제하세요.

  2. Flash Professional CS6을 실행하세요.

  3. 도움말 &gt; AIR SDK 관리...를 선택하세요.

  4. 더하기(+) 기호 버튼을 눌러서 압축 해제된 AIR SDK의 위치로 이동하세요.

  5. 확인을 누르세요.

  6. 파일 &gt; 게시 설정을 선택하세요.

  7. '대상' 드롭다운 메뉴에서 iOS용 최신 AIR SDK를 선택하세요.

“Flash Builder에서 최신 버전의 AIR SDK(4.0 이상)를 어떻게 설치하나요?”

이 링크를 따라서 최신 AIR SDK를 찾으세요. 이미 AIR 4.0 이상을 설치한 경우, 이 단계를 건너뛸 수 있습니다. 또한, Adobe의 Flash Builder AIR SDK 업데이트에 대한 최신 설명서를 활용할 수도 있습니다.

 

또 다른 질문이 있으십니까? 문의 등록

댓글