Vungle 시작하기(SDK v.5.1 이상) - Adobe AIR

이 지침에 따라 Vungle Adobe Air 플러그인을 기본 샘플 애플리케이션에 통합합니다. 여기에 언급된 소스 코드는 공용 GitHub 저장소에서 사용할 수 있습니다.

목차

시작하기 전에

  • Vungle Extension을 사용하려면 Adobe AIR SDK 4.0 이상이 필요합니다. Flash Builder 또는 Flash Professional에서 AIR SDK를 업데이트하는 방법은 이 설명서의 마지막 부분에 있는 "추가 정보" 섹션을 참조합니다.

  • Android를 사용하는 경우, Vungle AIR 확장 기능을 이용하려면 개발 중인 시스템에 JDK 6 또는 JDK 7(사용 중인 Flash 버전에 따라 다름)이 설치되어 있어야 합니다. 애플리케이션을 실행하려면 Android 3.0(Honeycomb - API version 11) 이상이 필요합니다.

  • ActionScript 3 클래스 문서를 참조할 수 있습니다.

  • example/VungleExample.as를 샘플 애플리케이션 클래스로 검토합니다. (Flash Professional 사용자이고 문서 클래스 사용법을 모르는 경우, article.) 마지막 부분의 "Animate 또는 Flash Professional CS6 VungleExample.as 문서 클래스 사용"를 참조합니다.

1단계. 확장 라이브러리 포함

모바일 프로젝트용 새 AIR를 만들고 기본 확장을 추가합니다.

Android를 타겟으로 하는 경우, 프로젝트에 Google Play Services 라이브러리를 추가해야 할 수 있습니다. 이미 다수의 다른 확장 프로그램에 이 라이브러리가 포함되어 있을 수 있습니다. 확장을 추가하려면 아래의 과정을 반복하되, com.vungle.extensions.Vungle.ane 대신 com.vungle.extensions.android.GooglePlayServices.ane을 사용합니다.

Animate 및 Flash Professional CS6 이상

  1. Android용 AIR 또는 iOS용 AIR 프로젝트를 새로 만듭니다.
  2. 파일 → 게시 Settings...을 선택합니다.
  3. 'ActionScript 설정'에서 스크립트 옆에 있는 공구 모양 아이콘을 선택합니다.
  4. 라이브러리 경로 탭에서 기본 확장(ANE) 파일 검색을 클릭하고 vungle.extensions.Vungle.ane 파일을 선택합니다. 확인을 클릭합니다.
  5. '플레이어 설정'에서 타겟 옆에 있는 공구 모양 아이콘을 선택합니다.
  6. Android를 타겟으로 하는 경우: 권한 탭에서 '인터넷', 'WRITE_EXTERNAL_STORAGE', 'ACCESS_NETWORK_STATE'을 활성화합니다.
  7. 이 앱에 대한 권한 및 매니페스트 추가 기능을 수동으로 관리 옵션을 선택하고 확인을 클릭합니다.

Flash Builder 4.6 이상을 사용하는 경우

  1. 액션스크립트 빌드 경로프로젝트 속성에서 기본 확장을 선택합니다.
  2. ANE... 추가를 선택하고 vungle.extensions.Vungle.ane 파일로 이동합니다.
  3. 액션스크립트 빌드 패키징 → Google Android를 선택합니다.
  4. 기본 확장 탭에서 확장 옆에 있는 패키지 옵션을 선택합니다.
  5. iOS를 타겟으로 하는 경우, 'Apple iOS' 타겟에 대해 3단계와 4단계를 반복합니다.

2단계. 애플리케이션 설명자 업데이트

Vungle을 사용하려면 앱의 애플리케이션 XML 파일을 변경해야 합니다. 다음의 변경 사항을 실행해 IDE에서 만든 XML 파일을 수정합니다.

참고: Flash Professional을 사용하는 경우, 위의 'Animate 및 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 Play Services 확장을 추가해야 할 수 있습니다. 확장 ID도 여기에 추가합니다.
    <extensions>
    <extensionID>com.vungle.extensions.Vungle</extensionID>
    <extensionID>com.vungle.extensions.android.GooglePlayServices</extensionID>
    </extensions>

