Native Vorlagen

Plattform auswählen:Android iOS Flutter

Native Vorlagen herunterladen

Wichtig: Bevor Sie fortfahren, sollten Sie wissen, wie Sie ein natives Ad laden.

Mit nativen Anzeigen können Sie Ihre Anzeigen anpassen und so die Nutzerfreundlichkeit verbessern. Eine bessere Nutzererfahrung kann die Interaktion steigern und Ihren Gesamtumsatz verbessern.

Damit Sie das volle Potenzial nativer Anzeigen ausschöpfen können, ist es wichtig, dass Sie Ihre Anzeigenlayouts so gestalten, dass sie sich natürlich in Ihre App einfügen. Um Ihnen den Einstieg zu erleichtern, haben wir native Vorlagen erstellt.

Native Vorlagen sind codefertige Ansichten für Ihre nativen Anzeigen, die sich schnell implementieren und einfach anpassen lassen. Mit nativen Vorlagen können Sie Ihre erste native Anzeige in wenigen Minuten implementieren und das Erscheinungsbild schnell und ohne viel Code anpassen. Sie können diese Vorlagen an beliebiger Stelle platzieren, z. B. in einer RecyclerView, die in einem Newsfeed verwendet wird, in einem Dialogfeld oder an einer anderen Stelle in Ihrer App.

Hinweis :Wenn Sie eigene native Layouts von Grund auf neu erstellen möchten, kehren Sie stattdessen zur Dokumentation zu Native Advanced zurück.

Unsere nativen Vorlagen werden als Android Studio-Modul bereitgestellt. Sie können sie also ganz einfach in Ihr Projekt einbinden und nach Belieben verwenden.

Vorlagengrößen

Es gibt zwei Vorlagen: klein und mittel. Beide verwenden die TemplateView-Klasse und haben ein festes Seitenverhältnis. Sie werden so skaliert, dass sie die Breite der übergeordneten Ansichten ausfüllen.

Kleine Vorlage

@layout/gnt_small_template_view

Die kleine Vorlage eignet sich ideal für Recycler-Ansichten oder wenn Sie eine lange rechteckige Anzeigenansicht benötigen. Sie können es beispielsweise für In-Feed-Anzeigen verwenden.

Mittlere Vorlage

@layout/gnt_medium_template_view

Die Medium-Vorlage ist für eine Ansicht von einer halben bis zu drei Vierteln der Seite vorgesehen, kann aber auch in Feeds verwendet werden. Sie eignet sich gut für Landingpages oder Splash-Pages.

Sie können mit der Platzierung experimentieren. Sie können den Quellcode und die XML-Dateien natürlich auch an Ihre Anforderungen anpassen.

Native Anzeigenvorlagen installieren

Wenn Sie die nativen Vorlagen installieren möchten, laden Sie einfach die ZIP-Datei herunter (über die Option Klonen oder Herunterladen auf GitHub) und importieren Sie das Modul in Ihr vorhandenes Android Studio-Projekt.

1. Wählen Sie File > New > Import Module (Datei > Neu > Modul importieren) aus.

2. nativetemplates-Ordner auswählen

   

3. Fügen Sie der Datei build.gradle auf App-Ebene die folgende Zeile hinzu:

   dependencies {
           ...
           implementation project(':nativetemplates')
           ...
   }
   

Native Anzeigenvorlagen verwenden

Sie können die Vorlage in jeder Layout-XML-Datei wie jede andere Ansichtsgruppe verwenden.

Die Verwendung der Vorlagen erfolgt in zwei Schritten:

1. Zuerst müssen Sie die Vorlage in Ihr Layout einfügen.

   <LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:context=".MainActivity"
      tools:showIn="@layout/activity_main" >
   
   <!--  This is your template view -->
   <com.google.android.ads.nativetemplates.TemplateView
      android:id="@+id/my_template"
      <!-- this attribute determines which template is used. The other option is
       @layout/gnt_medium_template_view -->
      app:gnt_template_type="@layout/gnt_small_template_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
   
   ...
   </LinearLayout>
   

