Vorlagen für native Anzeigen

Native Vorlagen herunterladen

Wichtig: Bevor Sie fortfahren, sollten Sie sich mit dem Laden einer nativen Anzeige vertraut machen. Weitere Informationen zu nativen Anzeigen finden Sie in unserem Leitfaden zu nativen Anzeigen.

Mit nativen Anzeigen können Sie Ihre Anzeigen anpassen und so die Nutzererfahrung verbessern. Eine bessere Nutzererfahrung kann das Engagement erhöhen und Ihren Gesamtertrag steigern.

Damit Sie das Beste aus nativen Anzeigen herausholen, ist es wichtig, dass Sie Ihre Anzeigenlayouts so gestalten, dass sie wie eine natürliche Erweiterung Ihrer App wirken. Als Ausgangspunkt haben wir native Vorlagen erstellt.

Native Vorlagen sind Code-komplette Ansichten für Ihre nativen Anzeigen, die für eine schnelle Implementierung und einfache Änderung entwickelt wurden. Mithilfe von Vorlagen für native Anzeigen können Sie Ihre erste native Anzeige in nur wenigen Minuten implementieren und das Erscheinungsbild schnell und ohne viel Code anpassen. Du kannst diese Vorlagen an beliebiger Stelle platzieren, z. B. in einer TableView, die in einem Nachrichtenfeed verwendet wird, in einem Dialogfeld oder an einer anderen Stelle in deiner App.

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

In diesem Leitfaden erfahren Sie, wie Sie native Vorlagen herunterladen, einbinden und in Ihren iOS-Apps verwenden. Es wird davon ausgegangen, dass Sie bereits eine native Anzeige mit dem SDK geladen haben.

Vorlagengrößen

Es gibt zwei Vorlagengrößen: klein und mittel. Jede Vorlage wird durch eine Klasse dargestellt. Die Klassen sind GADTSmallTemplateView und GADTMediumTemplateView. Beide Klassen erweitern GADTTemplateView. Beide Vorlagen haben ein festes Seitenverhältnis, das nur dann auf die Breite der übergeordneten Ansichten skaliert wird, wenn Sie addHorizontalConstraintsToSuperviewWidth aufrufen. Wenn Sie addHorizontalConstraintsToSuperviewWidth nicht aufrufen, wird jede Vorlage in ihrer Standardgröße gerendert.

GADTSmallTemplateView

Die kleine Vorlage eignet sich ideal für UICollectionView- oder UITableView-Zellen. Sie eignet sich beispielsweise für In-Feed-Anzeigen oder überall dort, wo Sie eine schmale rechteckige Anzeigenansicht benötigen. Die Standardgröße dieser Vorlage ist 91 Punkte hoch und 355 Punkte breit.

GADTMediumTemplateView

Die mittelgroße Vorlage ist für einen 1/2- bis 3/4-Seitenansicht ausgelegt. Das eignet sich gut für Landingpages oder Splashpages, kann aber auch in UITableViews eingefügt werden. Die Standardgröße dieser Vorlage ist 370 Punkte hoch und 355 Punkte breit.

Alle unsere Vorlagen unterstützen das automatische Layout. Du kannst also mit dem Platzieren der Elemente experimentieren. Natürlich können Sie auch den Quellcode und die XIB-Dateien an Ihre Anforderungen anpassen.

Native Anzeigenvorlagen installieren

Um die nativen Vorlagen zu installieren, laden Sie einfach die ZIP-Datei herunter und ziehen Sie sie in Ihr Xcode-Projekt. Setzen Sie ein Häkchen bei Elemente bei Bedarf kopieren.

Vorlagen für native Anzeigen verwenden

Nachdem Sie den Ordner Ihrem Projekt und die relevante Klasse in Ihre Datei hinzugefügt haben, folgen Sie diesem Schema, um eine Vorlage zu verwenden. Die Schrift- und Stileigenschaften lassen sich nur über das Stilwörterbuch ändern. Wir überschreiben derzeit alle Stile, die im XIB selbst festgelegt sind.

Objective-C

/// Step 1: Import the templates that you need.
#import "NativeTemplates/GADTSmallTemplateView.h"
#import "NativeTemplates/GADTTemplateView.h"
...

// STEP 2: Initialize your template view object.
GADTSmallTemplateView *templateView =
    [[NSBundle mainBundle] loadNibNamed:@"GADTSmallTemplateView" owner:nil options:nil]
      .firstObject;

// STEP 3: Template views are just GADNativeAdViews.
_nativeAdView = templateView;
nativeAd.delegate = self;

// STEP 4: Add your template as a subview of whichever view you'd like.
// This must be done before calling addHorizontalConstraintsToSuperviewWidth.
// Please note: Our template objects are subclasses of GADNativeAdView so
// you can insert them into whatever type of view you’d like, and don’t need to
// create your own.
[self.view addSubview:templateView];

