Android용 IMA SDK를 사용한 맞춤 UI

이 가이드에서는 Android용 IMA SDK를 사용하여 자체 맞춤 UI를 구현하는 방법을 보여줍니다. 이렇게 하려면 기본 UI를 사용 중지하고 새 맞춤 UI를 설정한 다음 SDK에서 가져온 광고 정보로 새 UI를 채워야 합니다.

광고 UI 사용 중지

맞춤 UI를 표시하려면 먼저 기본 광고 UI를 사용 중지해야 합니다. 이렇게 하려면 AdsRenderingSettings.setDisableUi()를 호출한 다음 AdsRenderingSettingsAdsManager.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를 사용 중지하려면 Ad Manager에서 네트워크가 사용 설정되어 있어야 합니다. 사용 설정된 경우 VAST에 다음과 같은 Extension가 포함됩니다.
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
그래도 문제가 해결되지 않으면 계정 관리자에게 문의하여 사용 설정되어 있는지 확인하세요. 일부 광고 유형에는 특정 UI가 필요합니다. 이러한 광고는 <UiHideable> 값이 0으로 반환됩니다. 이 경우 트래피킹팀에서 이러한 광고 유형이 게재되지 않도록 변경해야 합니다.