네이티브 광고

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();