Audience Network Werbelayout-Leitfaden für Android
Android-Geräte sind in verschiedensten Formen und Größen verfügbar. Daher solltest du vorsichtig damit sein, wie deine Native Ads auf unterschiedlichen Geräten aussehen. Verwende nach Möglichkeit ein flexibles Layout, um Native Ads auf unterschiedlichen Geräten einheitlich darzustellen. Anstatt dein Layout mit statischen Abmessungen zu definieren, sollte es also auf unterschiedliche Bildschirmgrößen und Ausrichtungen reagieren können.
Wir empfehlen ConstraintLayout für dynamische Layouts. Dieses Layout ist in einer API-Bibliothek verfügbar, die mit Android 2.3 (API level 9) aufwärts kompatibel ist. Die neueste Version von Android Studio enthält außerdem den Layout Editor, um die Erstellung des ConstraintLayout zu vereinfachen. Im folgenden Tutorial wird die Erstellung einer Native Ad-UI mit ConstraintLayout im Layout Editor beschrieben.
Stelle sicher, dass du die Leitfäden zu den ersten Schritten mit dem Audience Network und mit Android abgeschlossen hast, bevor du fortfährst.
Voraussetzungen
- Du solltest eines der Beispiele Native Ad oder Native Banner Ad abgeschlossen haben.
- Du solltest die Facebook-Richtlinie für die Erstellung hochwertiger Produkte gelesen haben.
- Du solltest den Artikel Erstellen einer dynamischen UI mit ConstraintLayout gelesen haben.
- Du solltest den Artikel Erstellen einer UI im Layout Editor gelesen haben.
Erstellung eines Layouts für Native Ads
Schritt 1: Einbinden der ConstraintLayout-Bibliothek
Schritt 2: Layout des oberen Teils der Native Ad (inklusive Symbole, Titel und Label)
Schritt 3: Layout der MediaView für die Native Ad
Schritt 4: Layout von sozialem Kontext, Hauptteil und Handlungs-Button der Native Ad
Beispiel: Vollständiges XML Constraint Layout
Demo: Constraint Layout für andere Ausrichtungen und Bildschirmgrößen
Constraint XML Layout-Beispiel für Native Banner Ad
Beispiel: Vollständiges XML Constraint Layout
Demo: Constraint Layout für andere Ausrichtungen und Bildschirmgrößen
Richtlinie für Native Ads
Schlechtes Beispiel für klickbare Elemente
Gutes Beispiel für klickbare Elemente
Erstellung eines Layouts für Native Ads
Schritt 1: Einbinden der ConstraintLayout-Bibliothek
So kannst du ConstraintLayout in deinem Projekt verwenden:
Füge das folgende Statement auf Modulebene zu build.gradle (nicht zum Projekt!) hinzu, um die neueste ConstraintLayout-Bibliothek zu verwenden:
dependencies {
...
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
}Wenn beim Auflösen der Constraint Layout Library Probleme auftreten, stelle sicher, dass du deine Gradle-Datei synchronisiert hast, und starte Android Studio neu.
Sobald du die Gradle-Datei erfolgreich mit der ConstraintLayout-Bibliothek synchronisiert hast, solltest du eine XML-Layoutdatei mit ConstraintLayout erstellen können:
Schritt 2: Layout des oberen Teils der Native Ad (inklusive Symbole, Titel und Label)
Füge zunächst Horizontal Guidelines hinzu und lege layout_constraintGuide_begin auf 55dp fest, um andere Ansichten einzuschränken. Füge eine com.facebook.ads.MediaView hinzu, schränke ihre obere und linke Seite auf das übergeordnete Layout und die untere Seite auf die Richtlinie ein.
<?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>Füge anschließend eine weitere Horizontal Guideline mit layout_constraintGuide_begin als 27.5dp hinzu, um den Namenstext des Werbetreibenden vom Hinweis „Gesponsert“ zu trennen. Füge native_advertiser_name, native_ad_sponsored_label und ad_choices_container wie folgt hinzu:
<?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>Schritt 3: Layout der MediaView für die Native Ad
Füge eine MediaView hinzu und beschränke sie wie folgt auf die in Schritt 2 erstellte 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>Schritt 4: Layout von sozialem Kontext, Hauptteil und Handlungs-Button der Native Ad
Füge native_ad_social_context, native_ad_body und native_ad_call_to_action hinzu und schränke sie unterhalb der MediaView ein.
<?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>Beispiel: Vollständiges XML Constraint Layout
Hier siehst du ein vollständiges XML-Beispiel für ein Constraint Layout einer Native Ad:
<?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>Demo: Constraint Layout für andere Ausrichtungen und Bildschirmgrößen
Du hast bereits ein ConstraintLayout für deine Native Ad mit optimalem Nutzungserlebnis für verschiedene Ausrichtungen und Bildschirmgrößen erstellt. Das ConstraintLayout sollte auf Android-Telefonen und -Tablets einheitlich aussehen. Hinweis: Das Layout befindet sich innerhalb von ScrollView und ist in der Landscape-Ausrichtung auf Telefonen scrollbar, falls die Native Ad nicht vollständig angezeigt wird.
Constraint Layout-Beispiel für Native Banner Ad
Native Banner Ads sind im neuesten Meta Audience Network-SDK verfügbar. Constraint Layouts für Native Banner werden auf dieselbe Weise erstellt wie für Native Ad. Folge den oben beschriebenen Schritten, um das Native Banner Ad-Layout zu erstellen, oder kopiere den folgenden XML-Layoutcode in dein Projekt.
Beispiel: Vollständiges XML Constraint Layout
Hier siehst du ein vollständiges XML-Beispiel für ein Constraint Layout einer Native Banner Ad:
<?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>Demo: Constraint Layout für andere Ausrichtungen und Bildschirmgrößen
Richtlinien-Compliance für Native Ads
Um ein hochwertiges Produkt zu erstellen, sollten Entwickler*innen bei der Implementierung von Layouts für Native Ads oder Native Banner Ads die Meta Audience Network-Richtlinie befolgen. Überlasse stets den Nutzer*innen die vollständige Kontrolle über Klicks. Stelle insbesondere für klickbare Elemente in der Werbeanzeige sicher, dass nur Titel, URLs, Call to Action und Bildelemente klickbar sind. Die weiße Fläche im Titeltext oder in Bildansichten darf nicht klickbar sein.
Schlechtes Beispiel für klickbare Elemente
Verwende in deinem Layout für Native Ads keine feste Höhe und Breite für TextView, AdIcon und MediaView, um white space im Titel der Werbeanzeige zu vermeiden. Unten siehst du ein schlechtes Beispiel, dem du nie folgen solltest:
Ein weiteres schlechtes Beispiel:
Gutes Beispiel für klickbare Elemente
Führe die oben beschriebenen Schritte aus, um ein Constraint Layout für hochwertige Native Ads oder Native Banner Ads zu erstellen. Verwende beispielsweise immer „wrap_content“ für Höhe und Breite in TextView. Die Breite eines AdIcon oder einer MediaView wird unter Umständen fest oder mit match_parent angegeben, aber für die Höhe solltest du wrap_content verwenden. Bei richtiger Umsetzung der Meta Audience Network-Richtlinie sollte das Layout wie folgt aussehen:
Nächste Schritte
- Folge unseren Leitfäden zur Integration verschiedener Anzeigenformate in deine App:
Teste die Anzeigenintegration in deiner App.
Reiche deine App zur Prüfung ein.
Sobald wir eine Werbeanzeigenanfrage von deiner App oder Webseite empfangen, prüfen wir, ob diese den Audience Network-Richtlinien und Facebook-Gemeinschaftsstandards entspricht. Erfahre mehr über unseren Überprüfungsprozess.
Weitere Ressourcen |
Leitfaden für erste SchritteTechnischer Leitfaden für die ersten Schritte mit Audience Network | API-ReferenzReferenz zu Facebook-SDK für Android |