2. Als Nächstes müssen Sie der Vorlage Ihre native Anzeige beim Laden übergeben:

   MobileAds.initialize(this);
   AdLoader adLoader = new AdLoader.Builder(this, "/21775744923/example/native")
       .forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
           @Override
           public void onNativeAdLoaded(NativeAd nativeAd) {
               NativeTemplateStyle styles = new
                 NativeTemplateStyle.Builder().withMainBackgroundColor(background).build();
               TemplateView template = findViewById(R.id.my_template);
               template.setStyles(styles);
               template.setNativeAd(nativeAd);
           }
        })
        .build();
   
   adLoader.loadAd(new AdManagerAdRequest.Builder().build());
   

Schlüssel für Stile im Wörterbuch

Es gibt zwei Möglichkeiten, das Template zu gestalten: mit herkömmlichem Layout-XML und mit dem NativeTemplateStyle.Builder-Objekt. Im obigen Codebeispiel wird gezeigt, wie Sie mit dem NativeTemplateStyle.Builder-Objekt die Haupt-Hintergrundfarbe festlegen. Es gibt aber auch eine Vielzahl anderer Optionen. Hier finden Sie alle verfügbaren Builder-Methoden. Der Builder gibt ein NativeTemplateStyle-Objekt zurück, das alle XML-Layoutformatierungen überschreibt. Die XML-Layouts gnt_small_template.xml und gnt_medium_template.xml verwenden dieselben Android-Stylingparameter, die Sie bereits kennen.

Builder-Methoden für den Stil nativer Vorlagen
withCallToActionTextTypeface	Typeface callToActionTextTypeface Die Schriftart für den Call-to-Action.
withCallToActionTextSize	float callToActionTextSize Die Größe des Call-to-Action-Texts.
withCallToActionTypefaceColor	int callToActionTypefaceColor Die Farbe des Call-to-Action-Texts.
withCallToActionBackgroundColor	ColorDrawable callToActionBackgroundColor Die Hintergrundfarbe des Call-to-Action.
withPrimaryTextTypeface	Typeface primaryTextTypeface Die Schriftart der ersten Textzeile.
withPrimaryTextSize	float primaryTextSize Die Größe der ersten Textzeile.
withPrimaryTextTypefaceColor	int primaryTextTypefaceColor Die Farbe der ersten Textzeile.
withPrimaryTextBackgroundColor	ColorDrawable primaryTextBackgroundColor Die Hintergrundfarbe der ersten Textzeile.
withSecondaryTextTypeface	Typeface secondaryTextTypeface Die Schriftart der zweiten Textzeile.
withSecondaryTextSize	float secondaryTextSize Die Größe der zweiten Textzeile.
withSecondaryTextTypefaceColor	int secondaryTextTypefaceColor Die Textfarbe der zweiten Textzeile.
withSecondaryTextBackgroundColor	ColorDrawable secondaryTextBackgroundColor Die Hintergrundfarbe der zweiten Textzeile.
withTertiaryTextTypeface	Typeface tertiaryTextTypeface Die Schriftart der dritten Textzeile.
withTertiaryTextSize	float tertiaryTextSize Die Größe der dritten Textzeile.
withTertiaryTextTypefaceColor	int tertiaryTextTypefaceColor Die Textfarbe der dritten Textzeile.
withTertiaryTextBackgroundColor	ColorDrawable tertiaryTextBackgroundColor Die Hintergrundfarbe der dritten Textzeile.
withMainBackgroundColor	ColorDrawable mainBackgroundColor Die Haupthintergrundfarbe.

Beitragen

Mit nativen Vorlagen können Sie schnell native Anzeigen erstellen. Wir freuen uns, wenn Sie zu unserem GitHub beitragen, um neue Vorlagen oder Funktionen hinzuzufügen. Senden Sie uns eine Pull-Anfrage. Wir sehen uns das dann an.