Meta Audience Network

Android용 Audience Network 광고 레이아웃 가이드라인

Android 기기는 형태와 크기가 다양하므로 각 기기에서 네이티브 광고가 어떻게 표시되는지 주의를 기울여야 합니다. 네이티브 광고 레이아웃이 모든 기기에서 일관성을 유지하려면 레이아웃이 유연해야 합니다. 즉, 고정된 크기로 레이아웃을 정의하는 대신 다양한 화면 크기와 방향에 따라 레이아웃이 조정되어야 합니다.

반응형 레이아웃을 만들기 위해서는 ConstraintLayout을 사용하는 것이 좋습니다. 이는 Android 2.3 (API level 9) 이상에서 호환되는 API 라이브러리에서 이용 가능합니다. 또한 Android Studio 최신 버전에서는 ConstraintLayout 빌드 과정을 간소화할 수 있는 Layout Editor를 제공합니다. Layout Editor에서 ConstraintLayout으로 네이티브 광고 UI를 빌드하는 튜토리얼은 아래와 같습니다.

계속하기 전에 Audience Network 시작하기 및 Android 시작하기 가이드를 완료했는지 확인하세요.

필수 조건

네이티브 광고 레이아웃 생성 단계

1단계: ConstraintLayout 라이브러리 포함

2단계: 네이티브 광고의 상단 부분 레이아웃(아이콘, 제목, 레이블 포함)

3단계: 네이티브 광고의 MediaView 레이아웃

4단계: 네이티브 광고의 소셜 컨텍스트, 광고 본문 및 행동 유도 버튼 레이아웃

샘플: 완전한 XML 제약 레이아웃

데모: 방향 및 화면 크기에 따른 제약 레이아웃


네이티브 배너 광고 샘플 제약 XML 레이아웃

샘플: 완전한 XML 제약 레이아웃

데모: 방향 및 화면 크기에 따른 제약 레이아웃


네이티브 광고 정책

클릭 가능한 요소의 잘못된 예

클릭 가능한 요소의 좋은 예

네이티브 광고 레이아웃 생성 단계

1단계: ConstraintLayout 라이브러리 포함

프로젝트에서 ConstraintLayout을 사용하려면 다음과 같은 절차를 따릅니다.



최신 ConstraintLayout 라이브러리를 사용하려면 (프로젝트가 아닌) 모듈 수준 build.gradle에 다음 구문을 추가합니다.

dependencies {
    ...
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
}

Constraint Layout Library를 처리하는 과정에서 문제가 발생할 경우 Gradle 파일을 동기화하고 Android Studio를 다시 시작해 보세요.

일단 Gradle 파일과 ConstraintLayout 라이브러리가 성공적으로 동기화되면 ConstraintLayout으로 XML 레이아웃 파일을 생성할 수 있습니다.

2단계: 네이티브 광고의 상단 부분 레이아웃(아이콘, 제목, 레이블 포함)

먼저 Horizontal Guidelines를 추가하고 layout_constraintGuide_begin을 55dp로 설정합니다. 이는 다른 보기를 제약하는 데 사용됩니다. 그리고 com.facebook.ads.MediaView를 추가하여 상단과 왼쪽은 상단 레이아웃에 제약하고 하단은 가이드라인에 제약합니다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <com.facebook.ads.MediaView
        android:id="@+id/native_ad_icon"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.constraint.Guideline
        android:id="@+id/below_ad_icon_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="55dp" />
    ...
</android.support.constraint.ConstraintLayout>

그런 다음, 다른 Horizontal Guideline을 추가하고 layout_constraintGuide_begin을 27.5dp로 설정합니다. 이는 광고주 이름 텍스트와 스폰서 레이블을 분리하는 데 사용됩니다. native_advertiser_name, native_ad_sponsored_label 및 ad_choices_container를 다음과 같이 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout>
    ...
    <TextView
        android:id="@+id/native_advertiser_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="6dp"
        android:ellipsize="end"
        android:lines="1"
        android:textColor="@android:color/black"
        android:textSize="15sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toEndOf="@+id/native_ad_icon"
        app:layout_constraintBottom_toTopOf="@+id/separate_advertiser_name_guideline" />

    <android.support.constraint.Guideline
        android:id="@+id/separate_advertiser_name_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="27.5dp" />

    <TextView
        android:id="@+id/native_ad_sponsored_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        android:textColor="@android:color/darker_gray"
        android:textSize="12sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toStartOf="@+id/native_advertiser_name"
        app:layout_constraintTop_toBottomOf="@+id/separate_advertiser_name_guideline" />

    <LinearLayout
        android:id="@+id/ad_choices_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
    ...
