네이티브 광고

1 : 준비

프로젝트 설정을 통해 광고 연동을 위한 준비를 합니다.

2 : 이미지 모듈 설정

SDK에서는 이미지 모듈로 Glide가 포함되어 있다면 사용하도록 되어있습니다.
GIF 이미지 처리가 가능하고, 메모리 사용에 효율적인 Glide 사용을 권장합니다.
이미지를 직접 핸들링하고자 한다면 해당 Step은 건너뛰고, 페이지 하단의 이미지 직접 핸들링을 확인합니다.
Glide 의 경우 v4.4 이상 지원하고 v4.4 미만의 버전은 지원을 중단하여 캐싱되지 않은 상태로 로딩합니다.
build.gradle 파일에 아래와 같이 추가를 합니다.

dependencies {
    // Glide 사용시
    compile 'com.github.bumptech.glide:glide:4.+'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.+'
}

3 : 레이아웃 관련 설정

1. 광고요소 선택

네이티브 광고의 요소 (① 아이콘 ② 제목 ③ 설명 ④ 메인 ⑤ 액션버튼) 중 사용할 요소를 미리 결정합니다.
단, ① 아이콘 ② 제목 ③ 설명 ④ 메인 중 최소 하나는 필수적으로 들어가야 하며, 선택한 요소에 따라 광고 물량에 차이가 발생합니다.
⑤ 액션버튼 이 없을 때보다 있을 때 CTR이 높게 나오기에 가능한 넣는 것을 추천합니다.
⑥ 옵트아웃 은 자동으로 우측 상단에 붙이고 있기에 텍스트 영역과 겹치지 않도록 고려해야 합니다. (옵트아웃 이미지 크기 : 14dp, 상단 및 우측 여백 : 5dp)
⑥ 옵트아웃 의 위치와 크기를 바꾸려면 XML과 NativeAdViewBinder 에 넣어주어야 하며 크기는 정사이즈로 만듭니다.

대시보드를 통해 슬롯을 생성하는 과정에서 슬롯유형에 네이티브(Native)를 선택하고, 네이티브 유형을 체크를 합니다.
네이티브 유형은 앞서 선택한 필수 요소 (① 아이콘 ② 제목 ③ 설명 ④ 메인)에 해당됩니다.

체크한 유형은 XML과 NativeAdViewBinder 에 필수로 들어가야 광고를 성공적으로 받아볼 수 있습니다.

2. XML 정의

아래의 예시는 광고의 요소(아이콘, 제목, 설명, 메인)이 놓여질 형태를 나타낸 것으로, 광고를 보여줄 layout 파일을 생성하여 정의를 합니다.
네이티브 광고 템플릿 파일인 res/layout/adpie_native_ad_template.xml를 참고하여 원하는 형태로 레이아웃을 구성합니다.

<RelativeLayout ...>

    <!-- 옵트아웃 (Opt-out) -->
    <ImageView
            android:id="@+id/native_optout" ... />

    <!-- 아이콘 (Icon) -->
    <ImageView
            android:id="@+id/native_ad_icon" ... />

    <!-- 제목 (Title) -->
    <TextView
            android:id="@+id/native_ad_title" ... />

    <!-- 설명 (Description) -->
    <TextView
        android:id="@+id/native_ad_description" ... />

    <!-- 메인 이미지 (Main) -->
    <com.gomfactory.adpie.sdk.nativeads.MainAdView
        android:id="@+id/native_ad_main" ... />

    <!-- 액션버튼 (Call-To-Action) -->
    <Button
        android:id="@+id/native_ad_cta" ... />

</RelativeLayout>

3. NativeAdViewBinder 생성

NativeAdViewBinder 객체를 생성하고, xml에 정의한 Layout ID와 광고 요소별 id(icon, title, description, main)를 설정합니다.

NativeAdViewBinder viewBinder = new NativeAdViewBinder.Builder(R.layout.adpie_native_ad) // Layout ID
    .setIconImageId(R.id.native_ad_icon) // Icon ID
    .setTitleId(R.id.native_ad_title) // Title ID
    .setDescriptionId(R.id.native_ad_description) // Description ID
    .setMainId(R.id.native_ad_main) // Main ID
    .setCallToActionId(R.id.native_ad_cta) // Call-To-Action ID
    .setOptOutId(R.id.native_optout) // Opt-out ID
    .build();