Android 타겟 AIR 애플리케이션의 경우

Android를 타겟으로 하는 경우, Android XML 요소에서 Android 매니페스트 추가 기능을 업데이트합니다.

  • 인터넷, WRITE_EXTERNAL_STORAGE, ACCESS_NETWORK_STATE 권한 포함
  • VideoFullScreenAdActivity 추가,MraidFullScreenAdActivity, MraidFullScreenAdActivity 액티비티 정의
  • google-play-services 버전 메타데이터 태그 추가:
    
    <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.VideoFullScreenAdActivity"
         android:configChanges="keyboardHidden|orientation|screenSize|screenLayout|smallestScreenSize"
         android:theme="@android:style/Theme.NoTitleBar.Fullscreen"/>
       <activity android:name="com.vungle.publisher.MraidFullScreenAdActivity"
         android:configChanges="keyboardHidden|orientation|screenSize|screenLayout|smallestScreenSize"
         android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen"/>
       <activity android:name="com.vungle.publisher.FlexViewAdActivity"
         android:configChanges="keyboardHidden|orientation|screenSize|screenLayout|smallestScreenSize"
         android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen"/>
     </application>
    
    </manifest>
    ]]></manifestAdditions>
    </android>

3단계. Vungle API 통합

단 몇 줄의 ActionScript 만으로 Vungle API를 애플리케이션에 추가할 수 있습니다.

Vungle 확장 초기화

참고: 앱별로 기본 광고위치가 자동으로 생성됩니다. 이 초기화 단계에서 광고위치 기능을 사용하지 않더라도 반드시 광고위치 참조 ID를 제공해야 합니다. 광고위치를 여러 개 만드는 경우, 참조 ID를 모두 제공합니다.

애플리케이션이 시작되면 API를 초기화합니다.

  • 순수한 ActionScript를 사용하는 경우, 문서 클래스 생성자에서 이 작업을 수행합니다.
  • Flex를 사용하는 경우, 메인 클래스의 initialize() 이벤트에서 이 작업을 불러옵니다.
  • Flash에서 타임라인 코드를 사용하는 경우, 프레임 1에서 이 작업을 수행합니다.
  1. API 클래스 가져오기:
    가져오기 com.vungle.extensions.*; 
    com.vungle.extensions.events.*; 가져오기 
  2. create()를 호출하여 API를 시작하고, Vungle 대시보드에서 애플리케이션 ID의 문자열과 애플리케이션의 광고위치 참조 ID가 들어있는 배열을 전달합니다. 동일한 프로젝트에서 iOS와 Android를 모두 타겟팅하는 경우 create() 메서드에 플랫폼별로 다른 애플리케이션 ID와 해당 광고위치 배열을 제공합니다.

    생성 프로세스 중에 Vungle이 오류를 발생시킬 수 있으므로(예: 데스크탑에서 실행 중인 경우 확장 프로그램에서 오류 발생) 예외잡기에서 Vungle.create()에 대한 호출을 래핑해야 합니다.
    try
    {
        //앱 ID로 초기화
        Vungle.create("your_vungle_id", [“placement1”, “placement2”, “placement3”]);
     
    } catch (error:Error) {
        //확장 생성 불가능. iOS/Android 외에 다른 것을 실행 중입니까?
    }

광고위치 광고 로드

광고위치 광고를 재생하려면 해당 광고위치에 광고를 로드해야 합니다. 자동 캐시된 광고위치에는 이 메서드를 호출할 필요가 없습니다. SDK는 자동 캐시된 광고위치를 내부적으로 로드하려고 시도합니다.

Vungle.vungle.loadAd(“non_auto_cached_placement”);

광고위치 광고 재생

광고가 이벤트 리스너를 통해 재생될 준비가 되면 알 수 있습니다. 광고위치가 재생 가능한 상태가 되면 광고를 재생할 수 있습니다.

If (Vungle.vungle.isAdAvailable(“placement_id”)) {
    Vungle.vungle.playAd(“placement_id”);
}

이벤트 리스너 추가

