IMA SDK for Android を使ったカスタム UI

このガイドでは、IMA SDK for Android を使用して独自のカスタム UI を実装する方法について説明します。そのためには、デフォルトの UI を無効にして新しいカスタム UI を設定し、SDK から取得した広告情報を新しい UI に入力する必要があります。

注: この機能を使用するには、Google アド マネージャー アカウントが有効になっている必要があります。詳しくは、アカウント マネージャーにお問い合わせください。

注: この例は、Android 向けの IMA BasicExample をベースにしています。

広告 UI を無効にする

カスタム UI を表示するには、まずデフォルトの広告 UI を無効にする必要があります。これを行うには、AdsRenderingSettings.setDisableUi() を呼び出して、AdsRenderingSettings を AdsManager.init() に渡します。

MyActivity.java

ImaSdkFactory mSdkFactory = ImaSdkFactory.getInstance();
AdsManager mAdsManager;

@Override
public void onAdsManagerLoaded(AdsManagerLoadedEvent adsManagerLoadedEvent) {
    mAdsManager = adsManagerLoadedEvent.getAdsManager();

    ...
    AdsRenderingSettings settings = mSdkFactory.createAdsRenderingSettings();
    settings.setDisableUi(true);
    mAdsManager.init(settings);
}

その後、カスタム UI を表示するかどうかを判断する必要がある場合は、広告があるかどうかを確認し、Ad.isUiDisabled() を呼び出してデフォルトの広告 UI が無効になっていることを確認します。

カスタム UI を表示する

デフォルトの UI を無効にしたら、次はカスタムの広告 UI を表示します。この例では、既存の動画プレーヤー レイアウトに新しい RelativeLayout を追加し、広告の再生中はこのレイアウトを表示し、広告の再生がない場合はこのレイアウトを非表示にします。

フラグメント レイアウト ファイルに次のコードを追加します。

fragment_video.xml

<com.google.ads.interactivemedia.v3.samples.samplevideoplayer.SampleVideoPlayer
    android:id="@+id/sampleVideoPlayer"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
<RelativeLayout
        android:id="@+id/customUi"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="invisible">
                <TextView
                    android:id="@+id/adCounter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@android:color/holo_green_light"
                    android:layout_alignParentTop="true"
                    android:layout_alignParentLeft="true"
                    android:text="@string/ad_counter" />
                <Button
                  android:id="@+id/learnMoreButton"
                  android:background="@android:color/holo_green_light"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_alignParentTop="true"
                  android:text="@string/learn_more"
                  android:layout_alignParentRight="true" />
                <Button
                  android:id="@+id/skipButton"
                  android:background="@android:color/holo_green_light"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_alignParentBottom="true"
                  android:text="@string/skip_ad"
                  android:enabled="false"
                  android:layout_alignParentRight="true" />
</RelativeLayout>

次に、カスタム UI を使用するコードを Activity に追加します。UI を更新するには、タイマー Handler と、その上で実行される Runnable を作成します。

MyActivity.java

// The view containing the custom UI.
private View mCustomUi;
// The timer handler.
private Handler mTimerHandler = new Handler();

// The Runnable that runs your custom UI update loop.
private Runnable mTimerRunnable = new Runnable() {
    @Override
    public void run() {
        updateCustomUi();
        mTimerHandler.postDelayed(this, 500);
    }
};

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
...
    mCustomUi = rootView.findViewById(R.id.customUi);
    mAdCounterUi = (TextView) rootView.findViewById(R.id.adCounter);
}

@Override
public void onAdEvent(AdEvent adEvent) {
    ...
    switch (adEvent.getType()) {
        ...
            case STARTED:
            // Start your update loop.
            mTimerHandler.post(mTimerRunnable);
            Break;
                ...
        case COMPLETED:
            mCustomUi.setVisibility(View.INVISIBLE);
            mTimerHandler.removeCallbacks(mTimerRunnable);
            ...
    }
}

@Override
public void onPause() {
...
    // Stop ad UI update loop.
    mTimerHandler.removeCallbacks(mTimerRunnable);
}

@Override
Public void onResume() {
...
    // Start ad UI update loop.
    mTimerHandler.post(mTimerRunnable);
}

広告カウンタとスキップ ボタン

次に、updateCustomUi() 関数を定義して、UI に広告情報を入力します。詳細は広告フォーマットによって異なりますが、広告がスキップ可能である場合は、通常、広告カウンタとスキップ ボタンまたはスキップ カウンタを含めます。次のように追加します。

MyActivity.java

