1) Android
Native 광고 적용을 위해서는 Tnk 사이트에서 앱 등록 및 Android 프로젝트 상의 SDK 관련 설정이 우선 선행되어야합니다.
[Android Settings] 의 내용을 우선 확인해주세요.
[Native Ad Loading]
아래와 같이 호출하여 Landscape 형태의 소재이미지를 사용하는 Native Ad를 로딩할 수 있습니다.
NativeAdItem
NativeAdItem adItem = new NativeAdItem(this, NativeAdItem.STYLE_LANDSCAPE_1200, new NativeAdListener() {
@Override
public void onFailure(int errCode) {
}
@Override
public void onLoad(NativeAdItem adItem) {
// Native Ad rendering
}
@Override
public void onClick() {
}
@Override
public void onShow() {
}
});
adItem.prepareAd();
또는 TnkSession 클래스에서 제공하는 static 메소드를 사용하실 수도 있습니다. 아래의 코드는 위의 코드와 완전히 동일하게 동작합니다.
TnkSession.prepareNativeAd
TnkSession.prepareNativeAd(this, TnkSession.CPC, NativeAdItem.STYLE_LANDSCAPE_1200, new NativeAdListener() {
@Override
public void onFailure(int errCode) {
}
@Override
public void onLoad(NativeAdItem adItem) {
// Native Ad rendering
}
@Override
public void onClick() {
}
@Override
public void onShow() {
}
});
[NativeAd 표시하기]
Native Ad 데이터가 로딩되면 NativeAdListener.onLoad() 메소드가 호출되며 이때 NativeAdItem 객체가 파라메터로 전달됩니다.
전달된 NativeAdItem 객체가 제공하는 데이터를 사용하여 Native Ad를 화면에 표시합니다.
Rendering Native Ad
ViewGroup adContainer = (ViewGroup)findViewById(R.id.native_ad_container);
adContainer.removeAllViews();
// ad layout
LayoutInflater inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
RelativeLayout adItemView = (RelativeLayout)inflater.inflate(R.layout.native_ad_item, null);
// UI rendering
ImageView adIcon = (ImageView)adItemView.findViewById(R.id.ad_icon);
adIcon.setImageBitmap(adItem.getIconImage());
TextView titleView = (TextView)adItemView.findViewById(R.id.ad_title);
titleView.setText(adItem.getTitle());
TextView descView = (TextView)adItemView.findViewById(R.id.ad_desc);
descView.setText(adItem.getDescription());
ImageView adImage = (ImageView)adItemView.findViewById(R.id.ad_image);
adImage.setImageBitmap(adItem.getCoverImage());
RelativeLayout watermarkContainer = adItemView.findViewById(R.id.watermark_container);
ImageView watermark = adItem.getWatermark();
watermarkContainer.addView(watermark);
adContainer.addView(adItemView);
// attach ad layout to ad item
adItem.attachLayout(adItemView);
광고가 화면에 노출될 때의 Impression 처리와 사용자가 광고를 클릭하였을때의 Click 처리는 SDK에서 자동으로 처리됩니다. 이를 위해서는 Native Ad를 담고 있는 Layout 객체를 NativeAdItem.attachLayout(ViewGroup viewGroup) 메소드를 사용하여 지정해야합니다. 지정한 viewGroup 객체에 대해서 impression 처리와 click 처리가 이루어 집니다. 만약 click 처리를 위하여 별도의 View를 지정하려면 attachLayout(ViewGroup viewGroup, View clickView) 메소드를 사용합니다.
해당 Layout에서 광고가 더 이상 필요하지 않는 경우에는 detachLayout()을 호출해야 합니다.
[NativeAdItem API]
1) NativeAdItem 생성
Constructor
- NativeAdItem(Context context, int adStyle, NativeAdListener nativeListener)
Description
NativeAd 를 가져오기 위한 NativeAdItem 객체를 생성합니다.
Parameters
2) Native Ad Loading
prepareAd()
생성된 NativeAdItem의 prepareAd() 를 호출하여 하나의 Native Ad 광고를 Loading 할 수 있습니다. 기본적으로 비보상 광고를 로딩하지만 displayLogic 파라메터를 지정하면 서버에서 해당 파라메터 값으로 설정된 내용에 따라서 보상형광고, 비보상광고, 크로스 광고, 인하우스 광고 등을 원하는 대로 가져올 수 있습니다.
- void prepareAd()
하나의 비보상 Native Ad를 서버에 요청합니다.
- void prepareAd(String displayLogic)
displayLogic 으로 설정된 Native Ad를 서버에 요청합니다. Display Logic 에 대한 자세한 내용은 5) Display Logic 을 참고하세요.
TnkSession.prepareNativeAd()
TnkSession 클래스에서 제공하는 메소드입니다. 지정된 파라메터를 사용하여 NativeAdItem 객체를 생성하고 생성된 객체의 prepareAd() 메소드를 호출합니다. 생성된 NativeAdItem 객체를 반환합니다.
- NativeAdItem TnkSession.prepareNativeAd(Context context, String displayLogic, int adStyle, NativeAdListener nativeListener)
Parameters
3) Ad Style
표현하고자하는 광고 형태에 맞추어 AdStyle을 지정합니다.
- Cover Image
NativeAdItem.STYLE_TEXT_ONLY : Cover Image를 사용하지 않는 경우 지정합니다.
NativeAdItem.STYLE_PORTRAIT : 세로 방향의 Cover Image를 사용하는 경우 지정합니다.
NativeAdItem.STYLE_LANDSCAPE : 가로 방향의 Cover Image를 사용하는 경우 지정합니다.
NativeAdItem.STYLE_LANDSCAPE_1200 : 가로 방향의 1200x627 Cover Image를 사용하는 경우 지정합니다.
NativeAdItem.STYLE_SQUARE : 정방형의 Cover Image를 사용하는 경우 지정합니다.
NativeAdItem.STYLE_BANNER_LANDSCAPE : 가로 방향의 배너 720x100 Cover Image를 사용하는 경우 지정합니다.
NativeAdItem.STYLE_BANNER_LANDSCAPE_200: 가로 방향의 배너 720x200 Cover Image를 사용하는 경우 지정합니다.
- Ad Icon
NativeAdItem.STYLE_ICON : Icon 이미지를 필요로 할 때 지정합니다.
Cover Image와 Ad Icon 설정은 OR 연산을 사용하여 동시에 지정할 수 있습니다.
적용 예시
Ad Style 적용 예시
// 가로방향의 Cover Image와 Icon Image를 사용
TnkSession.prepareNativeAd(this, TnkSession.CPC, NativeAdItem.STYLE_LANDSCAPE_1200 | NativeAdItem.STYLE_ICON, new NativeAdListener() { ...
// 세로방향의 Cover Image를 사용 (Icon Image는 사용하지 않음)
TnkSession.prepareNativeAd(this, TnkSession.CPC, NativeAdItem.STYLE_PORTRAIT, new NativeAdListener() { ...
// Cover Image 사용하지 않고 Icon Image 만 사용함
TnkSession.prepareNativeAd(this, TnkSession.CPC, NativeAdItem.STYLE_ICON, new NativeAdListener() { ...
// Cover Image와 Icon Image 모두 사용하지 않고 Text 문구만 사용함
TnkSession.prepareNativeAd(this, TnkSession.CPC, NativeAdItem.STYLE_TEXT_ONLY, new NativeAdListener() { ...
4) Native Ad 항목 가져오기
NativeAdItem의 loading이 완료되면 아래의 메소드들을 사용하여 광고 표시를 위한 항목들에 접근할 수 있습니다.
String getTitle() : 광고 타이틀을 반환합니다.
String getDescription() : 광고 설명 문구를 반환합니다.
Bitmap getIconImage() : 광고 Icon 이미지를 반환합니다. Ad Style 파라메터로 NativeAdItem.STYLE_ICON 이 지정되지 않은 경우에는 null 이 반환됩니다.
Bitmap getCoverImage() : 광고 cover 이미지를 반환합니다. Ad Style 파라메터로 NativeAdItem.STYLE_PORTRAIT 나 NativeAdItem.STYLE_LANDSCAPE를 지정하지 않았다면 null 이 반환됩니다.
보상형 광고의 경우에는 아래의 항목들을 추가적으로 제공합니다.
int getRewardPoint() : 사용자가 광고에 참여하여 받을 수 있는 포인트를 반환합니다.
String getPointUnit() : 포인트의 명칭을 반환합니다. (예 : 크리스탈, 루비, 골드 등)
int getRewardType() : 리워드 지급 방식을 반환합니다. (1: 실횅형, 2: 액션형)
String getActionText() : 리워드 지급 방식이 액션형인 경우 사용자가 수행해야할 액션에 대한 설명을 반환합니다.
5) Attach & Detach Layout
광고의 내용이 화면에 표시되면 화면의 광고 영역을 NativeAdItem 객체에 attach 해주어야 합니다. 이를 위해서 attachLayout() 메소드를 호출합니다. 이후에는 광고의 노출에 대한 Impression 처리와 사용자가 광고를 클릭했을 경우 페이지 이동에 대한 처리가 자동적으로 이루어 집니다.
- void attachLayout(ViewGroup viewGroup)
광고가 표현된 영역을 지정하고 해당 영역 전체에 대해서 click 처리를 합니다.
- void attachLayout(ViewGroup viewGroup, View clickView)
광고가 표현된 영역을 지정하고 clickView로 지정된 view에 대해서만 click 처리를 합니다.
- void detachLayout()
광고 영역에 다른 광고를 보여줄 경우에는 우선 기존에 attach되어 있는 NativeAdItem의 detachLayout() 메소드를 호출하여야 합니다. 이 경우 detach된 NativeAdItem은 상태가 초기화가 되며 다시 사용하기 위해서는 prepareAd()를 호출하여 다시 광고를 loading 해야합니다.
NativeAdItem의 lifecycle은 아래와 같습니다.
Instantiated -> prepareAd -> attachLayout -> detachLayout
^ |
+---------------------------+
[NativeAdListener]
Native Ad의 로딩이 완료되거나 화면에 노출되는 경우 또는 사용자가 광고를 클릭하는 경우 해당 이벤트 발생시점에 필요한 로직을 구현하기 위해서
아래의 NativeAdListener 인터페이스를 이용할 수 있습니다.
NativeAdListener Interface
public interface NativeAdListener {
public static final int FAIL_NO_AD = -1; // no ad available
public static final int FAIL_NO_IMAGE = -2; // ad image not available
public static final int FAIL_SYSTEM = -9;
/**
* 사용자가 광고를 클릭하면 호출됩니다.
* @param type
*/
public void onClick();
/**
* 광고가 화면에 노출되면 1회에 한하여 호출됩니다. Cover Image를 표시하지 않는 광고의 경우에는 호출되지 않습니다.
*/
public void onShow();
/**
* 광고를 서버에서 받아오지 못할 경우에 호출됩니다.
* 시스템 오류나 광고가 없어서 광고를 띄우지 못했을 경우 등에 호출되면 오류 코드가 파라메터로 전달됩니다.
*/
public void onFailure(int errCode);
/**
* NativeAdItem 의 prepareAd() 호출 후에 광고 로딩이 완료되면 호출됩니다. 관련된 NativeAdItem 객체를 파라메터로 전달합니다.
*/
public void onLoad(NativeAdItem adItem);
}