네이티브 템플릿

네이티브 템플릿 다운로드

네이티브 광고를 사용하면 광고를 맞춤설정하여 더 나은 사용자 환경을 제공할 수 있고, 사용자 환경을 개선하면 사용자 참여가 늘어나 전반적인 수익을 개선할 수 있습니다.

네이티브 광고를 최대한 활용하려면 광고의 레이아웃을 앱의 다른 부분과 유사하게 만드는 것이 중요합니다. Google에서는 게시자가 네이티브 광고를 쉽게 시작할 수 있도록 돕기 위해 네이티브 템플릿을 만들었습니다.

네이티브 템플릿은 네이티브 광고용 코드 완성형 보기로, 빠르게 구현하고 손쉽게 수정할 수 있도록 고안되었습니다. 네이티브 템플릿을 사용하면 처음 만드는 네이티브 광고도 몇 분 만에 구현할 수 있고, 많은 코드 없이도 디자인과 스타일을 빠르게 맞춤설정할 수 있습니다. 이 템플릿은 뉴스 피드에 사용되는 리사이클러 뷰, 대화상자 또는 앱의 다른 부분 등 원하는 위치 어디든 배치할 수 있습니다.

네이티브 템플릿은 Android 스튜디오 모듈로 제공되므로 프로젝트에 쉽게 추가하여 자유롭게 사용할 수 있습니다.

템플릿 크기

템플릿은 작은 크기와 중간 크기의 두 가지 규격으로 제공됩니다. 두 가지 템플릿 모두 TemplateView 클래스를 사용하고 가로 세로 비율이 고정되어 있으며, 상위 보기의 너비를 채우도록 확장됩니다.

작은 템플릿

@layout/gnt_small_template_view

작은 템플릿은 리사이클러 뷰 또는 긴 직사각형 광고 보기가 필요할 때 이상적입니다. 예를 들어 인피드 광고에 사용할 수 있습니다.

중간 템플릿

@layout/gnt_medium_template_view

중간 템플릿은 ½~¾ 페이지 보기로 되어 있지만, 피드 내에 사용할 수도 있습니다. 방문 페이지 또는 스플래시 페이지에 유용합니다.

템플릿을 다양한 게재위치에 자유롭게 사용해 보세요. 물론 게시자의 요구사항에 맞게 소스 코드와 XML 파일을 변경할 수도 있습니다.

네이티브 광고 템플릿 설치하기

네이티브 템플릿을 설치하려면 (GitHub의 클론 또는 다운로드 옵션을 사용하여) zip 파일을 다운로드해 기존 Android 스튜디오 프로젝트로 모듈을 가져오면 됩니다.

  1. 파일 > 새로 만들기 > 모듈 가져오기를 선택합니다.

  2. nativetemplates폴더를 선택합니다.

    네이티브 템플릿 가져오기

  3. 앱 수준 build.gradle 파일에 다음 행을 추가합니다.

    dependencies {
            ...
            implementation project(':nativetemplates')
            ...
    }
    

네이티브 광고 템플릿 사용하기

템플릿은 다른 보기 그룹과 마찬가지로 모든 레이아웃 XML 파일에서 사용할 수 있습니다.

레이아웃에 템플릿 추가하기

템플릿은 다음 두 가지 단계를 거쳐서 사용할 수 있습니다.

  1. 먼저 템플릿을 레이아웃의 일부로 추가해야 합니다.

    <LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:context=".MainActivity"
       tools:showIn="@layout/activity_main" >
    
    <!--  This is your template view -->
    <com.google.android.ads.nativetemplates.TemplateView
       android:id="@+id/my_template"
       <!-- this attribute determines which template is used. The other option is
        @layout/gnt_medium_template_view -->
       app:gnt_template_type="@layout/gnt_small_template_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />
    
    ...
    </LinearLayout>
    
  2. 다음으로 템플릿을 로드할 때 네이티브 광고를 제공해야 합니다.

    MobileAds.initialize(this, "[_app-id_]");
     AdLoader adLoader = new AdLoader.Builder(this, "[_ad-unit-id_]")
         .forUnifiedNativeAd(new UnifiedNativeAd.OnUnifiedNativeAdLoadedListener() {
           @Override
           public void onUnifiedNativeAdLoaded(UnifiedNativeAd unifiedNativeAd) {
              NativeTemplateStyle styles = new
                  NativeTemplateStyle.Builder().withMainBackgroundColor(background).build();
    
              TemplateView template = findViewById(R.id.my_template);
              template.setStyles(styles);
              template.setNativeAd(unifiedNativeAd);
    
            }
         })
         .build();
    
       adLoader.loadAd(new AdRequest.Builder().build());
    }
    