Vungle Extension은 다음과 같은 네 가지 이벤트를 전달합니다. VungleEvent.AD_PLAYABLE, VungleEvent.AD_STARTED, VungleEvent.AD_FINISHED, VungleEvent.AD_FAILED, VungleEvent.AD_INIT, VungleEvent.AD_LOG.

  1. AD_PLAYABLE는 광고가 재생 준비 되었을 때 전달됩니다.
    Vungle.vungle.addEventListener(VungleEvent.AD_PLAYABLE, onAdPlayable);
    function onAdPlayable(e:VungleEvent):void
    {
        if (e.isAdPlayable) {
            trace(“ad is playable for placement: “ + e.placement);
            Vungle.vungle.playAd(e.placement);
        } else {
    	trace(“ad not playable for placement: “ + e.placement);
        }
    }
  2. AD_STARTEDAD_FINISHED 이벤트는 각각 광고가 표시되거나 해제될 때 전달됩니다.
    Vungle.vungle.addEventListener(VungleEvent.AD_STARTED, onAdStarted);
    Vungle.vungle.addEventListener(VungleEvent.AD_FINISHED, onAdFinished);
    
    function onAdStarted(e:VungleEvent):void
    {
        trace("ad displayed for placement: " + e.placement);
    }
    
    function onAdFinished(e:VungleEvent):void
    {
        trace("ad dismissed for placement: “ + e.placement + “, CTA = " + e.wasCallToActionClicked);
    
        if (e.wasSuccessfulView) {	
            trace("counts a completed view - present reward.");
        }
    }
  3. AD_INIT는 Vungle SDK가 초기화 완료되었을 때 전달됩니다.
    function onAdInit(e:VungleEvent):void
    {
        trace(“Vungle SDK is initialized: “ + e.isInitialized”);
    }
  4. AD_LOG는 Vungle SDK에서 로그 메시지를 보낼 때 전달됩니다. 디버깅에 사용할 수 있습니다. 로깅은 iOS용 Vungle SDK에서만 구현되므로 이 이벤트는 플랫폼에 따라 다릅니다.
    Vungle.vungle.setLoggingEnabled(true);
    Vungle.vungle.addEventListener(VungleEvent.AD_LOG, onAdLog);
    
    private function onAdLog(e:VungleEvent):void
    {
        log("ad log: " + e.message);
    }

추가 옵션

이미 본 것처럼, playAd() 메서드를 호출할 때 구성 옵션을 사용하여 객체를 전달할 수 있습니다. 이 속성은 VungleAdConfig에서 사용할 수 있습니다.

옵션

밸류

설명

orientation

VungleOrientation

Android

●      VungleOrientation.AUTO_ROTATE

●      VungleOrientation.ANDROID_MATCH_VIDEO

iOS

●      VungleOrientation.IOS_LANDSCAPE

●      VungleOrientation.IOS_PORTRAIT

soundEnabled

부울

true인 경우(기본), 비디오 광고를 재생하는 동안 장치의 소리 설정에 따라 사운드를 사용할 수 있습니다. false인 경우, 비디오 재생이 무음 상태로 시작됩니다. 재생되는 중에 사용자가 음향을 끄거나 음소거 상태를 해제할 수 있습니다.

backButtonImmediatelyEnabled

부울

Android에 한해, true에서는 사용자가 뒤로 버튼을 사용해 즉시 광고를 끝낼 수 있습니다. false(기본값)에서는 화면에 닫기 버튼이 나타날 때까지 사용자가 뒤로 버튼을 사용해 광고를 끝낼 수 없습니다.

immersiveMode

부울

Android에 한해, true에서는 KitKat+ 장치에서 몰입형 모드를 사용합니다. false가 기본으로 설정되어 있습니다)

incentivizedUserId

스트링

해당 사용자에게 인센티브화 광고 시청에 대한 보상을 제공해야 하는지 확인하기 위해 애플리케이션에 고유한 사용자 ID가 전달되도록 설정합니다.

incentivizedCancelDialogTitle

스트링

사용자가 비디오를 끝나기 전에 닫으려고 할 때 표시되는 메시지를 사용자 정의할 수 있습니다.

 

