Native Vorlagen

Native Vorlagen herunterladen

Mit nativen Anzeigen können Sie Ihre Anzeigen anpassen und so die Nutzererfahrung verbessern. Eine bessere Nutzererfahrung kann zu mehr Interaktionen und einem höheren Gesamtertrag führen.

Damit Sie native Anzeigen optimal nutzen können, sollten Sie Ihre Anzeigenlayouts so gestalten, dass sie wie eine natürliche Erweiterung Ihrer App wirken. Um Ihnen den Einstieg zu erleichtern, haben wir native Vorlagen erstellt.

Native Vorlagen sind Code-vollständige Ansichten für native Anzeigen, die für eine schnelle Implementierung und einfache Änderungen konzipiert sind. Mit nativen Vorlagen können Sie Ihre erste native Anzeige in wenigen Minuten implementieren und das Design schnell und ohne viel Code anpassen. Sie können diese Vorlagen an einer beliebigen Stelle platzieren, z. B. in einer TableView, die in einem Nachrichtenfeed verwendet wird, in einem Dialogfeld oder an einer anderen Stelle in Ihrer App.

In diesem Leitfaden erfahren Sie, wie Sie native Vorlagen herunterladen, einschließen und in Ihren iOS-Apps verwenden. Dabei wird davon ausgegangen, dass Sie das SDK bereits erfolgreich zum Laden einer nativen Anzeige verwendet haben.

Vorlagengrößen

Es gibt zwei Vorlagengrößen: klein und mittel. Jede Vorlage wird durch eine Klasse repräsentiert. 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 ist ideal für UICollectionView- oder UITableView-Zellen. Sie können es beispielsweise für In-Feed-Anzeigen oder überall dort verwenden, wo Sie eine schlanke rechteckige Anzeigenansicht benötigen. Die Standardgröße dieser Vorlage ist 91 Punkte hoch und 355 Punkte breit.

GADTMediumTemplateView

Die mittlere Vorlage ist ein 1/2- bis 3/4-Seitenaufruf. Das eignet sich gut für Landingpage- oder Splash-Seiten, kann aber auch in UITableViews aufgenommen werden. Die Standardgröße dieser Vorlage ist 370 Punkte hoch und 355 Punkte breit.

Alle unsere Vorlagen unterstützen das Auto-Layout. Experimentieren Sie also einfach mit Placements. Natürlich können Sie auch den Quellcode und die xib-Dateien Ihren Anforderungen entsprechend ändern.

Vorlagen für native Anzeigen installieren

Um die nativen Vorlagen zu installieren, laden Sie einfach die ZIP-Datei herunter und ziehen Sie sie in Ihr Xcode-Projekt. Klicken Sie auf das Kästchen Elemente bei Bedarf kopieren.

Vorlagen für native Anzeigen verwenden

Nachdem Sie den Ordner Ihrem Projekt hinzugefügt und die relevante Klasse in Ihre Datei aufgenommen haben, folgen Sie diesem Schema, um eine Vorlage zu verwenden. Beachten Sie, dass Schriftart- und Stileigenschaften nur über das Stilwörterbuch geändert werden können. Derzeit werden alle Stile überschrieben, die in der 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

Der schnellste Weg, Ihre Vorlagen anzupassen, besteht darin, ein Wörterbuch mit den folgenden Schlüsseln zu 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 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 verknüpften Ansichtsobjekten, wie alle anderen xib- und benutzerdefinierten Ansichtsklassen, die Sie möglicherweise aus der iOS-Entwicklung kennen. Wenn Sie native Anzeigen komplett neu erstellen möchten, finden Sie entsprechende Informationen in unserem Leitfaden für erweiterte native Anzeigen.
Warum werden meine Stile nicht aktualisiert, wenn ich sie in der xib festlege?
Aktuell werden alle xib-Stile durch das Standardwörterbuch für Stile in GADTTemplateView.m überschrieben.

Beitragen

Wir haben native Vorlagen entwickelt, mit denen Sie native Anzeigen schnell entwickeln können. Wir würden uns freuen, wenn Sie zu unserem GitHub beitragen, um neue Vorlagen oder Features hinzuzufügen. Senden Sie uns eine Pull-Anfrage und wir sehen uns das an.