private void updateCustomUi() {
    // Runs from the update loop to update the custom UI.
    Ad ad = mAdsManager.getCurrentAd();
    if (ad != null && ad.isUiDisabled()) {
        // Show the UI.
        Log.i(LOGTAG, "UI disabled, show custom UI!");
        AdPodInfo podInfo = ad.getAdPodInfo();
        VideoProgressUpdate update = mAdsManager.getAdProgress();
        SimpleDateFormat format = new SimpleDateFormat("mm:ss", Locale.US);

        // Handle ad counter.
        String adProgress = format.format(
                (update.getDuration() - update.getCurrentTime()) * 1000);
        String adUiString = String.format(
                Locale.US, "Ad %d of %d (%s)", podInfo.getAdPosition(),
                podInfo.getTotalAds(), adProgress);
        mAdCounterUi.setText(adUiString);

        // Handle skippable ads.
        if (ad.isSkippable()) {
            if (update.getCurrentTime() >= ad.getSkipTimeOffset()) {
                // Allow skipping.
                mSkipButton.setText(getString(R.string.skip_ad));
                mSkipButton.setEnabled(true);
            } else {
                String skipString = String.format(
                        Locale.US, "You can skip this ad in %d",
                        (int) (ad.getSkipTimeOffset() -
                                update.getCurrentTime()));
                mSkipButton.setText(skipString);
                mSkipButton.setEnabled(false);
            }
            mSkipButton.setVisibility(View.VISIBLE);
        } else {
            mSkipButton.setVisibility(View.INVISIBLE);
        }
        mCustomUi.setVisibility(View.VISIBLE);
        mCustomUi.bringToFront();
    } else {
        // Hide the UI.
        mCustomUi.setVisibility(View.INVISIBLE);
        mTimerHandler.removeCallbacks(mTimerRunnable);
    }
}

上のコードでは、広告があるかどうかを確認し、Ad.isUiDisabled() を呼び出してデフォルトの広告 UI が無効になっていることを確認した後、Ad.getAdPodInfo() と AdsManager.getAdProgress() を呼び出して、ポッド内の広告の位置と広告の進行状況を取得しています。スキップ可能な広告の場合は、広告をまだスキップできない場合はスキップ カウンタを表示し、スキップできる場合はスキップボタンを表示します。一般的な広告情報と関連する呼び出しの概要は次のとおりです。

情報	電話
連続配信広告内の現在の広告	Ad.getAdPodInfo().getAdPosition()
連続配信広告内の広告の合計	Ad.getPodInfo().getTotalAds()
広告をスキップできるかどうか	Ad.isSkippable()
広告をスキップできるまでの秒数	Ad.getSkipTimeOffset() - AdsManager.getAdProgress().getCurrentTime()
広告の残り秒数	(AdsManager.getAdProgress().getDuration() - AdsManager.getAdProgress().getCurrentTime()) * 1000

[広告をスキップ] ボタンをクリックすると広告がスキップされるように、[詳細] ボタンに加えて、次のように設定します。

MyActivity.java

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
...
mCustomUi = rootView.findViewById(R.id.customUi);
mAdCounterUi = (TextView) rootView.findViewById(R.id.adCounter);

// Set up the 'learn more' button handler for the custom UI.
mLearnMoreButton = (Button) rootView.findViewById(R.id.learnMoreButton);
mLearnMoreButton.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
        // Only works if the UI has been disabled.
        mAdsManager.clicked();
    }
});

// Set up the skip button handler for the custom UI.
mSkipButton = (Button) rootView.findViewById(R.id.skipButton);
mSkipButton.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
        mAdsManager.skip();
    }
});

AdsManager.clicked() を機能させるには、UI を無効にする必要があります。

トラブルシューティング

広告 UI の無効化が有効になっているサンプルタグはありますか？

このサンプルタグの URL をコピーして、IMA 実装に貼り付けることができます。

デフォルトの UI を無効にできません。

AdsRenderingSettings.setDisableUi() を呼び出して AdsManager に渡していることを確認します。Ad.isUiDisabled() が true を返すことを確認します。また、広告 UI を無効にするには、アド マネージャーでネットワークが有効になっている必要があります。有効になっている場合、VAST には次のような Extension が含まれます。

<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>

それでも問題が解決しない場合は、アカウント マネージャーに有効になっていることを確認してください。一部の広告タイプでは特定の UI が必要です。これらの広告は、<UiHideable> 値が 0 で返されます。このような場合は、トラフィック チームが変更を加えて、これらの広告タイプが配信されないようにする必要があります。