Vungle (SDK v.1.0 - v.4.1) - Adobe Airで始めよう

Adobe Air Extensionの説明

始める前に:

  • Vungle Extensionは、Adobe AIR SDK 4.0以降を必要とします。Flash BuilderまたはFlash ProfessionalのAIR SDK のアップデートの説明については、このガイドの「AIR SDKのアップデート方法」をご参照ください。

  • Androidで作業している場合、Vungle AIR Extensionは、JDK 7の開発システムへのインストールを必要とします。

  • ActionScript 3 Class Documentationを閲覧できます。

  • サンプルアプリケーションクラス用の「example/VungleExample.as」を閲覧してください。(Flash Professionalを使用していて、Document Classの使用方法が分からない場合は、「Flash CS6のVungleExample Document Classの使用方法」をご参照ください。)

1. 拡張子ライブラリを入れる

最初に、モバイルプロジェクト用の新しいAIRを作成し、その固有拡張子を追加します。

Androidを対象としている場合、Google Play Servicesまたは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. File > Publish Settings...を選択します
  3. 「ActionScript Settings」用の「Script」の隣のレンチアイコンを選択します
  4. Library Path タブを選択します
  5. 「Browse for Native Extension (ANE) File」をクリックし、 com.vungle.extensions.Vungle.aneファイルを選択します。OKを押します
  6. Player Settings用の「Target」の隣のレンチアイコンを選択します
  7. Androidを対象としている場合、「Permissions」タブを選択し、「INTERNET」、「WRITE_EXTERNAL_STORAGE」および「ACCESS_NETWORK_STATE」を有効にします
  8. 「Manually manage permissions and manifest additions for this app(手動でこのアプリケーションの許可を管理し、追加を示す)」ボックスにチェックマークを付けます
  9. OKを押します

Flash Builder 4.6以降の場合:

  1. Project Properties に進みます
  2. Actionscript Build Pathの下のNative Extensionsを選択します
  3. Add ANE... を選択し、com.vungle.extensions.Vungle.aneファイルに進みます
  4. Actionscript Build Packaging > Google Androidを選択します
  5. Native Extensionsタブを選択し、拡張子の隣の「Package」チェックボックスをクリックします
  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 Play Servicesまたは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 Additions をアップデートして、INTERNET、WRITE_EXTERNAL_STORAGEと ACCESS_NETWORK_STATEの許可を追加します。FullScreenAdActivityアクティビティの定義を追加します。VungleServiceサービスを追加します。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" /> 
  <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ダッシュボードのアプリケーションIDを含む配列に送ります。同じプロジェクトでiOSとAndroidの両方を対象としている場合は、両方のIDを配列に入れます(iOSのIDを最初に、AndroidのIDを二番目に入れます)。

    作成プロセス中にVungle からエラーが出されるので、トライまたはキャッシュ内の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()を呼び出します。広告がisAdAvailable()メソッドで利用できることを最初に確認します:

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

インセンティブ広告を表示する

インセンティブ広告を表示するには、displayIncentivizedAd()を呼び出します。広告がisAdAvailable()メソッドで利用できることを最初に確認します。この機能には、2つのオプションパラメータがあります。「閉じる」ボタンを広告に表示するかどうかと、オプションのユーザー識別文字列をつけるかどうか(これは、Vungleのサーバー側のWebhookで使用でき、ユーザーが表示を完了するたびにHTTP GETを作動させます)です:

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

インセンティブ広告の表示を完了したプレイヤーに報酬を出すには、以下のとおり、AD_VIEWEDイベント・リスナーを実行します。

イベント・リスナーを追加する

The Vungle Extension dispatches five events: 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. ユーザーがVungleの広告から離れ、ビデオの一部を見た時点で、AD_VIEWEDイベントが作動します。この「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. Vungle SDK によりログメッセージが送信されたとき、AD_LOG が送られます。これをデバッグのために使うことができます。記録は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);
    }
    

自動回転の有無を切り替える

setAutoRotationEnabled()メソッドを使用し、ユーザーのデバイスの向きに対し、ビデオを自動的に回転させるかどうかを切り替えることができます:

Vungle.vungle.setAutoRotation(true);

その他のオプション

前にもご覧になったとおり、playAd() メソッドを呼び出すとき、オプジェクトを構成オプションで送ることができます。VungleAdConfigでは以下のプロパティをご利用いただけます:

