Native Vorlagen

Plattform auswählen:Android iOS Flutter

Native Vorlagen herunterladen

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 TableView, die in einem Newsfeed verwendet wird, in einem Dialogfeld oder an einer anderen Stelle in Ihrer App.

In diesem Leitfaden erfahren Sie, wie Sie native Vorlagen in Ihre iOS-Apps herunterladen, einfügen und verwenden. Dabei wird davon ausgegangen, dass Sie das SDK bereits erfolgreich zum Laden einer Native Ad verwendet 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 skaliert wird, um die Breite der übergeordneten Ansichten auszufüllen, wenn Sie addHorizontalConstraintsToSuperviewWidth aufrufen. Wenn Sie addHorizontalConstraintsToSuperviewWidth nicht aufrufen, wird für jede Vorlage die Standardgröße gerendert.

GADTSmallTemplateView

Die kleine Vorlage ist ideal für UICollectionView- oder UITableView-Zellen. Sie können sie beispielsweise für In-Feed-Anzeigen oder überall dort verwenden, wo Sie eine dünne rechteckige Anzeigenansicht benötigen. Die Standardgröße dieser Vorlage beträgt 91 Punkte in der Höhe und 355 Punkte in der Breite.

GADTMediumTemplateView

Die mittlere Vorlage ist für eine Ansicht von einer halben bis zu drei Vierteln einer Seite vorgesehen. Das ist gut für Landingpages oder Splash-Pages, kann aber auch in UITableViews enthalten sein. Die Standardgröße dieser Vorlage beträgt 370 Punkte in der Höhe und 355 Punkte in der Breite.

Alle unsere Vorlagen unterstützen das automatische Layout. Sie können also mit der Platzierung experimentieren. Sie können den Quellcode und die XIB-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 und ziehen Sie sie in Ihr Xcode-Projekt. Achten Sie darauf, dass Sie Elemente bei Bedarf kopieren auswählen.

Native Anzeigenvorlagen verwenden

Nachdem Sie den Ordner Ihrem Projekt hinzugefügt und die entsprechende Klasse in Ihre Datei aufgenommen haben, folgen Sie dieser Anleitung, um eine Vorlage zu verwenden. Schriftart- und Stileigenschaften können nur über das Stile-Dictionary geändert werden. Derzeit werden alle im XIB festgelegten Stile überschrieben.

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];

Schlüssel für das Stildictionary

Am schnellsten passen Sie Ihre Vorlagen an, indem Sie ein Dictionary 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 haben, aber nicht die Größe des Frames, 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 jedes andere XIB und jede benutzerdefinierte Ansichtsklasse, die Sie möglicherweise aus der iOS-Entwicklung kennen. Wenn Sie native Anzeigen lieber von Grund auf erstellen möchten, finden Sie hier einen Leitfaden.
Warum werden meine Formatierungen nicht aktualisiert, wenn ich sie im XIB festlege?
Derzeit überschreiben wir alle XIB-Stile mit dem Standardstile-Dictionary in GADTTemplateView.m.

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.