NativeAd 표시
네이티브 광고가 로드되면 Google 모바일 광고 SDK가 표시됩니다. 그런 다음 앱은 광고를 표시해야 합니다. 하지만 반드시 즉시 수행해야 하는 것은 아닙니다. 디스플레이 광고를 보다 쉽게 구현할 수 있도록 SDK는 몇 가지 유용한 리소스를 제공합니다. 참조하세요.
NativeAdView
클래스
NativeAd
형식의 경우 이에 해당하는
NativeAdView
클래스에 대해 자세히 알아보세요. 이 클래스는
ViewGroup
드림
게시자가 NativeAd
의 루트로 사용해야 합니다. 가
단일 NativeAdView
는 단일 네이티브 광고에 해당합니다.
해당 광고의 애셋 (ImageView
스크린샷 애셋)은 NativeAdView
의 하위 요소여야 합니다.
객체를 지정합니다.
네이티브 광고의 보기 계층 구조는
LinearLayout
드림
애셋 보기를 표시하는 방법은 다음과 같습니다.
<com.google.android.gms.ads.nativead.NativeAdView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
... >
<LinearLayout
android:orientation="horizontal"
... >
<ImageView
android:id="@+id/ad_app_icon"
... />
<TextView
android:id="@+id/ad_headline"
... />
</LinearLayout>
// Other assets such as image or media view, call to action, etc follow.
...
</LinearLayout>
</com.google.android.gms.ads.nativead.NativeAdView>
다음은 NativeAdView
를 만들고
NativeAd
로 채웁니다.
자바
AdLoader.Builder builder = new AdLoader.Builder(this, "AD_UNIT_ID")
.forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
@Override
public void onNativeAdLoaded(NativeAd nativeAd) {
// Assumes you have a placeholder FrameLayout in your View layout
// (with id fl_adplaceholder) where the ad is to be placed.
FrameLayout frameLayout =
findViewById(R.id.fl_adplaceholder);
// Assumes that your ad layout is in a file call native_ad_layout.xml
// in the res/layout folder
NativeAdView adView = (NativeAdView) getLayoutInflater()
.inflate(R.layout.native_ad_layout, null);
// This method sets the text, images and the native ad, etc into the ad
// view.
populateNativeAdView(nativeAd, adView);
frameLayout.removeAllViews();
frameLayout.addView(adView);
}
});
Kotlin
val builder = AdLoader.Builder(this, "AD_UNIT_ID")
.forNativeAd { nativeAd ->
// Assumes that your ad layout is in a file call native_ad_layout.xml
// in the res/layout folder
val adView = layoutInflater
.inflate(R.layout.native_ad_layout, null) as NativeAdView
// This method sets the text, images and the native ad, etc into the ad
// view.
populateNativeAdView(nativeAd, adView)
// Assumes you have a placeholder FrameLayout in your View layout
// (with id ad_frame) where the ad is to be placed.
ad_frame.removeAllViews()
ad_frame.addView(adView)
}
특정 네이티브 광고의 모든 애셋은
NativeAdView
레이아웃 Google 모바일 광고 SDK는
네이티브 애셋이 네이티브 광고 보기 레이아웃 외부에서 렌더링됩니다.
광고 보기 클래스는 또한 광고 조회에 사용되는 보기를 등록하는 데 사용되는 메서드를 제공합니다.
각 개별 애셋 및 NativeAd
객체 자체를 등록하기 위한 하나.
이 방식으로 뷰를 등록하면 SDK가 자동으로 작업을 처리할 수 있습니다.
예:
- 클릭수 기록
- 첫 번째 픽셀이 화면에 표시될 때의 노출수 기록
- AdChoices 오버레이 표시 (네이티브 백업 광고용) 광고 소재 - 현재 일부 게시자에 한해 광고 게재
AdChoices 오버레이
백업 광고가 게재될 때 SDK가 AdChoices 오버레이를 광고 보기로 추가합니다. 반환합니다. 앱에서 네이티브 광고 백업 광고를 사용하는 경우 원하는 모서리 AdChoices 로고가 자동으로 삽입되도록 할 수 있습니다. 또한 AdChoices 오버레이가 잘 보일 수 있도록 배경을 선택하세요. 적절하게 조정하는 것입니다. 오버레이의 자세한 내용은 프로그래매틱 네이티브 광고 구현 가이드라인을 참고하세요.
프로그래매틱 네이티브 광고의 광고 표시
프로그래매틱 네이티브 광고를 표시할 때 조회가 광고임을 나타냅니다. YouTube 정책에서 자세히 알아보기 가이드라인을 참고하세요.
코드 예
네이티브 광고를 표시하는 단계는 다음과 같습니다.
NativeAdView
클래스의 인스턴스를 만듭니다.- 표시될 광고 애셋마다 다음을 수행합니다.
<ph type="x-smartling-placeholder">
- </ph>
- 광고 객체의 애셋으로 애셋 보기를 채웁니다.
ViewGroup
클래스와 함께 애셋 뷰를 등록합니다.
-
MediaView
드림 (네이티브 광고 레이아웃에 대용량 미디어 애셋이 포함된 경우) ViewGroup
클래스와 함께 광고 객체를 등록합니다.
다음은 NativeAd
를 표시하는 함수의 예입니다.
자바
private void displayNativeAd(ViewGroup parent, NativeAd ad) {
// Inflate a layout and add it to the parent ViewGroup.
LayoutInflater inflater = (LayoutInflater) parent.getContext()
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
NativeAdView adView = (NativeAdView) inflater
.inflate(R.layout.ad_layout_file, parent);
// Locate the view that will hold the headline, set its text, and call the
// NativeAdView's setHeadlineView method to register it.
TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
headlineView.setText(ad.getHeadline());
adView.setHeadlineView(headlineView);
...
// Repeat the above process for the other assets in the NativeAd
// using additional view objects (Buttons, ImageViews, etc).
...
// If the app is using a MediaView, it should be
// instantiated and passed to setMediaView. This view is a little different
// in that the asset is populated automatically, so there's one less step.
MediaView mediaView = (MediaView) adView.findViewById(R.id.ad_media);
adView.setMediaView(mediaView);
// Call the NativeAdView's setNativeAd method to register the
// NativeAdObject.
adView.setNativeAd(ad);
// Ensure that the parent view doesn't already contain an ad view.
parent.removeAllViews();
// Place the AdView into the parent.
parent.addView(adView);
}
Kotlin
fun displayNativeAd(parent: ViewGroup, ad: NativeAd) {
// Inflate a layout and add it to the parent ViewGroup.
val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
as LayoutInflater
val adView = inflater.inflate(R.layout.ad_layout_file, parent) as NativeAdView
// Locate the view that will hold the headline, set its text, and use the
// NativeAdView's headlineView property to register it.
val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
headlineView.text = ad.headline
adView.headlineView = headlineView
...
// Repeat the above process for the other assets in the NativeAd using
// additional view objects (Buttons, ImageViews, etc).
...
val mediaView = adView.findViewById<MediaView>(R.id.ad_media)
adView.mediaView = mediaView
// Call the NativeAdView's setNativeAd method to register the
// NativeAdObject.
adView.setNativeAd(ad)
// Ensure that the parent view doesn't already contain an ad view.
parent.removeAllViews()
// Place the AdView into the parent.
parent.addView(adView)
}
개별 작업은 다음과 같습니다.
레이아웃 확장
자바
LayoutInflater inflater = (LayoutInflater) parent.getContext() .getSystemService(Context.LAYOUT_INFLATER_SERVICE); NativeAdView adView = (NativeAdView) inflater .inflate(R.layout.ad_layout_file, parent);
Kotlin
val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater val adView = inflater.inflate(R.layout.ad_layout_file, parent) as NativeAdView
이 코드는 네이티브 광고 표시를 위한 뷰가 포함된 XML 레이아웃을 확장하고 있습니다. 광고를 클릭한 후
NativeAdView
참조를 찾는 방법을 보여줍니다. 참고: 프래그먼트나 활동에 기존NativeAdView
가 있다면 이를 재사용합니다. 레이아웃 파일을 사용하지 않고도 인스턴스를 동적으로 생성할 수도 있습니다.애셋 뷰 채우기 및 등록
이 샘플 코드는 헤드라인을 표시하는 데 사용되는 뷰를 찾고 텍스트를 설정합니다. 를 호출하고 문자열 애셋을 사용하여
NativeAdView
객체:자바
TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline); headlineView.setText(ad.getHeadline()); adView.setHeadlineView(headlineView);
Kotlin
val headlineView = adView.findViewById<TextView>(R.id.ad_headline) headlineView.text = ad.headline adView.headlineView = headlineView
이 과정은 뷰를 찾아 값을 설정하고 광고 보기 클래스가 제공한 각 애셋에 대해 앱에서 표시할 네이티브 광고 객체입니다.
클릭 처리
네이티브 광고 보기를 선택합니다. 클릭 이벤트를 직접 관찰하려면 리스너를 호출하면 됩니다.
광고 조회 애셋의 클릭은 애셋 보기를 채우고 등록합니다.
다음은 리스너를 호출하여 클릭 이벤트:
자바
AdLoader adLoader = new AdLoader.Builder(context, "/21775744923/example/native") ... .withAdListener(new AdListener() { @Override public void onAdFailedToLoad(LoadAdError adError) { // Handle the failure by logging, altering the UI, and so on. } @Override public void onAdClicked() { // Log the click event or other custom behavior. } }) .build();
Kotlin
val adLoader = AdLoader.Builder(this, "/21775744923/example/native") ... .withAdListener(object : AdListener() { override fun onAdFailedToLoad(adError: LoadAdError) { // Handle the failure by logging, altering the UI, and so on. } }) .build()
MediaView 등록
이를 사용하려면
MediaView
드림 저작물이 아닌ImageView
네이티브 광고의 레이아웃에 기본 이미지 애셋을 포함하려는 경우 있습니다.MediaView
는 기본 미디어 애셋을 표시하도록 설계된 특수View
입니다. 동영상 또는 이미지 또는 이미지일 수 있습니다MediaView
는 XML 레이아웃에서 정의하거나 동적으로 생성할 수 있습니다. 그것은 다른 항목과 마찬가지로NativeAdView
의 뷰 계층 구조 내에 배치되어야 합니다. 기타 애셋 보기를 선택합니다.MediaView
를 사용하는 앱은NativeAdView
:자바
MediaView mediaView = adView.findViewById(R.id.ad_media); adView.setMediaView(mediaView);
Kotlin
adView.mediaView = adView.findViewById<MediaView>(R.id.ad_media)
모든 애셋 보기와 마찬가지로 미디어 보기에는 콘텐츠를 채워야 합니다. 이 작업은
getMediaContent()
드림 메서드를 사용하여 광고 서버에 전달될 수 있는 미디어 콘텐츠를MediaView
다음은 미디어의 미디어 콘텐츠를 설정하는 코드 스니펫입니다. 보기:자바
mediaView.setMediaContent(nativeAd.getMediaContent());
Kotlin
mediaView.mediaContent = nativeAd.mediaContent
ImageScaleType
MediaView
클래스는 표시할 때ImageScaleType
속성이 있습니다. 이미지MediaView
에서 이미지가 조정되는 방식을 변경하려면setImageScaleType()
를 사용하여 상응하는ImageView.ScaleType
MediaView
메서드에 전달합니다.자바
mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
Kotlin
mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
MediaContent
MediaContent
클래스에는MediaView
클래스를 사용하여 표시되는 네이티브 광고입니다. 이MediaView
mediaContent
속성은MediaContent
인스턴스로 설정됩니다.사용할 수 있는 동영상 애셋은 버퍼링 후
MediaView
다음을 확인하여 동영상 애셋을 사용할 수 있는지 알 수 있습니다.hasVideoContent()
광고에 동영상 애셋이 없으면
mainImage
애셋이 다운로드됩니다. 대신MediaView
내에 배치되었습니다.
기본적으로
mainImage
는 처음 다운로드한 이미지 애셋입니다. 만약setReturnUrlsForImageAssets(true)
가 사용 중이며mainImage
는null
이며 다음을 실행해야 합니다.mainImage
속성을 직접 다운로드한 이미지로 설정합니다. 이 사용할 수 있는 동영상 애셋이 없는 경우에만 이미지가 사용됩니다.네이티브 광고 객체 등록
이 마지막 단계에서는 다음과 같은 보기와 함께 네이티브 광고 객체를 등록합니다. 다음을 표시해야 합니다.
자바
adView.setNativeAd(ad);
Kotlin
adView.setNativeAd(ad)
광고 제거
네이티브 광고 게재가 끝나면 광고가 다시 게재될 수 있도록 적절하게 가비지 컬렉션됩니다.
자바
nativeAd.destroy();
Kotlin
nativeAd.destroy()
네이티브 광고 코드 테스트
직접 판매 광고
직접 판매된 네이티브 광고가 어떤 광고인지 테스트하고 싶다면 이 Ad Manager 광고 단위 ID를 사용하는 방법은 다음과 같습니다
/21775744923/example/native
이 URL은 샘플 앱 설치 및 콘텐츠 광고와 함께 맞춤 네이티브 광고 형식을 사용합니다.
- 광고 제목 (텍스트)
- 기본 이미지 (이미지)
- 캡션 (텍스트)
맞춤 네이티브 광고 형식의 템플릿 ID는 10063170
입니다.
네이티브 백업 광고
현재 Ad Exchange 백업 광고는 일부 게시자로 제한됩니다. 받는사람 네이티브 백업 광고의 동작을 테스트하려면 다음 Ad Manager 광고 단위를 사용하세요.
/21775744923/example/native-backfill
이 광고 단위에서는 AdChoices가 포함된 샘플 앱 설치 및 콘텐츠 광고를 게재합니다. 오버레이됩니다.
실제 광고 단위 및 템플릿 ID를 참조하도록 코드를 업데이트해야 합니다. 라이브로 진행할 수 있습니다
GitHub의 예
네이티브 광고 구현의 전체 예시:
다음 단계
다음 주제를 살펴보세요.