Android에서 네이티브 광고 템플릿 사용

이 가이드를 효과적으로 활용하려면 네이티브 광고 및 네이티브 배너 광고를 구현하는 것에 익숙해야 합니다.

1단계: 템플릿 구현

• 네이티브 광고
• 네이티브 배너 광고

2단계: 추가적인 맞춤화

• 네이티브 광고
• 네이티브 배너 광고

1단계: 템플릿 구현

Facebook 광고 SDK를 가져오려면 액티비티 클래스의 맨 위에 다음 코드를 추가합니다.

import com.facebook.ads.*;

네이티브 광고에 대한 구현

private NativeAd nativeAd;

public class NativeAdActivity extends Activity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    ...

    // Instantiate an NativeAd object. 
    // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
    // now, while you are testing and replace it later when you have signed up.
    // While you are using this temporary code you will only get test ads and if you release
    // your code like this to the Google Play your users will not receive ads (you will get a no fill error).
    nativeAd = new NativeAd(this, "YOUR_PLACEMENT_ID");
    NativeAdListener nativeAdListener = new NativeAdListener() {
        ...
    };
    
    // Initiate a request to load an ad.
    nativeAd.loadAd(
            nativeAd.buildLoadAdConfig()
                    .withAdListener(nativeAdListener)
                    .withMediaCacheFlag(NativeAdBase.MediaCacheFlag.ALL)
                    .build());
  }
}        

광고를 읽어들이자마자 표시하기를 원하는 경우 AdListener의 onAdLoaded() 메서드 내에서 맞춤 템플릿을 렌더링하고 컨테이너에 추가합니다.

private NativeAd nativeAd;
...
  NativeAdListener nativeAdListener = new NativeAdListener() {
    ...
    @Override
    public void onAdLoaded(Ad ad) {
      // Render the Native Ad Template
      View adView = NativeAdView.render(MainActivity.this, nativeAd);
      LinearLayout nativeAdContainer = (LinearLayout) findViewById(R.id.native_ad_container);
      // Add the Native Ad View to your ad container. 
      // The recommended dimensions for the ad container are:
      // Width: 280dp - 500dp
      // Height: 250dp - 500dp
      // The template, however, will adapt to the supplied dimensions.
      nativeAdContainer.addView(adView, new LayoutParams(MATCH_PARENT, 800));  
    }
   ...
  }

코드를 실행하면 다음을 확인할 수 있습니다.

네이티브 배너 광고에 대한 구현

private NativeBannerAd mNativeBannerAd;
...

  @Override
  public void onCreate(Bundle savedInstanceState) {
    ...

    // Instantiate an NativeBannerAd object. 
    // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
    // now, while you are testing and replace it later when you have signed up.
    // While you are using this temporary code you will only get test ads and if you release
    // your code like this to the Google Play your users will not receive ads (you will get a no fill error).
    mNativeBannerAd = new NativeBannerAd(this, "YOUR_PLACEMENT_ID");
    NativeAdListener nativeAdListener = new NativeAdListener() {
        ...
    };
    
    // Initiate a request to load an ad.
    mNativeBannerAd.loadAd(
            mNativeBannerAd.buildLoadAdConfig()
                    .withAdListener(nativeAdListener)
                    .build());
  }
}        

광고를 읽어들이자마자 표시하기를 원하는 경우 AdListener의 onAdLoaded() 메서드 내에서 맞춤 템플릿을 렌더링하고 컨테이너에 추가합니다.

@Override
public void onAdLoaded(Ad ad) {
  // Render the Native Banner Ad Template
  View adView = NativeBannerAdView.render(MainActivity.this, mNativeBannerAd, NativeBannerAdView.Type.HEIGHT_100);
  LinearLayout nativeBannerAdContainer = (LinearLayout) findViewById(R.id.native_banner_ad_container);
  // Add the Native Banner Ad View to your ad container
  nativeBannerAdContainer.addView(adView);  
}

코드를 실행하면 다음을 확인할 수 있습니다.

맞춤 네이티브 배너 광고 형식은 다음 3가지 템플릿으로 제공됩니다.

2단계: 추가적인 맞춤화

네이티브 맞춤 템플릿을 사용하면 다음 요소를 맞춤 설정할 수 있습니다.

• 높이
• 너비
• 배경 색상
• 제목 색상
• 제목 글꼴
• 설명 색상
• 설명 글꼴
• 버튼 색상
• 버튼 제목 색상
• 버튼 제목 글꼴
• 버튼 테두리 색상

특정 요소를 맞춤 설정하려면 앱의 레이아웃과 테마에 맞는 디자인을 사용하는 것이 좋습니다.

속성 개체를 빌드하고 읽어들인 네이티브 광고 또는 네이티브 배너 광고를 제공하여 다음 요소를 렌더링해야 합니다.

네이티브 광고의 예

NativeAdViewAttributes 개체를 빌드하고 NativeAdView.render()에서 이를 인수로 제공합니다.

@Override
public void onAdLoaded(Ad ad) {
  // Set the Native Ad attributes
  NativeAdViewAttributes viewAttributes = new NativeAdViewAttributes()
    .setBackgroundColor(Color.BLACK)
    .setTitleTextColor(Color.WHITE)
    .setDescriptionTextColor(Color.LTGRAY)
    .setButtonColor(Color.WHITE)
    .setButtonTextColor(Color.BLACK);
  
  View adView = NativeAdView.render(MainActivity.this, nativeAd, viewAttributes);

  LinearLayout nativeAdContainer = (LinearLayout) findViewById(R.id.native_ad_container);
  // Add the Native Ad View to your ad container
  nativeAdContainer.addView(adView, new LayoutParams(MATCH_PARENT, 800));
}

위의 코드는 다음과 같은 광고로 렌더링됩니다.

네이티브 배너 광고의 예

NativeAdViewAttributes 개체를 빌드하고 NativeBannerAdView.render()에서 이를 인수로 제공합니다.

@Override
public void onAdLoaded(Ad ad) {
  // Set the NativeAd attributes
  NativeAdViewAttributes viewAttributes = new NativeAdViewAttributes()
    .setBackgroundColor(Color.BLACK)
    .setTitleTextColor(Color.WHITE)
    .setDescriptionTextColor(Color.LTGRAY)
    .setButtonColor(Color.WHITE)
    .setButtonTextColor(Color.BLACK);   
  
  View adView = NativeBannerAdView.render(MainActivity.this, nativeAd, NativeBannerAdView.Type.HEIGHT_100, viewAttributes);

  LinearLayout nativeBannerAdContainer = (LinearLayout) findViewById(R.id.native_banner_ad_container);
  // Add the Native Banner Ad View to your ad container
  nativeBannerAdContainer.addView(adView);  
}

위의 코드는 다음과 같은 광고로 렌더링됩니다.