‏‎Meta Audience Network‎‏

دليل تخطيط إعلان Audience Network لنظام Android

تتوفر كل الأجهزة التي تعمل بنظام Android بأشكال وأحجام مختلفة، لذا يجب أن تنتبه إلى ما ستبدو عليه إعلاناتك الأصلية على الأجهزة المختلفة. ولضمان اتساق تخطيط إعلانك الأصلي مع الأجهزة، يجب أن يكون التخطيط مرنًا. بمعنى أنه بدلاً من تحديد تخطيطك بأبعاد ثابتة، يجب أن يستجيب تخطيطك لأحجام واتجاهات الشاشة المختلفة.

تتمثل أفضل ممارسة لإنشاء تخطيط سريع الاستجابة في استخدام ConstraintLayout المتوفر في مكتبة API المتوافقة مع الإصدار Android 2.3 (API level 9) والإصدارات الأحدث. وعند استخدام أحدث إصدار من Android Studio أيضًا، فإنه يوفر محرر التخطيط لتبسيط عملية إنشاء ConstraintLayout. فيما يلي عرض توضيحي حول كيفية إنشاء واجهة المستخدم للإعلان الأًصلي باستخدام ConstraintLayout بواسطة محرر التخطيط.

احرص على قراءة دليل بدء استخدام Audience Network ودليل بدء استخدام Android قبل المتابعة.

المتطلبات الأساسية

خطوات إنشاء مخطط الإعلان الأصلي

الخطوة الأولى: تضمين المكتبة ConstraintLayout

الخطوة الثانية: إعداد تخطيط الجزء العلوي من الإعلان الأصلي (بما في ذلك الأيقونات والعنوان والتصنيف)

الخطوة الثالثة: تخطيط MediaView للإعلان الأصلي

الخطوة الرابعة: تخطيط سياق التواصل الاجتماعي ونص الإعلان وزر اتخاذ إجراء في الإعلان الأصلي

العينة: إكمال تخطيط تقييد XML

العرض التوضيحي: تخطيط التقييد في اتجاهات وأحجام الشاشة المختلفة


تخطيط قيد XML لنموذج إعلان البانر الأصلي

العينة: إكمال تخطيط تقييد XML

العرض التوضيحي: تخطيط التقييد في اتجاهات وأحجام الشاشة المختلفة


سياسة الإعلان الأصلي

مثال خاطئ على العناصر القابلة للنقر

مثال صحيح على العناصر القابلة للنقر

خطوات إنشاء مخطط الإعلان الأصلي

الخطوة الأولى: تضمين المكتبة ConstraintLayout

لاستخدام ConstraintLayout في المشروع، تابع الخطوات كما يلي:



أضف العبارة التالية إلى build.gradle على مستوى الوحدة (وليس المشروع!) لاستخدام أحدث مكتبة ConstraintLayout:

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

إذا كانت تواجه مشكلات في حل Constraint Layout Library، فتأكد من مزامنة الملف Gradle وحاول إعادة تشغيل Android Studio.

بمجرد الانتهاء من مزامنة الملف Gradle مع المكتبة ConstraintLayout بنجاح، من المفترض أن تكون قادرًا على إنشاء ملف تخطيط XML باستخدام ConstraintLayout:

الخطوة الثانية: تخطيط الجزء العلوي من الإعلان الأصلي (بما في ذلك الأيقونات والعنوان والتصنيف)

أولاً، أضف 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>

الخطوة الثالثة: تخطيط MediaView للإعلان الأصلي

أضف MediaView وقم بتقييده عن طريق 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>

الخطوة الرابعة: تخطيط سياق التواصل الاجتماعي ونص الإعلان وزر اتخاذ إجراء في الإعلان الأصلي

أضف 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 في عناوين الإعلان. فيما يلي مثال خاطئ يجب عدم استخدامه مطلقًا:



إليك شكل المثال الخاطئ:

مثال صحيح على العناصر القابلة للنقر

لتصميم إعلان أصلي عالي الجودة، يرجى اتباع الخطوات الواردة أعلاه لإنشاء مخطط مقيد للإعلان الأصلي أو لإعلان البانر الأصلي. على سبيل المثال، يجب دائمًا تطبيق "wrap_content" على كل من العرض والارتفاع في TextView؛ بحيث قد تقوم بتعيين عرض ثابت أو match_parent إلى AdIcon أو MediaView، ولكن يجب استخدام wrap_content للارتفاع. فيما يلي الشكل الذي يبدو عليه التخطيط إذا اتبعت سياسة Meta Audience Network:

الخطوات التالية

مصادر إضافية

دليل بدء الاستخدام

الدليل الفني لبدء استخدام Audience Network

مرجع API

مرجع مجموعة Facebook SDK لنظام Android