Szablony reklam natywnych

Wybierz platformę: Android iOS Flutter

Pobieranie szablonów reklam natywnych

Za pomocą reklam natywnych możesz dostosowywać swoje 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, warto dostosować układy reklam tak, by stanowiły naturalne rozszerzenie aplikacji. Aby ułatwić Ci rozpoczęcie pracy, utworzyliśmy szablony reklam natywnych.

Szablony reklam natywnych 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ą taką reklamę 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 obiekcie TableView używanym w kanale informacyjnym, w oknie dialogowym lub w innym miejscu w aplikacji.

Z tego przewodnika dowiesz się, jak pobrać szablony reklam natywnych i zastosować je w aplikacjach na iOS. Zakładamy przy tym, że reklama natywna została już wczytana przy użyciu pakietu SDK.

Rozmiary szablonów

Dostępne są 2 rozmiary szablonów: mały i średni. Każdy szablon jest reprezentowany przez klasę. Te klasy to GADTSmallTemplateViewGADTMediumTemplateView. Obie klasy stanowią rozszerzenie klasy GADTTemplateView. Oba szablony mają stały format obrazu, który zostanie przeskalowany tak, aby wypełnić szerokość widoków nadrzędnych, tylko wtedy, gdy 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 i UITableView. Możesz go na przykład używać w przypadku reklam In-Feed lub wszędzie tam, gdzie 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 średni powinien zajmować od 1/2 do 3/4 strony. Jest on przydatny w przypadku stron docelowych lub powitalnych, ale można go też umieścić w obiekcie UITableViews. Domyślny rozmiar tego szablonu to 370 punktów wysokości i 355 punktów szerokości.

Wszystkie nasze szablony obsługują układ automatyczny, dzięki czemu możesz swobodnie eksperymentować z ich 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 reklam natywnych, pobierz plik ZIP i przeciągnij go do projektu Xcode. Upewnij się, że zaznaczona jest opcja 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 tym przepisem, 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 youd like, and dont 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 dostosowywania 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, podobne do innych plików xib i niestandardowych klas 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, aby pomóc Ci szybko tworzyć takie reklamy. Zachęcamy do dodawania nowych szablonów i funkcji w naszym repozytorium GitHub. Wyślij nam żądanie pull, a chętnie się z nimi zapoznamy.