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

Selecione a plataforma: Android iOS Flutter

Transfira modelos nativos

Com os anúncios nativos, pode personalizar os seus anúncios, o que resulta numa melhor experiência do utilizador. 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 aplicar estilos aos esquemas dos anúncios de forma 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, concebidos 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 sem muito código. Pode colocar estes modelos em qualquer lugar que quiser, como numa TableView usada num feed de notícias, numa caixa de diálogo ou em qualquer outro lugar na sua app.

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

Tamanhos dos 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-se 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 renderiza 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 lugar onde precise de uma vista de anúncio retangular estreita. O tamanho predefinido deste modelo é de 91 pontos de altura por 355 pontos de largura.

GADTMediumTemplateView

O modelo de meio é destinado a ser uma visualização de 1/2 a 3/4 da página. Isto é útil para páginas de destino ou de apresentação, mas também pode ser incluído em UITableViews. O tamanho predefinido deste modelo é de 370 pontos de altura por 355 pontos de largura.

Todos os nossos modelos suportam o esquema automático, por isso, não hesite em experimentar o posicionamento. 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 ficheiro ZIP e arrastá-lo para o seu projeto do 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 seu projeto e incluir a classe relevante no ficheiro, siga esta receita para usar um modelo. Tenha em atenção que a única forma de alterar as propriedades de estilo e tipo de letra é usar o 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 seus 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 motivo recebo uma exceção quando tento instanciar o objeto de modelo?
Isto pode acontecer se tiver alterado o tamanho da vista no ficheiro XIB, mas não tiver alterado o tamanho da moldura 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 que possa estar habituado a usar no desenvolvimento de iOS. Se preferir criar os seus anúncios nativos de raiz, consulte o nosso guia de anúncios nativos avançados.
Por que motivo 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 repositório do GitHub para adicionar novos modelos ou funcionalidades. Envie-nos um pedido de envio e vamos analisá-lo.