Guia de layout do anúncio do Audience Network no iOS

Quando um anúncio está visível na tela, não é recomendado manter parte do anúncio coberto por barras de navegação, barras de abas, barras de ferramentas e outras visualizações anteriores. O exemplo abaixo à esquerda mostra um anúncio exibido no topo da tela do iPhone X e parcialmente coberto pela borda superior. Já o exemplo à direita mostra um melhor design, com espaço adequado entre a borda superior da tela do iPhone X e a visualização do anúncio.

No iOS 11 e nas versões posteriores, há um novo guia de layout, o safeAreaLayoutGuide, que será usado para definir uma região segura para desenhar seu conteúdo do app, incluindo o anúncio que você deseja renderizar na tela. A região segura é definida pela caixa de borda verde do exemplo acima. Com esse novo guia, vamos conferir o passo a passo de uma implementação técnica da renderização de um anúncio nativo no seu app. É possível aplicar o mesmo método para renderizar anúncios em banner.

Pré-requisitos

Conclua os exemplos de anúncio nativo, anúncio em banner nativo ou anúncio em banner.

iOS 11+: Guia de layout de área segura

Versões anteriores do iOS: Guia de layout superior e inferior

iOS 11+: Guia de layout de área segura

1. Se o seu app usa o Interface Builder com o Xcode 9 ou posterior e deseja criar conteúdo para o iOS 11 ou posterior, você precisará habilitar os guias de layout de área segura. Abra o Interface Builder e clique em "View Controller Scene" (Visualizar cena do controlador). À direita, você verá as opções de "Interface Builder Document" (Documento do Interface Builder). Marque a opção Use Safe Area Layout Guide (Usar guia de layout de área segura).
   
   
2. Selecione "Ad UI View" (Visualização da interface do usuário do anúncio) em "View Controller Scene" (Visualizar cena do controlador) e navegue até "Size Inspector" (Inspetor de tamanho). Adicione espaçamento à esquerda, à direita, à parte superior e à parte inferior entre o layout de segurança e forneça valores de espaçamento ideais conforme exibido a seguir:
   
   
3. Compile e execute seu app. Você verá que o anúncio exibido na tela tem um espaço ideal entre a borda arrendondada, os sensores e a barra de status na tela.
   
   

Versões anteriores do iOS: Guia de layout superior e inferior

1. Para oferecer compatibilidade com versões anteriores ao iOS 11, use o guia de layout superior e inferior para resolver o problema da área segura. Verifique se os guias de layout superior e inferior foram incluídos em "View Controller Scene" (Visualizar cena do controlador) conforme exibido a seguir:
   
   
2. Selecione "Ad UI View" (Visualização da interface do usuário do anúncio) em "View Controller Scene" (Visualizar cena do controlador) e navegue até "Size Inspector" (Inspetor de tamanho). Adicione espaçamento superior e inferior entre o layout superior e inferior e forneça valores de espaçamento ideais conforme exibido a seguir:
   
   

Conformidade com a Política de Anúncios Nativos

Para criar um produto de qualidade, os desenvolvedores devem seguir a Política do Audience Network da Meta sempre que implementarem o layout de anúncio nativo ou de anúncio em banner nativo. É necessário permitir que os usuários tenham controle total para clicar. Especialmente no caso dos elementos clicáveis no seu anúncio, você deve garantir que somente os títulos, URLs, chamadas para a ação e ativos de imagem do anúncio sejam clicáveis. Além disso, os espaços em branco no texto do título ou nas visualizações de imagem não podem ser clicáveis.

Mau exemplo de elementos clicáveis

Sempre que você criar seu layout para anúncio nativo ou anúncio em banner nativo, não use largura e altura fixas no UILabel para evitar white space no título do anúncio, no corpo do anúncio, no contexto social do anúncio e na etiqueta de patrocínio do anúncio. Veja abaixo um mau exemplo do que não deve ser feito:

Bom exemplo de elementos clicáveis

Para gerar um anúncio nativo de qualidade, crie um layout com limitação dinâmica para anúncios nativos e anúncios em banner nativo. Por exemplo, se você está usando um layout automático de roteiros, use Trailing Space >= x em vez de Trailing Space = x ou Width <= y em vez de Width = y. Veja abaixo a aparência do layout ao seguir a Política do Audience Network da Meta: