Adicionando o Google AdMob* à sua aplicação Cordova*

Se você quiser "servir" publicidade do Google AdMob* como parte da sua app móvel híbrida com HTML5, você vai precisar utilizar um plugin Cordova. Ao contrário da solução para navegadores de desktop, aplicações móveis precisam de um componente de código nativo para obter e mostrar os anúncios em um dispositivo móvel. Nem todos os serviços de publicidade móvel possuem esta restrição, mas se você quer utilizar o Google AdMob você vai precisar de um plugin do Cordova.

Existem diversos plugins do Cordova disponíveis para a entrega de anúncios; alguns servem anúncios de fontes de terceiros e poucos servem anúncios da rede do Google AdMob. Você não é obrigado a utilizar o Google AdMob para servir os anúncios, mas apenas os plugins do Google AdMob serão descritos neste artigo.

O plugin oficial do Google AdMob está disponível em github.com/gooogleadmob. No momento em que este artigo foi escrito, estava disponível apenas para as plataformas Android e iOS. Outro plugin popular para o Google AdMob está disponível em github.com/floatinghotpot/cordova-plugin-admob. O plugin "FloatingHotPot" suporta três plataformas móveis: Android, iOS e Windows Phone. Plugins adicionais para publicidade podem ser encontrados através de uma busca no Registro de Plugins do Cordova ou no PlugReg (um registro independente de plugins do Cordova), ou simplesmente através de uma busca na web por "mobile ad services".

Detalhes sobre como utilizar o sistema AdMob como forma de monetização estão disponíveis nas páginas de suporte do AdMob.

Antes que você possa servir qualquer anúncio do AdMob, você precisa de uma conta no AdMob que pode ser criada em www.admob.com. Não existe nenhum custo associado a criação da conta, ou para apresentar os anúncios dentro da sua app. Se você já possui uma conta no AdMob, tudo o que você vai precisar fazer para usar o Google AdMob Plugin é criar os IDs Ad Unit apropriados que identificam as impressões de seus anúncios, e fornecê-los como parte da sequencia de inicialização da API do AdMob dentro da sua aplicação. Uma tela capturada da ferramenta do AdMob que você usa para criar o Ad Unit ID é mostrada abaixo.

IMPORTANTE: cada aplicação precisa ter seu próprio conjunto de IDs Ad Unit! Se você ainda não tem uma app na loja de apps, você pode utilizar o método "manual" para identificar a sua app para obter os seus IDs Ad Unit.

O repositório do Google AdMob plugin no github inclui diversos exemplos que podem te ajudar a entender como incluir os anúncios em sua app. O exemplo mais simples é um arquivo index.html localizado no repositório do plugin para o PhoneGap, que é uma app de um único arquivo. Se você quiser criar um exemplo no Intel XDK baseado neste exemplo do PhoneGap, siga estes passos:

Vá até a aba "Projects".
Selecione "Start a New Project" na parte de baixo esquerda da tela.
Selecione "Start with a Blank Project."
Substitua o arquivo index.html padrão no seu novo projeto com o conteúdo do exemplo referenciado acima.
Conecte seus IDs Ad Unit (um para um anúncio "banner" e outro para um anúncio "interstitial") nos locais apropriados no código de exemplo, e salve o arquivo index.html.

Finalmente, vá até a aba "Projects" e utilize o "Get Plugin from the Web" no painel "Third-Party Plugins". Veja a captura de tela no final deste artigo e consulte o artigo Adicionando Plugins de Terceiros à sua App Cordova do Intel® XDK para mais detalhes sobre a utilização de plugins em suas apps Cordova.

NOTA: como sua aplicação de testes inclui um plugin de terceiros, ela somente será executada em um dispositivo real. Você deve utilizar a aba "Build" para criar um APK (para o Android) ou um IPA (para o iOS) para poder executar a sua aplicação. Se você tentar executar esta app usando as abas "Emulate", "Test" ou "Debug", o AdMob irá falhar.

Como esta app utiliza um plugin do Cordova, ela pode apenas ser compilada usando o Cordova. Se você tenar utilizar o build "legado", a app não vai funcionar.