스타일 사전 키

템플릿의 스타일을 지정하는 방법은 두 가지가 있습니다. 하나는 기본 레이아웃 XML을 사용하는 것이고, 다른 하나는 Google의 NativeTemplateStyle.Builder 객체를 사용하는 것입니다. 위의 코드 샘플은 NativeTemplateStyle.Builder 객체를 사용하여 기본 배경색을 설정하는 방법을 보여주고 있지만 여러 가지 다른 옵션도 있습니다. 아래에 사용 가능한 모든 빌더 메서드가 제시되어 있습니다. 빌더는 모든 XML 레이아웃 스타일 지정을 재정의하는 NativeTemplateStyle 객체를 반환합니다. XML 레이아웃인 gnt_small_template.xmlgnt_medium_template.xml은 이미 익숙한 Android 스타일 지정 매개변수를 사용합니다.

네이티브 템플릿 스타일 지정을 위한 빌더 메서드
withCallToActionTextTypeface Typeface callToActionTextTypeface

클릭 유도문안의 서체입니다.

withCallToActionTextSize float callToActionTextSize

클릭 유도문안 텍스트의 크기입니다.

withCallToActionTypefaceColor int callToActionTypefaceColor

클릭 유도문안 텍스트의 색상입니다.

withCallToActionBackgroundColor ColorDrawable callToActionBackgroundColor

클릭 유도문안의 배경색입니다.

withPrimaryTextTypeface Typeface primaryTextTypeface

텍스트에서 첫 번째 행의 서체입니다.

withPrimaryTextSize float primaryTextSize

텍스트에서 첫 번째 행의 텍스트 크기입니다.

withPrimaryTextTypefaceColor int primaryTextTypefaceColor

텍스트에서 첫 번째 행의 색상입니다.

withPrimaryTextBackgroundColor ColorDrawable primaryTextBackgroundColor

텍스트에서 첫 번째 행의 배경색입니다.

withSecondaryTextTypeface Typeface secondaryTextTypeface

텍스트에서 두 번째 행의 서체입니다.

withSecondaryTextSize float secondaryTextSize

텍스트에서 두 번째 행의 텍스트 크기입니다.

withSecondaryTextTypefaceColor int secondaryTextTypefaceColor

텍스트에서 두 번째 행의 텍스트 색상입니다.

withSecondaryTextBackgroundColor ColorDrawable secondaryTextBackgroundColor

텍스트에서 두 번째 행의 배경색입니다.

withTertiaryTextTypeface Typeface tertiaryTextTypeface

텍스트에서 세 번째 행의 서체입니다.

withTertiaryTextSize float tertiaryTextSize

텍스트에서 세 번째 행의 텍스트 크기입니다.

withTertiaryTextTypefaceColor int tertiaryTextTypefaceColor

텍스트에서 세 번째 행의 텍스트 색상입니다.

withTertiaryTextBackgroundColor ColorDrawable tertiaryTextBackgroundColor

텍스트에서 세 번째 행의 배경색입니다.

withMainBackgroundColor ColorDrawable mainBackgroundColor

기본 배경색입니다.

참여하기

Google에서는 사용자가 네이티브 광고를 신속하게 개발할 수 있도록 돕기 위해 네이티브 템플릿을 만들었습니다. 새로운 템플릿이나 추가 기능이 필요하면 언제든지 GitHub 저장소에 참여해 주세요. pull 요청을 보내 주시면 Google에서 검토한 후 알려 드립니다.