참고: 이 옵션은 표준 Vungle 광고에만 적용되며 동적 템플릿 광고에는 적용되지 않습니다. 동적 템플릿 광고에 적용되는 옵션은 대시보드에서 지정할 수 있으며, 동일한 옵션이 제공됩니다.

incentivizedCancelDialogBodyText

incentivizedCancelDialogCloseButtonText

incentivizedCancelDialogKeepWatchingButtonText

샘플 코드:

var adConfig:VungleAdConfig = new VungleAdConfig();
            
adConfig.orientation = VungleOrientation.ANDROID_MATCH_VIDEO | VungleOrientation.IOS_LANDSCAPE;
adConfig.soundEnabled = false;

android: {
    adConfig.backButtonImmediatelyEnabled = true;
    adConfig.immersiveMode = true;
};

adConfig.incentivizedUserId = "vungle_test_user";
adConfig.incentivizedCancelDialogBodyText = "body_text";
adConfig.incentivizedCancelDialogCloseButtonText = "close_button_text";
adConfig.incentivizedCancelDialogKeepWatchingButtonText = "continue_button_text";
adConfig.incentivizedCancelDialogTitle = "title_text";

Vungle.vungle.playAd(placement, adConfig);

전역 기본값

전역 구성 객체를 사용하여 옵션 기본값을 설정할 수 있습니다.

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

그러면 새로운 VungleAdConfig 객체를 만들 때 모두 이 기본값으로 생성됩니다. 옵션 없는 playAd()도 전역 구성을 사용합니다.

참고: 앱이 테스트 모드에 있는 동안에는 광고 중인 앱을 다운로드할 수 없습니다. 또한, 대시보드가 광고 노출 수를 보고하지 않습니다. 이는 사용자가 올바르게 SDK를 통합했는지 확인하는 데에만 테스트 광고가 사용되기 때문입니다. 이 기능은 해당 앱이 활성 모드에서 작동할 준비가 되었을 때 비로소 제공됩니다.

추가 정보

Animate 또는 Flash Professional CS6에서 VungleExample.as 문서 클래스 사용

  1. 먼저 애플리케이션을 만들고 이 통합 설명서의 1-3단계에 따라 확장을 추가합니다.
  2. 복사하여 .fla와 동일한 폴더에 붙여 넣습니다. 해당 내용을 복사하여 타임라인에 붙여 넣지 마십시오.
  3. 20행의 앱 ID 및 광고위치 ID를 내 Vungle ID로 변경합니다.
  4. Flash 속성의 문서 클래스에서 VungleExample를 입력하고 확인을 클릭합니다.
  5. 애플리케이션을 빌드하고 설치합니다.

Flash Professional CS6에 AIR SDK의 새로운 버전(4.0 이상) 설치

다음 링크를 사용해 최신 AIR SDK를 찾습니다. AIR 4.0 이상이 설치되어 있는 경우 이 단계를 건너뜁니다. 그렇지 않으면 아래 지침을 따르십시오.

  1. AIR 4.0 이상의 SDK 패키지를 하드 드라이브 위치에 압축 해제합니다.
  2. Flash Professional CS6를 시작합니다.
  3. 도움말 → AIR SDK... 관리를 선택합니다.
  4. +(플러스)를 클릭하고 AIR SDK을 압축 해제한 위치로 이동합니다.
  5. 확인을 클릭합니다.
  6. 파일 → 게시 설정을 선택합니다.
  7. 타겟 드롭 다운 메뉴에서 iOS용 최신 AIR SDK를 선택합니다.

Flash Builder에 AIR SDK의 새로운 버전(4.0 이상) 설치

다음 링크를 사용해 최신 AIR SDK를 찾습니다. AIR 4.0 이상이 설치되어 있는 경우 이 단계를 건너뜁니다. Adobe의 최신 Flash Builder AIR SDK 업데이트 지침을 이용할 수도 있습니다.

Adobe Animate 잘못된 입력 오류 해결

아래 이미지와 같은 오류가 발생하면 이 문서를 참조합니다.

image2.png

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

댓글