Szablony natywne

Pobierz szablony natywne

Ważne: zanim przejdziesz dalej, dowiedz się, jak wczytać reklamę natywną.

Za pomocą reklam natywnych możesz dostosowywać reklamy, aby były bardziej atrakcyjne dla użytkowników. Większa wygoda użytkowników może zwiększyć ich zaangażowanie i ogólny zysk.

Aby w pełni wykorzystać możliwości reklam natywnych, musisz dostosować układy reklam tak, by wyglądały jak naturalne rozszerzenie aplikacji. Na początek stworzyliśmy szablony natywne.

Szablony natywne to widoki z pełnym zakresem kodu dla reklam natywnych, które umożliwiają szybką implementację i łatwą modyfikację. Dzięki szablonom natywnym możesz wdrożyć pierwszą reklamę natywną w ciągu kilku minut i szybko dostosować jej wygląd i styl bez konieczności pisania kodu. Możesz umieścić te szablony w dowolnym miejscu, np. w tabeli TableView używanej w kanale wiadomości, w oknie lub w dowolnym innym miejscu w aplikacji.

Uwaga: jeśli chcesz projektować własne układy natywne od podstaw, wróć do dokumentacji zaawansowanych reklam natywnych.

Z tego przewodnika dowiesz się, jak pobierać szablony natywne, dodawać je do aplikacji na iOS i ich używać. Zakładamy tutaj, że udało Ci się już użyć pakietu SDK do wczytania reklamy natywnej.

Rozmiary szablonów

Szablon ma 2 rozmiary: mały i średni. Każdy szablon jest reprezentowany przez klasę. Zajęcia są GADTSmallTemplateView i GADTMediumTemplateView. Obydwie zajęcia są rozszerzone o GADTTemplateView. Oba szablony mają stały współczynnik proporcji, który będzie skalowany tak, aby wypełnić szerokość ich widoków nadrzędnych tylko wtedy, gdy wywołasz element addHorizontalConstraintsToSuperviewWidth. Jeśli nie wywołasz addHorizontalConstraintsToSuperviewWidth, każdy szablon wyrenderuje swój rozmiar domyślny.

GADTSmallTemplateView

Mały szablon jest idealny dla komórek UICollectionView lub UITableView. Możesz go używać na przykład w reklamach In-Feed lub w innych miejscach, w których potrzebujesz wąskiego prostokątnego widoku reklamy. Domyślny rozmiar tego szablonu to 91 punktów wysokości i 355 punktów szerokości.

GADTMediumTemplateView

Szablon medium powinien obejmować widok stron z 1/2 do 3/4 stron. To dobre rozwiązanie w przypadku stron docelowych lub powitalnych, ale można go też znaleźć w elemencie UITableViews. Domyślny rozmiar tego szablonu to 370 punktów wysokości i 355 punktów szerokości.

Wszystkie nasze szablony obsługują automatyczny układ, więc możesz eksperymentować z miejscami docelowymi. Oczywiście możesz też zmienić kod źródłowy i pliki xib, aby dostosować je do swoich potrzeb.

Instalowanie szablonów reklam natywnych

Aby zainstalować szablony natywne, po prostu pobierz plik zip i przeciągnij go do projektu Xcode. Pamiętaj, by zaznaczyć opcję Skopiuj elementy w razie potrzeby.

Korzystanie z szablonów reklam natywnych

Po dodaniu folderu do projektu i dodaniu do pliku odpowiedniej klasy skorzystaj z tego przepisu, aby użyć szablonu. Jedynym sposobem zmiany właściwości czcionki i stylu jest użycie słownika stylów – obecnie zastępujemy wszystkie style ustawione w pliku Xib.

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

Styl klawiszy słownika

Najszybszym sposobem dostosowania szablonów jest utworzenie słownika z tymi kluczami:

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;

Najczęstsze pytania

Dlaczego pojawia się wyjątek, gdy próbuję utworzyć instancję obiektu szablonu?

Może się tak zdarzyć, jeśli zmienisz rozmiar widoku w pliku Xib, ale nie zmienisz rozmiaru ramki utworzonej w metodzie „setup” podklasy.

Jak mogę jeszcze bardziej dostosować te szablony?

Te szablony to tylko xib z powiązanymi obiektami widoku, tak jak inne klasy XiB i widoków niestandardowych, które znasz z programowania na iOS. Jeśli chcesz utworzyć reklamy natywne od podstaw, przeczytaj nasz przewodnik dla zaawansowanych użytkowników natywnych.

Dlaczego moje style nie są aktualizowane po ustawieniu ich w xib?

Obecnie wszystkie style xib są zastępowane przez słownik domyślnych stylów (GADTTemplateView.m)

Publikuj

Opracowaliśmy szablony natywne, by szybko tworzyć reklamy natywne. Dodając nowe szablony lub funkcje do naszego repozytorium GitHub, zapraszamy do dzielenia się nimi. Wystarczy, że wyślesz do nas prośbę.