</android.support.constraint.ConstraintLayout>

3단계: 네이티브 광고의 MediaView 레이아웃

다음과 같이 MediaView를 추가하고 2단계에서 생성한 Horizontal Guideline으로 제약합니다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout>
    ...   
    <com.facebook.ads.MediaView
    android:id="@+id/native_ad_media"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:gravity="center"
    app:layout_constraintEnd_toEndOf="@+id/ad_choices_container"
    app:layout_constraintStart_toStartOf="@+id/native_ad_icon"
    app:layout_constraintTop_toTopOf="@+id/below_ad_icon_guideline" />
    ...
</android.support.constraint.ConstraintLayout>

4단계: 네이티브 광고의 소셜 컨텍스트, 광고 본문 및 행동 유도 버튼 레이아웃

native_ad_social_context, native_ad_body 및 native_ad_call_to_action을 추가하고 MediaView 아래로 제약합니다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout>
    ...      
    <TextView
        android:id="@+id/native_ad_social_context"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginStart="3dp"
        android:ellipsize="end"
        android:lines="1"
        android:textColor="@android:color/darker_gray"
        android:textSize="12sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toStartOf="@+id/native_ad_media"
        app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />

    <TextView
        android:id="@+id/native_ad_body"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:maxLines="2"
        android:textColor="@android:color/black"
        android:textSize="12sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toStartOf="@+id/native_ad_social_context"
        app:layout_constraintTop_toBottomOf="@+id/native_ad_social_context" />

    <Button
        android:id="@+id/native_ad_call_to_action"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_marginTop="15dp"
        android:background="#4286F4"
        android:textSize="12sp"
        android:textColor="@android:color/white"
        android:text="@string/placeholder"
        android:paddingStart="20dp"
        android:paddingEnd="20dp"
        app:layout_constraintEnd_toEndOf="@id/native_ad_media"
        app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />
    ...
</android.support.constraint.ConstraintLayout>

샘플: 완전한 XML 제약 레이아웃

네이티브 광고의 완전한 샘플 XML 제약 레이아웃은 다음과 같습니다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <com.facebook.ads.MediaView
        android:id="@+id/native_ad_icon"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.constraint.Guideline
        android:id="@+id/below_ad_icon_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="55dp" />

    <TextView
        android:id="@+id/native_advertiser_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="6dp"
        android:ellipsize="end"
        android:lines="1"
        android:textColor="@android:color/black"
        android:textSize="15sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toEndOf="@+id/native_ad_icon"
        app:layout_constraintBottom_toTopOf="@+id/separate_advertiser_name_guideline" />

    <android.support.constraint.Guideline
        android:id="@+id/separate_advertiser_name_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="27.5dp" />

    <TextView
        android:id="@+id/native_ad_sponsored_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        android:textColor="@android:color/darker_gray"
        android:textSize="12sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toStartOf="@+id/native_advertiser_name"
        app:layout_constraintTop_toBottomOf="@+id/separate_advertiser_name_guideline" />

    <LinearLayout
        android:id="@+id/ad_choices_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <com.facebook.ads.MediaView
        android:id="@+id/native_ad_media"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        app:layout_constraintEnd_toEndOf="@+id/ad_choices_container"
        app:layout_constraintStart_toStartOf="@+id/native_ad_icon"
        app:layout_constraintTop_toTopOf="@+id/below_ad_icon_guideline" />

    <TextView
        android:id="@+id/native_ad_social_context"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginStart="3dp"
        android:ellipsize="end"
        android:lines="1"
        android:textColor="@android:color/darker_gray"
        android:textSize="12sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toStartOf="@+id/native_ad_media"
        app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />

    <TextView
        android:id="@+id/native_ad_body"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:maxLines="2"
        android:textColor="@android:color/black"
        android:textSize="12sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toStartOf="@+id/native_ad_social_context"
        app:layout_constraintTop_toBottomOf="@+id/native_ad_social_context" />

    <Button
        android:id="@+id/native_ad_call_to_action"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_marginTop="15dp"
        android:background="#4286F4"
        android:textSize="12sp"
        android:textColor="@android:color/white"
        android:text="@string/placeholder"
        android:paddingStart="20dp"
        android:paddingEnd="20dp"
        app:layout_constraintEnd_toEndOf="@id/native_ad_media"
        app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />

</android.support.constraint.ConstraintLayout>

데모: 방향 및 화면 크기에 따른 제약 레이아웃

