Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. iOS
Code

Adicionando Propaganda em Banner do AdMob a um App iOS em Swift

by
Difficulty:IntermediateLength:ShortLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Final product image
What You'll Be Creating

Propaganda em banner são fontes importantes de receita para muitos desenvolvedores. Nesse tutorial, aprenderemos como adicionar propaganda da AdMod num app do iOS, usando Swift 3 e Xcode 8.

Criando um ID de Unidade de Banner

Para preparar o app iOS para mostrar o banner é preciso criar uma ID de Unidade no site do AdMob. Se não temos uma conta do Google, é bom criar uma primeiro—é gratuita e dá acesso a todos os serviços do Google.

Ao entrar na página do AdMob, cliquemos no botão vermelho Monetizar Novo App.

AdMob website Home page

Se nosso app não está na iTunes App Store ainda, teremos de Adicionar o App Manualmente. Então, digitemos o nome do aplicativo, escolhamos iOS e cliquemos em Adicionar App.

Start monetizing your app

Na tela seguinte, veremos nosso ID de App do AdMob recém criado, abaixo do ícone verde da Apple. Notemos que isso não é o mesmo que Id de Unidade que precisa ser colado no projeto do Xcode. Chegaremos nessa parte em instantes.

Cliquemos em Banner para selecionar o formato. Sugerimos deixar Tipo de Ad, Atualização Automática e Estilo do Texto do Ad com seus valores padrão. Se quisermos customizar o estilo do Ad, podemos clicar na caixa Padrão e selecionar Customizado. Para um banner customizado, podemos mudar o plano de fundo, bordas, título, texto e cor da URL.

Por fim, digitemos um nome na caixa Nome da unidade de Ad. Isso não será o identificador do baner, mas um nome referência para a ID de Unidade. Cliquemos em Salvar para continuar.

Create a Banner Unit ID

Esse paso é opcional e permite-nos vincular o AdMod app ao Firebase para compartilhar dados da ferramenta de Análise de lá. Por hora, cliquemos em Skip.

Link AdMob to Firebase Analytics optional

Por fim, baixemos o arquivo GoogleMobileAds.framework do servidor do Firebase. Esse quarto passo também nos mostrará um ID de unidade de Ad que colaremos no arquivo .swift principal do projeto no Xcode, como veremos daqui a pouco.

Finish creating your banner ID

Cliquemos em Baixar SDK do Google Mobile Ads. Uma nova aba abrirá no navegador e poderemos baixar o arquivo zip oficial do pacote mais recente.

Download Google Mobile SDK package

Voltemos ao site do AdMob e cliquemos em Pronto. A próxima tela mostrará o ID de unidade Ad recém criado, pronto para ser copiado e colado no arquivo .swift no Xcode. Assumiremos que já criamos um novo projeto no Xcode ou temos nosso próprios que queremos aplicar o AdMob.

Implementando AdMob no Project do Xcode

Extraiamos o googlemobileadssdkios.zip recém baixo do servidor do Firebase, abramos a pasta e copiemos apenas GoogleMobileAds.framework.

Copy GoogleMobileAdsframework

Colemo-no na pasta do projeto.

Paste GoogleMobileAdsframework into your project folder

Agora, acessemos o projeto no Xcode e abramos a aba General, rolemos até embaixo em Linked Frameworks e Library, e arrastemos o arquivo GoogleMobileAds.framework para cá.

Drag GoogleMobileAdsframework into your Xcode window

Talvez tenhamos de adicionar frameworks do iOS extras ao projeto do Xcode para o AdMob receber e mostrar banners no app.

CLiquemos no botão + ao final e importemos os seguintes frameworks, um por um:

  • EventKit
  • EventKitUI
  • AVFoundation
  • AdSupport
  • AudioToolbox
  • AVFoundation
  • CoreGraphics
  • CoreTelephony
  • CoreMedia
  • MessageUI
  • StoreKit
  • SystemConfiguration
Import iOS frameworks in Xcode

O que temos de fazer é ir à aba Build Settings e pesquisar por bitcode. Xcode mostrará a opção Enable Bitcode e podemos configurá-la para No.

Enable Bitcode option set to No

Agora, estamos prontos para criar algum código para fazer a propaganda do AdMon aparecer no app!

O Código

Com base em como o app é construido, quereremos adicionar a propagandar do AdMob nas ViewControllers. Assim, temos de ir ao arquivo .swift do controlador que queremos a propaganda aparecendo e importar os seguintes frameworks ao topo do arquivo.

Adotemos o protocolo GADBannerViewDelegate ao adicioná-lo o final da declaração da clase:

Adicionemos a visão do banner do AdMob logo acima do método viewDidLoad() na classe.

As linhas de código abaixo são uma cadeia de caracteres simples que relembra o ID da unidade Ad que criamos anteriormente.

Teremos de alterar ca-app-pub-9733347540588953/6145924825 com o nosso ID da unidade de banner, assim, voltemos à pagina AdMob Unidades de Ad no navegador para copiá-la novamente colcr o código acima.

Agora, adicionemos as funções ao final de viewDidLoad():

Por fim, colemos a declaração de método a seguir sempre que quisermos um arquivo .swift (antes do colchete fechador da classe e não existe outro método).

Notemos que os banners do AdMob tem tamanhos diferentes de acordo com o aparelho utilizado, assim as primeiras linhas de código da funcinitModBanner() configuram o tamanho deles para iPhone/iPod Touch e iPad.

Se quisermos ver mais o que tem disponível para AdMob ads, podemos ver a documentação do AdMob. De qualquer forma, os melhors tamanhos de banner para iPhone e iPad são as configurados na linha abaixo:

  • 320 x 50 px para iPhones
  • 68 x 60 px para iPads

Modelo do CodeCanyon

No CodeCanyon, vendemos um modelo de app iOs que vem com banners embutidos do AdMob e possui suporte a várias propagandas interticial. Assim, se quisermos acelerar desenvolvimento

AdMob Banner Interstitial ads iOS Universal app template

Encontre-o aqui: iOS AdMob Banner + Interstital Ads Template | Universal (Swift)

Há centenas de modelos do iOS no CodeCanyon. Vejamo-os! Talvez queiramos evitar alguns horas de trabalho no próximo app.

Conclusão

Obrigado pela leitura e nos vemos na próxima! Veja alguns outros cursos e tutoriais sobre desenvolvimento para iOS com Swift.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.