Szablony natywne

Wybierz platformę: Android iOS Flutter

Pobieranie szablonów natywnych

Dzięki reklamom natywnym możesz dostosowywać reklamy, co przekłada się na lepsze wrażenia użytkowników. Lepsze wrażenia użytkowników mogą zwiększyć zaangażowanie i poprawić ogólne zyski.

Aby w pełni wykorzystać potencjał reklam natywnych, ważne jest, aby dostosować układy reklam tak, aby stanowiły naturalne rozszerzenie aplikacji. Aby ułatwić Ci rozpoczęcie pracy, utworzyliśmy szablony reklam natywnych.

Szablony natywne to gotowe widoki kodu reklam natywnych, które zostały zaprojektowane z myślą o szybkiej implementacji i łatwej modyfikacji. Dzięki szablonom reklam natywnych możesz wdrożyć pierwszą reklamę natywną w ciągu kilku minut i szybko dostosować jej wygląd bez konieczności pisania dużej ilości kodu. Możesz umieścić te szablony w dowolnym miejscu, np. w widoku TableView używanym w kanale informacyjnym, w oknie dialogowym lub w innym miejscu w aplikacji.

Z tego przewodnika dowiesz się, jak pobrać, uwzględnić i używać szablonów reklam natywnych w aplikacjach na iOS. Zakładamy, że udało Ci się już za pomocą pakietu SDK wczytać reklamę natywną.

Rozmiary szablonów

Dostępne są 2 rozmiary szablonów: mały i średni. Każdy szablon jest reprezentowany przez klasę. Klasy to GADTSmallTemplateView i GADTMediumTemplateView. Obie klasy rozszerzają klasę GADTTemplateView. Oba szablony mają stały współczynnik proporcji, który zostanie przeskalowany tak, aby wypełnić szerokość widoków nadrzędnych, tylko jeśli wywołasz funkcję addHorizontalConstraintsToSuperviewWidth. Jeśli nie wywołasz funkcji addHorizontalConstraintsToSuperviewWidth, każdy szablon będzie renderowany w domyślnym rozmiarze.

GADTSmallTemplateView

Mały szablon jest idealny w przypadku komórek UICollectionView lub UITableView. Możesz go na przykład używać w przypadku reklam In-Feed lub wszędzie tam, gdzie potrzebny jest wąski prostokątny widok reklamy. Domyślny rozmiar tego szablonu to 91 punktów wysokości i 355 punktów szerokości.

GADTMediumTemplateView

Szablon medium powinien zajmować od 1/2 do 3/4 strony. Jest to przydatne w przypadku stron docelowych lub stron wprowadzających, ale można je też umieścić w tagu 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 swobodnie eksperymentować z umiejscowieniem. Możesz też oczywiście zmienić kod źródłowy i pliki xib, aby dostosować je do swoich potrzeb.

Instalowanie szablonów reklam natywnych

Aby zainstalować szablony natywne, pobierz plik ZIP i przeciągnij go do projektu Xcode. Upewnij się, że zaznaczono opcję Copy items if needed (Skopiuj elementy w razie potrzeby).

Korzystanie z szablonów reklam natywnych

Po dodaniu folderu do projektu i uwzględnieniu odpowiedniej klasy w pliku postępuj zgodnie z tą instrukcją, aby użyć szablonu. Pamiętaj, że jedynym sposobem zmiany właściwości czcionki i stylu jest użycie słownika stylów. Obecnie zastępujemy każdy styl ustawiony 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];

Klucze słownika stylów

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 podczas próby utworzenia instancji obiektu szablonu pojawia się wyjątek?
Może się to zdarzyć, jeśli zmienisz rozmiar widoku w pliku xib, ale nie zmienisz rozmiaru ramki utworzonej w metodzie „setup” podklasy.
Jak mogę dodatkowo dostosować te szablony?
Te szablony to po prostu pliki XIB z powiązanymi obiektami widoku, podobnie jak inne pliki XIB i niestandardowe klasy widoku, które możesz znać z programowania na iOS. Jeśli wolisz tworzyć reklamy natywne od zera, zapoznaj się z naszym przewodnikiem po zaawansowanych reklamach natywnych.
Dlaczego style nie są aktualizowane, gdy ustawiam je w pliku XIB?
Obecnie zastępujemy wszystkie style xib domyślnym słownikiem stylów w GADTTemplateView.m.

Publikuj

Przygotowaliśmy szablony reklam natywnych, które pomogą Ci szybko tworzyć takie reklamy. Zachęcamy do dodawania nowych szablonów i funkcji w naszym repozytorium GitHub. Wyślij nam prośbę o pobranie danych, a my ją sprawdzimy.