Как задавать стиль макетов объявлений с помощью нативных шаблонов

Выберите платформу: iOS Flutter Android (устаревшая версия)

Скачать шаблоны нативных объявлений

Нативные объявления можно настраивать, чтобы они были удобнее для пользователей. Это повышает вовлеченность пользователей и ваш доход.

Чтобы нативные объявления были максимально эффективными, важно оформить их макеты так, чтобы они выглядели как естественное продолжение вашего приложения. Для этого мы создали нативные шаблоны.

Нативные шаблоны – это готовые представления для нативных объявлений, которые можно быстро внедрить и легко изменить. С помощью шаблонов нативных объявлений вы можете создать свое первое нативное объявление всего за несколько минут и быстро настроить его внешний вид без написания большого объема кода. Шаблоны можно размещать в любом месте приложения, например в TableView в ленте новостей или в диалоговом окне.

В этом руководстве рассказывается, как скачать, добавить и использовать нативные шаблоны в приложениях для iOS. Предполагается, что вы уже успешно использовали SDK для загрузки нативного объявления.

Размеры шаблонов

Доступны два размера шаблонов: маленький и средний. Каждый шаблон представлен классом. Классы: GADTSmallTemplateView и GADTMediumTemplateView. Оба класса расширяют GADTTemplateView. Оба шаблона имеют фиксированное соотношение сторон, которое будет масштабироваться для заполнения ширины родительских представлений, только если вы вызовете addHorizontalConstraintsToSuperviewWidth. Если вы не вызовете addHorizontalConstraintsToSuperviewWidth, каждый шаблон будет отображаться в размере по умолчанию.

GADTSmallTemplateView

Маленький шаблон идеально подходит для ячеек UICollectionView или UITableView. Например, его можно использовать для объявлений в фиде или в любом другом месте, где требуется тонкий прямоугольный рекламный блок. Размер по умолчанию для этого шаблона – 91 пункт в высоту и 355 пунктов в ширину.

GADTMediumTemplateView

Средний шаблон занимает от половины до трех четвертей страницы. Это удобно для целевых или заставочных страниц, но также может быть включено в UITableViews. Размер по умолчанию для этого шаблона – 370 пунктов в высоту и 355 пунктов в ширину.

Все наши шаблоны поддерживают автоматическую разметку, поэтому вы можете экспериментировать с размещением. Вы также можете изменить исходный код и файлы xib в соответствии со своими требованиями.

Установка шаблонов нативных объявлений

Чтобы установить нативные шаблоны, скачайте ZIP-архив и перетащите его в проект Xcode. Установите флажок Copy items if needed (При необходимости скопировать объекты).

Как использовать шаблоны нативных объявлений

Добавив папку в проект и включив нужный класс в файл, выполните следующие действия: Обратите внимание, что изменить шрифт и стиль можно только с помощью словаря стилей. В настоящее время мы переопределяем любой стиль, заданный в самом файле 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];

Ключи словаря стилей

Самый быстрый способ настроить шаблоны – создать словарь со следующими ключами:

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;

Часто задаваемые вопросы

Почему при попытке создать экземпляр объекта шаблона возникает исключение?
Это может произойти, если вы изменили размер представления в файле XIB, но не изменили размер фрейма, созданного в методе setup подкласса.
Как настроить эти шаблоны?
Эти шаблоны представляют собой файлы XIB со связанными объектами просмотра, как и любые другие файлы XIB и классы пользовательских представлений, которые вы могли использовать при разработке для iOS. Если вы хотите создать нативное объявление с нуля, ознакомьтесь с руководством по расширенным нативным объявлениям.
Почему стили не обновляются, когда я задаю их в xib-файле?
В настоящее время мы переопределяем все стили xib с помощью словаря стилей по умолчанию в GADTTemplateView.m.

Впечатления

Чтобы вам было проще создавать нативные объявления, мы разработали шаблоны. Вы можете добавлять новые шаблоны и функции в наш репозиторий GitHub. Отправьте нам pull-запрос, и мы его рассмотрим.