네이티브 템플릿

플랫폼 선택: Android iOS Flutter

네이티브 템플릿 다운로드

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

네이티브 광고를 최대한 활용하려면 광고 레이아웃을 앱의 일부인 것처럼 만드는 것이 중요합니다. 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);
AdLoader adLoader = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
    .forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
        @Override
        public void onNativeAdLoaded(NativeAd nativeAd) {
            NativeTemplateStyle styles = new
              NativeTemplateStyle.Builder().withMainBackgroundColor(background).build();
            TemplateView template = findViewById(R.id.my_template);
            template.setStyles(styles);
            template.setNativeAd(nativeAd);
        }
     })
     .build();

adLoader.loadAd(new AdRequest.Builder().build());

스타일 사전 키

템플릿의 스타일을 지정하는 방법은 두 가지가 있습니다. 하나는 기본 레이아웃 XML을 사용하는 것이고, 다른 하나는 Google의 NativeTemplateStyle.Builder 객체를 사용하는 것입니다. 위의 코드 샘플은 NativeTemplateStyle.Builder 객체를 사용하여 기본 배경색을 설정하는 방법을 보여주지만 여러 가지 다른 옵션도 있습니다. 아래에 사용 가능한 모든 빌더 메서드가 나와 있습니다. 빌더는 모든 XML 레이아웃 스타일 지정을 재정의하는 NativeTemplateStyle 객체를 반환합니다. XML 레이아웃인 gnt_small_template.xml과 gnt_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에서 검토한 후 알려 드립니다.