Android向けAudience Networkの広告レイアウトのガイドライン
Androidデバイスにはさまざまな形状やサイズがあるため、これらのデバイスでネイティブ広告がどのように表示されるかについて注意しなければなりません。さまざまなデバイス間でネイティブ広告のレイアウトの一貫性を維持するには、レイアウトに柔軟性を持たせる必要があります。つまり、レイアウトに静的な寸法を定義するのではなく、種々の画面サイズや表示方向に対応してレイアウトを変える必要があります。
このような変更可能なレイアウトを作成する場合には、ConstraintLayoutの使用をおすすめします。これは、Android 2.3 (API level 9)以上と互換性があるAPIライブラリで使用できます。また、Android Studioの最新のバージョンでは、レイアウトエディタを使用してConstraintLayoutを簡単に作成できます。以下のチュートリアルでは、レイアウトエディタを使用してConstraintLayoutでネイティブ広告UIを作成する方法について説明します。
続行する前に、必ずAudience NetworkのスタートガイドとAndroidのスタートガイドすべてに目を通しておいてください。
前提条件
- 必ずネイティブ広告とネイティブバナー広告の例に目を通しておいてください。
- 質の高い製品を開発するためにFacebookポリシーを読んでおいてください。
- ConstraintLayoutでレスポンシブUIを作成するを読んでおいてください。
- Layout Editorを使用してUIを作成するを読んでおいてください。
ネイティブ広告レイアウトの作成手順
ステップ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を再起動してみてください。
ConstraintLayoutライブラリを追加したGradleファイルの同期が正常に終了したら、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、コールトゥアクション、および画像アセットのみクリックできることを保証する必要があります。さらに、タイトルテキスト内の空白や画像ビューはクリック不可にする必要があります。
クリック可能エレメントの悪い例
ネイティブ広告のレイアウトを作成する際には、広告タイトルでのwhite spaceを避けるために、TextView、AdIcon、MediaViewの幅と高さに固定値を指定しないでください。してはならない悪い例を次に示します。
以下は悪い表示例です。
クリック可能エレメントの良い例
高品質のネイティブ広告を作成するために、上記の手順に従って、ネイティブ広告やネイティブバナー広告に拘束レイアウトを作成してください。たとえば、TextViewの幅と高さには必ず「wrap_content」を適用してください。AdIconやMediaViewには固定幅またはmatch_parentが割り当て可能です。ただし、高さにはwrap_contentを使用してください。以下に、Meta Audience Networkポリシーに従ったレイアウト表示例を示します。
次のステップ
- アプリ内で別の広告フォーマットを統合する方法をご確認ください。
アプリと広告の統合のテスト
アプリのレビューを申請します。
アプリまたはウェブサイトから広告のリクエストが申請されるとすぐに、広告がAudience NetworkポリシーとFacebookコミュニティ規定に準拠していることを確認するためのレビューが行われます。詳しくは、レビュープロセスをご覧ください。