Defina o estilo dos esquemas de anúncios com modelos nativos

Selecione a plataforma: Android iOS Flutter

Transfira modelos nativos

A utilização de anúncios nativos permite-lhe personalizar os seus anúncios, o que resulta numa melhor experiência do utilizador. As melhores experiências do utilizador podem aumentar a interação e melhorar o seu rendimento geral.

Para tirar o máximo partido dos anúncios nativos, é importante criar um estilo para os esquemas de anúncios de modo a que pareçam uma extensão natural da sua app. Para ajudar a começar, criámos modelos nativos.

Os modelos nativos são visualizações com código completo para os seus anúncios nativos, concebidas para uma implementação rápida e uma modificação fácil. Com os modelos nativos, pode implementar o seu primeiro anúncio nativo em apenas alguns minutos e personalizar rapidamente o aspeto e a funcionalidade sem muito código. Pode colocar estes modelos onde quiser, como numa TableView usada num feed de notícias, numa caixa de diálogo ou em qualquer outro local na sua app.

Este guia mostra-lhe como transferir, incluir e usar modelos nativos nas suas apps iOS. Assume que já usou o SDK com êxito para carregar um anúncio nativo.

Tamanhos de modelos

Existem dois tamanhos de modelos: pequeno e médio. Cada modelo é representado por uma classe. As classes são GADTSmallTemplateView e GADTMediumTemplateView. Ambas as classes estendem GADTTemplateView. Ambos os modelos têm um formato fixo, que é dimensionado para preencher a largura das respetivas visualizações principais apenas se chamar addHorizontalConstraintsToSuperviewWidth. Se não chamar addHorizontalConstraintsToSuperviewWidth, cada modelo apresenta o respetivo tamanho predefinido.

GADTSmallTemplateView

O modelo pequeno é ideal para células UICollectionView ou UITableView. Por exemplo, pode usá-lo para anúncios in-feed ou em qualquer local onde precise de uma visualização de anúncio retangular estreita. O tamanho predefinido deste modelo é 91 pontos de altura por 355 pontos de largura.

GADTMediumTemplateView

O modelo médio destina-se a ser uma visualização de 1/2 a 3/4 de página. É adequado para páginas de destino ou de apresentação, mas também pode ser incluído em UITableViews. O tamanho predefinido deste modelo é 370 pontos de altura por 355 pontos de largura.

Todos os nossos modelos são compatíveis com o esquema automático, por isso, não hesite em experimentar com a colocação. Claro que também pode alterar o código fonte e os ficheiros xib para se adequarem aos seus requisitos.

Instalar os modelos de anúncios nativos

Para instalar os modelos nativos, basta transferir o zip e arrastá-lo para o projeto Xcode. Certifique-se de que seleciona a opção Copiar itens, se necessário.

Usar os modelos de anúncios nativos

Depois de adicionar a pasta ao projeto e incluir a classe relevante no ficheiro, siga estas instruções para usar um modelo. Tenha em atenção que a única forma de alterar as propriedades de tipo de letra e estilo é através do dicionário de estilos. Atualmente, substituímos qualquer estilo definido no próprio 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];

Chaves do dicionário de estilos

A forma mais rápida de personalizar os modelos é criar um dicionário com as seguintes chaves:

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;

Perguntas frequentes

Por que é que recebo uma exceção quando tento criar uma instância do objeto de modelo?
Isto pode acontecer se tiver alterado o tamanho da visualização no ficheiro xib, mas não tiver alterado o tamanho da estrutura criada no método "setup" da subclasse.
Como posso personalizar ainda mais estes modelos?
Estes modelos são apenas xibs com objetos de visualização associados, como qualquer outro xib e classe de visualização personalizada a que possa estar habituado no desenvolvimento para iOS. Se preferir criar os seus anúncios nativos a partir do zero, consulte o nosso guia Native Advanced.
Por que é que os meus estilos não são atualizados quando os defino no xib?
Atualmente, substituímos todos os estilos xib pelo dicionário de estilos predefinidos em GADTTemplateView.m.

Contribuir

Criámos modelos nativos para ajudar a desenvolver anúncios nativos rapidamente. Gostaríamos que contribuísse para o nosso GitHub repositório para adicionar novos modelos ou funcionalidades. Envie-nos um pedido de envio e vamos analisá-lo.