Modelos de anúncios nativos

Fazer o download de modelos nativos

Importante: antes de continuar, saiba como carregar um anúncio nativo. Saiba mais sobre os anúncios nativos no nosso manual sobre anúncios nativos.

Com os anúncios nativos, você pode personalizar seus anúncios, resultando em uma melhor experiência do usuário. Melhores experiências do usuário podem aumentar o engajamento e melhorar seu rendimento geral.

Para aproveitar ao máximo os anúncios nativos, é importante estilizar os layouts dos anúncios de forma que eles pareçam uma extensão natural do seu app. Para ajudar você a começar, criamos Modelos nativos.

Os modelos nativos são visualizações completas de código para seus anúncios nativos, criados para implementação rápida e modificação fácil. Com os modelos nativos, você pode implementar seu primeiro anúncio nativo em poucos minutos e personalizar rapidamente a aparência sem precisar de muito código. Você pode colocar esses modelos em qualquer lugar que quiser, como em uma TableView usada em um feed de notícias, em uma caixa de diálogo ou em qualquer outro lugar no app.

Observação: se você quiser criar seus próprios layouts nativos do zero, volte à documentação Native Advanced.

Este guia mostra como fazer o download, incluir e usar modelos nativos nos seus apps para iOS. Ele pressupõe que você já usou o SDK para carregar um anúncio nativo.

Tamanhos de modelos

Há dois tamanhos de modelo: pequeno e médio. Cada modelo é representado por uma classe. As classes são GADTSmallTemplateView e GADTMediumTemplateView. Ambas as classes estendem GADTTemplateView. Ambos têm uma proporção fixa, que será dimensionada para preencher a largura das visualizações mães somente se você chamar addHorizontalConstraintsToSuperviewWidth. Se você não chamar addHorizontalConstraintsToSuperviewWidth, cada modelo será renderizado no 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 em que precise de uma visualização retangular de anúncio fina. O tamanho padrão desse modelo é de 91 pontos de altura por 355 pontos de largura.

GADTMediumTemplateView

O modelo médio é destinado a uma visualização de 1/2 a 3/4 de página. Isso é bom para páginas de destino ou de abertura, mas 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 oferecem suporte ao layout automático. Então, sinta-se à vontade para experimentar a posição. Claro, você também pode mudar o código-fonte e os arquivos xib para se adequar aos seus requisitos.

Instalação dos modelos de anúncios nativos

Para instalar os modelos nativos, basta fazer o download do arquivo zip e arrastá-lo para o projeto do Xcode. Marque a opção Copiar itens, se necessário.

Como usar os modelos de anúncios nativos

Depois de adicionar a pasta ao projeto e incluir a classe relevante no arquivo, siga este roteiro para usar um modelo. Observe que a única maneira de mudar as propriedades de fonte e estilo é usando o dicionário de estilos. Atualmente, substituimos 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 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 recebo uma exceção quando tento instanciar o objeto de modelo?

Isso pode acontecer se você mudou o tamanho da visualização no arquivo xib, mas não mudou o tamanho do frame criado no método "setup" da subclasse.

Como posso personalizar ainda mais esses modelos?

Esses modelos são apenas xibs com objetos de visualização associados, como qualquer outra classe de visualização e xib que você possa estar acostumado a usar no desenvolvimento para iOS. Se você preferir criar seus anúncios nativos do zero, consulte nosso guia de anúncios nativos avançados.

Por que meus estilos não são atualizados quando eu defini-os no xib?

No momento, substituímos todos os estilos xib pelo dicionário de estilos padrão em GADTTemplateView.m.

Contribuir

Criamos modelos nativos para ajudar você a desenvolver anúncios nativos rapidamente. Gostariamos que você contribuísse com nosso repositório do GitHub para adicionar novos modelos ou recursos. Envie uma solicitação de pull, e vamos analisar.