4 : 광고 요청과 표출

SDK 초기화를 하지 않았다면, 사이트에서 발급받은 Media ID를 입력하여 초기화를 호출합니다.
사이트에서 발급받은 Slot ID와 앞서 생성한 NativeAdViewBinder 객체를 인자값으로 넣어 NativeAd 객체를 생성합니다.

private NativeAd nativeAd;

@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        // SDK 초기화로 앱실행 1회만 호출합니다. (Main Activity 에 필수로 입력)
        AdPieSDK.getInstance().initialize(getApplicationContext(), "AdPie-Media-ID");
        
        ...
        
        NativeAdViewBinder viewBinder = new NativeAdViewBinder.Builder(R.layout.adpie_native_ad) // Layout ID
                .setIconImageId(R.id.native_ad_icon) // Icon ID
                .setTitleId(R.id.native_ad_title) // Title ID
                .setDescriptionId(R.id.native_ad_description) // Description ID
                .setMainId(R.id.native_ad_main) // Main ID
                .setCallToActionId(R.id.native_ad_cta) // Call-To-Action ID
                .setOptOutId(R.id.native_optout) // Opt-out I
                .build();
        
        // 광고 연동을 위한 슬롯 ID를 필수로 입력
        nativeAd = new NativeAd(this, "AdPie-Slot-ID", viewBinder);
        // 광고 호출
        nativeAd.loadAd();
}

5 : 광고 리스너 사용

광고 요청에 대한 이벤트를 수신할 수 있습니다.
광고 성공 또는 실패 이벤트를 전혀 못받는 경우 페이지 하단의 이미지 직접 핸들링을 확인하여 적용합니다.
에러코드를 통해 광고 실패에 대한 이유를 알 수 있습니다.

nativeAd.setAdListener(new com.gomfactory.adpie.sdk.NativeAd.AdListener() {
        @Override
        public void onAdLoaded(final NativeAdView nativeAdView) {
            // 광고 로딩 완료 후 이벤트 발생
            // 광고 요청 후 즉시 노출하고자 할 경우 아래의 코드를 추가합니다.

            ViewGroup adContainer = (ViewGroup)findViewById(R.id.ad_container);
            adContainer.removeAllViews();
            adContainer.addView(nativeAdView);
        }

        @Override
        public void onAdFailedToLoad(int errorCode) {
            // 광고 요청 또는 표출 실패 후 이벤트 발생
            // error message -> AdPieError.getMessage(errorCode)
        }

        @Override
        public void onAdShown() {
            // 광고 표출 후 이벤트 발생
        }

        @Override
        public void onAdClicked() {
            // 광고 클릭 후 이벤트 발생
        }
    });

6 : 이미지 직접 핸들링

SDK를 통해 이미지 다운로드를 바로 진행하는 것은 기본 설정입니다.
만약 직접 핸들링하고자 한다면, Step 4에서 NativeAd 객체 생성 후 setSkipDownload(true) 를 호출합니다.
setSkipDownload(true) 호출시 이미지 모듈의 우선순위는 무시되고, 이미지 다운로드를 건너뜁니다.
광고 리스너를 통해 onAdLoaded() 받으면, 이미지를 직접 호출 및 설정해야 합니다.

// 광고 연동을 위한 슬롯 ID를 필수로 입력합니다.
nativeAd = new NativeAd(this, "AdPie-Slot-ID", viewBinder);

// SDK에서 리소스 다운로드를 하지 않기 위한 설정
nativeAd.setSkipDownload(true);
// 광고 리스너 사용
nativeAd.setAdListener(new com.gomfactory.adpie.sdk.NativeAd.AdListener() {
        @Override
        public void onAdLoaded(final NativeAdView nativeAdView) {

            // 이미지 다운로드 및 설정이 필요
            NativeAdData nativeAdData = nativeAdView.getNativeAdData();
            String iconImageUrl = nativeAdData.getIconImageUrl();
            ImageView iconImageView = nativeAdView.getIconImageView();
            String mainImageUrl = nativeAdData.getMainImageUrl();
            ImageView mainImageView = nativeAdView.getMainImageView();
        }
    });
// 광고 호출
nativeAd.loadAd();

Previous전면 광고 Next리워드 비디오 광고

Last updated 1 month ago