向き

このプロパティは広告の向きを指定するのに使用できます。Android 用とiOS 用に異なるフラグが用意されています。詳細はVungleOrientation クラスをご覧ください。フラグはビットワイズORオペレータと組み合わせて使用することができます:

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

soundEnabled

このプロパティは広告を音有りまたは消音で流すかを切り替えるのに使用できます。

backButtonImmediatelyEnabled

このオプションはAndroid のみを対象としています。trueの場合、ユーザーは「戻る」ボタンを使って広告からすぐに離れることができます。falseの場合、画面上の「閉じる」ボタンが表示されるまで、ユーザーは「戻る」ボタンを使って広告から離れることができません。

immersiveMode

このオプションはAndroidのみを対象としています。KitKat+デバイス上の没入モードを有効または無効にします。

インセンティブ

インセンティブモードを設定します。trueの場合、ユーザーが広告をスキップしようとするとメッセージが表示され確認を求められます。

incentivizedUserId

独自のユーザーIDを設定して、アプリケーションに送り、インセンティブ広告を見たユーザーが報酬をもらうべきかどうかを判断します。

incentivizedCancelDialogTitle, incentivizedCancelDialogBodyText, incentivizedCancelDialogCloseButtonText, incentivizedCancelDialogKeepWatchingButtonText

これらのオプションは、インセンティブ広告をスキップする場合の確認メッセージをカスタマイズするのに使用できます。

extra1 … extra8

COMING SOON - これは年齢や性別などのメトリックを追跡するのに使用できます。

配置

COMING SOON - Vungle 報告API 経由でデータを要求するときの、詳細データ カテゴリー化用のオプション広告配置名です。

largeButtons

このオプションはiOS のみを対象としています。trueに設定された場合、ビデオの上に表示される画面上のボタンがより大きくなります。

 

全体初期設定

全体構成オブジェクトを使用してオプション用の初期設定値を設定することができます:


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

新しいVungleAdConfig オブジェクトはすべて初期設定で設定された値で作成されます。オプションなしのplayAd() も全体構成を使用します。

廃止される可能性のあるメソッド

v2.4.0以降、下記のメソッドは廃止される可能性があります:


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;

これらのメソッドは後方互換のために維持されていますが、新しいアプリケーションで使用したり、playAd() メソッド呼び出しで使用することは推奨されていません。

トラブルシューティングとよくある質問

「どのようにFlash Professional CS6でVungleExample.as Document Classを使うのですか。」

  1. まず、このガイドの1~3項に従って、アプリケーションを作成し、拡張子を追加します。

  2. VungleExample.asを自分の.flaと同じフォルダにコピー・アンド・ペーストします。その中味をタイムラインにコピー・アンド・ペーストしないでください。それでは機能しません。

  3. 51行目のアプリケーションIDを自分のVungleアプリケーションIDに変更します。

  4. Flashプロパティ内の「Document Class」の下に、「VungleExample」を(鍵括弧を付けずに)タイプし、OKを押します。

  5. アプリケーションを構築し、インストールします。

「どのようにしてAIR SDKの最新版(4.0以降)をFlash Professional CS6にインストールするのですか。」

このリンクを利用して、AIR SDKの最新版を見つけます。AIRの4.0以降が既にインストールされている場合は、この手順を省略できます。インストールされていない場合は、以下の手順に従ってください:

  1. AIR 4.0以降のSDKパッケージを自分のハードドライブ上のどこかに解凍します。

  2. Flash Professional CS6を起動します。

  3. Help > Manage AIR SDK…を選択します...

  4. プラス(+)ボタンを押し、アンフリーズしたAIR SDKがある場所に進みます

  5. OKを押します

  6. File > Publish Settingsを選択します

  7. 「Target」ドロップダウンメニューからiOS用のAIR SDK最新版を選択します

「どのようにしてAIR SDKの最新版(4.0以降)をFlash Builderにインストールするのですか。」

このリンクを利用して、AIR SDKの最新版を見つけます。AIRの4.0以降が既にインストールされている場合は、この手順を省略できます。Adobeの最新のFlash Builder AIR SDKアップデート方法を活用することもできます。

他にご質問がございましたら、リクエストを送信してください

コメント