Ta strona została przetłumaczona przez Cloud Translation API.

Szablony reklam natywnych

Reklamy natywne można dostosowywać w taki sposób, aby zwiększyć wygodę użytkowników. Lepsze wrażenia użytkowników mogą zwiększyć ich zaangażowanie i ogólne zyski.

Aby w pełni korzystać z możliwości reklam natywnych, zadbaj o to, aby ich układy wyglądały jak naturalne przedłużenie Twojej aplikacji. Aby Ci to ułatwić, przygotowaliśmy szablony natywne.

Szablony natywne to widoki pełnego kodu reklam natywnych, które umożliwiają szybką implementację i łatwą modyfikację. Dzięki szablonom natywności możesz wdrożyć pierwszą reklamę natywną w zaledwie kilka minut i szybko dostosować jej wygląd i wygląd bez konieczności pisania dużej ilości kodu. Szablony możesz umieszczać w dowolnym miejscu, np. w widoku TableView używanym w kanale wiadomości, w oknie lub w innym miejscu w aplikacji.

Z tego przewodnika dowiesz się, jak pobrać szablony natywne oraz jak ich używać w aplikacjach na iOS. Zakładamy, że pakiet SDK został już użyty do załadowania reklamy natywnej.

Rozmiary szablonów

Są 2 rozmiary szablonów: mały i średni. Każdy szablon jest reprezentowany przez klasę. Klasy to GADTSmallTemplateView i GADTMediumTemplateView. Obie klasy obejmują zakres GADTTemplateView. Obie te szablony mają stały współczynnik proporcji, który będzie skalowany do szerokości 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 swoim domyślnym rozmiarze.

GADTSmallTemplateView

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

GADTMediumTemplateView

Szablon medium jest przeznaczony do wyświetlania strony w powiększeniu od 1/2 do 3/4. Jest to przydatne na stronach docelowych lub stronach powitalnych, 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ą automatyczne układanie, więc możesz eksperymentować z rozmieszczeniem. 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, aby zaznaczyć pole Skopiuj elementy w razie potrzeby.

Korzystanie z szablonów reklam natywnych

Po dodaniu folderu do projektu i dołączeniu odpowiedniej klasy do 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 wszystkie style ustawione w interfejsie 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 na dostosowanie 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ę tak zdarzyć, jeśli zmienisz rozmiar widoku w pliku XIb, ale nie zmienisz rozmiaru ramki utworzonej w metodzie „setup” klasy podrzędnej.
Jak mogę dodatkowo dostosować te szablony?: Te szablony to tylko pakiety Xib z powiązanymi obiektami widoku, jak wszystkie pozostałe klasy widoków Xib i niestandardowe, z których możesz korzystać na etapie programowania na iOS. Jeśli wolisz tworzyć reklamy natywne od podstaw, przeczytaj nasz przewodnik dotyczący zaawansowanych reklam natywnych.
Dlaczego style nie są aktualizowane, gdy ustawiam je w pliku xib?: Obecnie wszystkie style xib są zastępowane przez domyślny słownik stylów w GADTTemplateView.m.

Publikuj

Aby ułatwić Ci szybkie tworzenie reklam natywnych, opracowaliśmy szablony natywne. Zachęcamy do dodawania nowych szablonów i funkcji do repozytorium GitHub. Wyślij nam prośbę o pobranie danych, a my ją sprawdzimy.