Modelos de anúncios nativos

Selecione a plataforma: Android iOS Flutter

Fazer o download de modelos nativos

Com os anúncios nativos, você pode personalizar sua publicidade e oferecer uma experiência melhor aos usuários, o que aumenta o engajamento e seu rendimento geral.

Para aproveitar ao máximo os anúncios nativos, estilize seus layouts para que pareçam uma extensão natural do app. Criamos modelos nativos para ajudar você a começar.

Esses modelos são visualizações completas de código para seus anúncios nativos, projetados para implementação rápida e modificação fácil. Com eles, é possível implementar seu primeiro anúncio nativo em apenas alguns minutos e personalizá-lo rapidamente sem muita programação. Você decide onde colocar o anúncio: em uma visualização de tabela usada em um feed de notícias, em uma caixa de diálogo ou em qualquer outro lugar do app.

Neste guia, mostramos como baixar, incluir e usar modelos nativos nos seus apps iOS. Você precisa já ter usado o SDK para carregar um anúncio nativo.

Tamanhos de modelo

Há dois tamanhos de modelo: pequeno e médio. Cada um é representado por uma classe, que são GADTSmallTemplateView e GADTMediumTemplateView. As duas classes estendem GADTTemplateView. Os dois modelos têm uma proporção fixa, que é dimensionada para preencher a largura das visualizações principais somente se você chamar addHorizontalConstraintsToSuperviewWidth. Se você não chamar addHorizontalConstraintsToSuperviewWidth, cada modelo vai renderizar o tamanho padrão.

GADTSmallTemplateView

O modelo pequeno é ideal para células UICollectionView ou UITableView. Por exemplo, você pode usá-lo para anúncios in-feed ou em qualquer lugar que precise de uma visualização retangular fina. O tamanho padrão desse modelo é de 91 pontos de altura por 355 pontos de largura.

GADTMediumTemplateView

O modelo médio foi criado para ser uma visualização de meia página ou de três quartos de página. Isso é bom para páginas de destino ou iniciais, mas ele também pode ser incluído em UITableViews. O tamanho padrão desse modelo é de 370 pontos de altura por 355 pontos de largura.

Todos os nossos modelos são compatíveis com o layout automático, então fique à vontade para testar o posicionamento. É claro que você também pode mudar o código-fonte e os arquivos xib para atender aos seus requisitos.

Como instalar os modelos de anúncios nativos

Para instalar os modelos nativos, baixe o arquivo ZIP e arraste-o para o projeto do Xcode. Confira se a opção Copy items if needed está marcada.

Como usar os modelos de anúncios nativos

Depois de adicionar a pasta ao projeto e incluir a classe relevante no arquivo, siga estas etapas para usar um modelo. A única maneira de mudar as propriedades de fonte e estilo é usando o dicionário de estilos. No momento, 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 estilo

A maneira mais rápida de personalizar seus modelos é criando 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 recebo uma exceção quando tento instanciar o objeto de modelo?
Isso pode acontecer se você tiver mudado o tamanho da visualização no arquivo xib, mas não tiver alterado o tamanho do frame criado no método "setup" da subclasse.
Como posso personalizar ainda mais esses modelos?
Eles são apenas arquivos xib com objetos de visualização associados, como qualquer outro xib e classe de visualização personalizada que você talvez já tenha usado no desenvolvimento para iOS. Se preferir criar seus anúncios nativos do zero, consulte nosso Guia do formato nativo avançado.
Por que meus estilos não atualizam quando são definidos no arquivo xib?
No momento, substituímos todos os estilos xib pelo dicionário de estilos padrão em GADTTemplateView.m.

Contribuir

Criamos os modelos nativos para ajudar você a desenvolver anúncios nativos rapidamente. Gostaríamos que você contribuísse com nosso repositório do GitHub adicionando novos modelos ou recursos. Envie uma solicitação de pull para que possamos analisar.