// STEP 5 (Optional): Create your styles dictionary. Set your styles dictionary
// on the template property. A default dictionary is created for you if you do
// not set this. Note - templates do not currently respect style changes in the
// xib.

NSString *myBlueColor = @"#5C84F0";
NSDictionary *styles = @{
    GADTNativeTemplateStyleKeyCallToActionFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyCallToActionFontColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyCallToActionBackgroundColor :
        [GADTTemplateView colorFromHexString:myBlueColor],
    GADTNativeTemplateStyleKeySecondaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeySecondaryFontColor : UIColor.grayColor,
    GADTNativeTemplateStyleKeySecondaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyPrimaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyPrimaryFontColor : UIColor.blackColor,
    GADTNativeTemplateStyleKeyPrimaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyTertiaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyTertiaryFontColor : UIColor.grayColor,
    GADTNativeTemplateStyleKeyTertiaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyMainBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyCornerRadius : [NSNumber numberWithFloat:7.0],
};

templateView.styles = styles;

// STEP 6: Set the ad for your template to render.
templateView.nativeAd = nativeAd;

// STEP 7 (Optional): If you'd like your template view to span the width of your
// superview call this method.
[templateView addHorizontalConstraintsToSuperviewWidth];
[templateView addVerticalCenterConstraintToSuperview];

Stil für Wörterbuchschlüssel

Am schnellsten passen Sie Ihre Vorlagen an, indem Sie ein Wörterbuch mit den folgenden Schlüsseln erstellen:

Objective-C

/// Call to action font. Expects a UIFont.
GADTNativeTemplateStyleKeyCallToActionFont

/// Call to action font color. Expects a UIColor.
GADTNativeTemplateStyleKeyCallToActionFontColor;

/// Call to action background color. Expects a UIColor.
GADTNativeTemplateStyleKeyCallToActionBackgroundColor;

/// The font, font color and background color for the first row of text in the
/// template.

/// All templates have a primary text area which is populated by the native ad's
/// headline.

/// Primary text font. Expects a UIFont.
GADTNativeTemplateStyleKeyPrimaryFont;

/// Primary text font color. Expects a UIFont.
GADTNativeTemplateStyleKeyPrimaryFontColor;

/// Primary text background color. Expects a UIColor.
GADTNativeTemplateStyleKeyPrimaryBackgroundColor;

/// The font, font color and background color for the second row of text in the
/// template.

/// All templates have a secondary text area which is populated either by the
/// body of the ad, or by the rating of the app.

/// Secondary text font. Expects a UIFont.
GADTNativeTemplateStyleKeySecondaryFont;

/// Secondary text font color. Expects a UIColor.
GADTNativeTemplateStyleKeySecondaryFontColor;

/// Secondary text background color. Expects a UIColor.
GADTNativeTemplateStyleKeySecondaryBackgroundColor;

/// The font, font color and background color for the third row of text in the
/// template. The third row is used to display store name or the default
/// tertiary text.

/// Tertiary text font. Expects a UIFont.
GADTNativeTemplateStyleKeyTertiaryFont;

/// Tertiary text font color. Expects a UIColor.
GADTNativeTemplateStyleKeyTertiaryFontColor;

/// Tertiary text background color. Expects a UIColor.
GADTNativeTemplateStyleKeyTertiaryBackgroundColor;

/// The background color for the bulk of the ad. Expects a UIColor.
GADTNativeTemplateStyleKeyMainBackgroundColor;

/// The corner rounding radius for the icon view and call to action. Expects an
/// NSNumber.
GADTNativeTemplateStyleKeyCornerRadius;

Häufig gestellte Fragen

Warum erhalte ich eine Ausnahme, wenn ich versuche, das Vorlagenobjekt zu instanziieren?

Das kann passieren, wenn Sie die Größe der Ansicht in der XIB-Datei geändert, aber die Größe des Frames nicht geändert haben, der in der Methode „setup“ der Unterklasse erstellt wurde.

Wie kann ich diese Vorlagen weiter anpassen?

Diese Vorlagen sind nur xibs mit zugehörigen Ansichtsobjekten, wie jede andere xib- und benutzerdefinierte Ansichtsklasse, die Sie möglicherweise aus der iOS-Entwicklung kennen. Wenn Sie Ihre nativen Anzeigen lieber von Grund auf neu erstellen möchten, lesen Sie den Leitfaden für erweiterte native Anzeigen.

Warum werden meine Stile nicht aktualisiert, wenn ich sie im XIB-File festlege?

Aktuell werden alle xib-Stile durch das Standardwörterbuch für Stile in GADTTemplateView.m überschrieben.

Beitragen

Wir haben Vorlagen für native Anzeigen erstellt, damit Sie diese schnell erstellen können. Wir würden uns freuen, wenn Sie zu unserem GitHub-Repository beitragen und neue Vorlagen oder Funktionen hinzufügen. Senden Sie uns eine Pull-Anfrage und wir sehen uns die an.