이 가이드에서는 Android용 IMA SDK를 사용하여 자체 맞춤 UI를 구현하는 방법을 보여줍니다. 이렇게 하려면 기본 UI를 사용 중지하고 새 맞춤 UI를 설정한 다음 SDK에서 가져온 광고 정보로 새 UI를 채워야 합니다.
광고 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를 사용 중지하려면 Ad Manager에서 네트워크가 사용 설정되어 있어야 합니다. 사용 설정된 경우 VAST에 다음과 같은Extension가 포함됩니다.<Extension type="uiSettings"> <UiHideable>1</UiHideable> </Extension>
<UiHideable>값이 0으로 반환됩니다. 이 경우 트래피킹팀에서 이러한 광고 유형이 게재되지 않도록 변경해야 합니다.