네이티브 광고의 ConstraintLayout은 이미 생성했습니다. 이 레이아웃은 각 방향과 화면 크기에 맞는 최적의 사용자 경험을 제공할 것입니다. ConstraintLayout은 Android 휴대폰과 태블릿에서 모두 일관되게 보여야 합니다. 참고: 레이아웃은 ScrollView 내에 있습니다. 네이티브 광고가 완전히 보이지 않을 때는 휴대폰의 Landscape 방향에서 스크롤이 가능합니다.

네이티브 배너 광고 샘플 제약 레이아웃

네이티브 배너 광고는 최신 Meta Audience Network SDK에서 제공됩니다. 네이티브 배너 제약 레이아웃을 생성하는 단계는 Native Ad와 유사합니다. 위의 단계에 따라 Native Banner Ad 레이아웃을 생성하거나 다음 샘플 XML 레이아웃 코드를 프로젝트에 복사할 수 있습니다.

샘플: 완전한 XML 제약 레이아웃

네이티브 배너 광고의 완전한 샘플 XML 제약 레이아웃은 다음과 같습니다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="3dp">

    <RelativeLayout
        android:id="@+id/ad_choices_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="2dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/native_ad_sponsored_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        android:textColor="@android:color/darker_gray"
        android:textSize="12sp"
        android:text="Placeholder"
        app:layout_constraintStart_toEndOf="@id/ad_choices_container"
        app:layout_constraintTop_toTopOf="parent" />

    <com.facebook.ads.MediaView
        android:id="@+id/native_ad_icon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="3dp"
        android:gravity="center"
        app:layout_constraintStart_toStartOf="@id/ad_choices_container"
        app:layout_constraintTop_toBottomOf="@id/ad_choices_container" />

    <TextView
        android:id="@+id/native_advertiser_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="6dp"
        android:textColor="@android:color/black"
        android:textSize="15sp"
        android:textStyle="bold"
        android:ellipsize="end"
        android:lines="1"
        app:layout_constraintStart_toEndOf="@+id/native_ad_icon"
        app:layout_constraintBottom_toTopOf="@+id/separate_advertiser_name_guideline" />

    <android.support.constraint.Guideline
        android:id="@+id/separate_advertiser_name_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="43dp" />

    <TextView
        android:id="@+id/native_ad_social_context"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="12sp"
        android:ellipsize="end"
        android:lines="1"
        app:layout_constraintStart_toStartOf="@+id/native_advertiser_name"
        app:layout_constraintTop_toBottomOf="@+id/separate_advertiser_name_guideline" />

    <Button
        android:id="@+id/native_ad_call_to_action"
        android:layout_width="80dp"
        android:layout_height="50dp"
        android:gravity="center"
        android:background="#4286F4"
        android:textSize="12sp"
        android:textColor="@android:color/white"
        android:paddingLeft="3dp"
        android:paddingRight="3dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/native_ad_icon" />

</android.support.constraint.ConstraintLayout>

데모: 방향 및 화면 크기에 따른 제약 레이아웃

네이티브 광고 정책 준수

양질의 제품을 개발하려면 개발자는 네이티브 광고 또는 네이티브 배너 광고 레이아웃을 구현할 때마다 Meta Audience Network 정책을 준수해야 합니다. 항상 사용자에게 클릭에 대한 전체 관리 권한을 제공해야 합니다. 특히 광고에서 클릭 가능한 요소가 있을 경우 광고 제목, URL, 행동 유도 및 이미지 자산만 클릭할 수 있어야 합니다. 그리고 제목 텍스트 또는 이미지 보기에서 흰 공백은 클릭할 수 없어야 합니다.

클릭 가능한 요소의 잘못된 예

네이티브 광고의 레이아웃을 빌드할 때는 항상 TextView, AdIcon 및 MediaView에 높이와 너비를 고정하지 않아야 광고 제목에 white space가 생기지 않습니다. 아래는 반드시 피해야 할 잘못된 예입니다.



잘못된 예는 다음과 같습니다.

클릭 가능한 요소의 좋은 예

양질의 네이티브 광고를 만들려면 위의 단계에 따라 네이티브 광고 또는 네이티브 배너 광고에 제약 레이아웃을 빌드하세요. 예를 들어 항상 TextView의 높이와 너비에 'wrap_content'를 적용해야 합니다. AdIcon 또는 MediaView에 고정된 너비나 match_parent를 할당할 수 있지만 높이에는 wrap_content를 사용해야 합니다. Meta Audience Network 정책을 준수한 레이아웃의 형태는 아래와 같습니다.

다음 단계

기타 참고 자료

시작하기 가이드

Audience Network 시작을 위한 기술 가이드

API 참고 자료

Android용 Facebook SDK 참고 자료