FAN(Facebook Audience Network)

SDK 설치

• v6.21.0 호환 지원합니다.

api 'androidx.annotation:annotation:1.4.0'
api 'com.facebook.android:audience-network-sdk:6.21.0'

네이티브 광고 추가설정

다른 타입의 광고와 다르게 네이티브 광고에서 미디에이션 사용하고자 할 경우에는 레이아웃에 대한 추가 설정이 필요합니다.

AdPopcornSSPNativeAd layout 내에 FAN 광고 영역을 추가해 주세요

• native_ad_mediation_layout.xml 샘플

<?xml version="1.0" encoding="utf-8"?>
<com.igaworks.ssp.part.nativead.AdPopcornSSPNativeAd
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/adpopcorn_native_ad"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- FAN -->
    <com.facebook.ads.NativeAdLayout
        android:id="@+id/fan_native_ad_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <include layout="@layout/fan_native_ad_unit_layout"/>
    </com.facebook.ads.NativeAdLayout>

</com.igaworks.ssp.part.nativead.AdPopcornSSPNativeAd>

• fan_native_ad_unit_layout.xml 샘플

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fan_ad_unit"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:orientation="vertical"
    android:paddingLeft="10dp"
    android:paddingRight="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingBottom="10dp"
        android:paddingTop="10dp">

        <com.facebook.ads.MediaView
            android:id="@+id/fan_native_ad_icon"
            android:layout_width="35dp"
            android:layout_height="35dp" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingLeft="5dp"
            android:paddingRight="5dp">

            <TextView
                android:id="@+id/fan_native_ad_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:textColor="@android:color/black"
                android:textSize="15sp" />

            <TextView
                android:id="@+id/fan_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" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/fan_ad_choices_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="end"
            android:orientation="horizontal" />

    </LinearLayout>

    <com.facebook.ads.MediaView
        android:id="@+id/fan_native_ad_media"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="5dp">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:orientation="vertical">

            <TextView
                android:id="@+id/fan_native_ad_social_context"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:textColor="@android:color/darker_gray"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/fan_native_ad_body"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:gravity="center_vertical"
                android:lines="2"
                android:textColor="@android:color/black"
                android:textSize="12sp" />

        </LinearLayout>

        <Button
            android:id="@+id/fan_native_ad_call_to_action"
            android:layout_width="100dp"
            android:layout_height="30dp"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:background="#4286F4"
            android:paddingLeft="3dp"
            android:paddingRight="3dp"
            android:textColor="@android:color/white"
            android:textSize="12sp"
            android:visibility="gone" />

    </LinearLayout>

</LinearLayout>

xml에서 생성한 ui component를 sdk에서 제공하는 setFacebookAudienceViewBinder API를 이용해 아래와 같이 설정해 줍니다.

FacebookViewBinder facebookViewBinder 
	= new FacebookViewBinder.Builder(R.id.fan_native_ad_view, R.layout.fan_native_ad_unit_layout)
        .adIconViewId(R.id.fan_native_ad_icon)
        .adChoicesLayoutId(R.id.fan_ad_choices_container)
        .callToActionId(R.id.fan_native_ad_call_to_action)
        .adBodyViewId(R.id.fan_native_ad_body)
        .mediaViewId(R.id.fan_native_ad_media)
        .sponsoredViewId(R.id.fan_native_ad_sponsored_label)
        .titleViewId(R.id.fan_native_ad_title)
        .socialContextId(R.id.fan_native_ad_social_context)
        .build();

adPopcornSSPNativeAd.setFacebookAudienceViewBinder(facebookViewBinder);

FacebookViewBinder Builder 생성 시, view id(R.id.fan_native_ad_view)와 layout id(R.layout.fan_native_ad_unit_layout)는 필수로 넘겨주어야 하며, 그 외 ui component에 대해서는 사용하는 리소스에 대해서만 설정해 주면 됩니다.

자세한 사항은 아래 링크의 FAN 네이티브 가이드 참고바랍니다.

https://developers.facebook.com/docs/audience-network/android-native/