Monetizando seu APP Xamarin.Forms com AdMob

Olá pessoal, tudo bem?
Após algumas pesquisas e muito estudo, vou mostrar neste artigo como monetizar o seu aplicativo Xamarin.Forms, com propagandas utilizando a plataforma AdMob by Google.

Vale ressaltar que atualmente a AdMob by Google é suportada apenas pelas plataformas Android e iOS.

O que você vai ver neste artigo:
– Criar Uma Conta na Admob para inserir anúncios em seu App Xamarin.Forms.
– Criar Bloco de anúncios na AdMob.
– Dar Permissões ao seu aplicativo.
– Instalar plugin MarcTron.Admob.
– Editar Arquivo AndroidManifest.xml.
– Editar/Adicionar o nameSpace a view desejada.
– Apresentar o anúncio em seu APP.
– Ver o resultado final.

Criar uma conta na AdMob

Será necessário criar uma conta na AdMob, no endereço: https://apps.admob.com/signup.
Após criar uma conta, clique em “Primeiros Passos” e crie um novo aplicativo, após a criação do aplicativo você receberá dois IDS nestes formatos: 
ca-app-pub-XXXXXXXXXXXXXXXX ~ XXXXXXXXXX. Este chamaremos de ID do Aplicativo
ca-app-pub-XXXXXXXXXXXXXXXX / XXXXXXXXXX. Este chamaremos de ID do Anúncio
Dica: Salve estes IDS em um arquivo .txt que iremos utilizá-los mais à frente.

Observação: É necessário um ID para Android e outro para iOS, então você precisará criar dois aplicativos na AdMob.

Criar o bloco de anúncios

Vamos utilizar como exemplo o bloco de anúncios do tipo Banner.

A criação do bloco de anúncios pode demorar um tempo, então pode ser que você receba a seguinte mensagem de erro: “Ocorreu um problema ao obter uma resposta do anúncio. ErrorCode: 0 Falha ao carregar o anúncio: 0“. Não se preocupe, isso significa que o bloco de anúncios ainda está em processo de criação.

Agora Que já fizemos a parte burocrática do negócio vamos para o código.

Permissões

Acesse as propriedades do projeto Android, na aba Android Manifest adicione as seguintes permissões (ACCESS_NETWORK_STATE e INTERNET).

Plugin – MarcTron.Admob

Instale o plugin “MarcTron.Admob” para todos os projetos. Para isso basta ir na sua Solution, clicar com o botão direito do mouse e escolher a opção Manage Nuget Packages for Solution. Escolha a guia Browse e no campo de pesquisa digite MarcTron que o plugin irá aparecer para ser instalado.

AndroidManifest.xml

Vamos editar o arquivo AndroidManifest.xml, ele se encontra no projeto .Android, dentro de Properties.
iremos adicionar a seguinte linha de código entre as Tags <application></application>:

<meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX"></meta-data>

Repare que em android:value inserimos o ID do Aplicativo.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="com.companyname.xamarinmarctronadsapp">
   <uses-sdk android:minSdkVersion="21" android:targetSdkVersion="28" /><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
   <application android:label="NomedomeuApp.Android" android:theme="@style/MainTheme">
   <!--Insira seu id do admob aqui nesta linha-->
   <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX"></meta-data> </application>
</manifest>

NameSpace

Falta muito pouco!
Vá até a View que apresentará o anúncio e insira o código a seguir:

xmlns:controls="clr-namespace:MarcTron.Plugin.Controls;assembly=Plugin.MtAdmob"

Veja como deve ficar:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   x:Class="NomedomeuApp.Views.AboutPage"
   xmlns:vm="clr-namespace:NomedomeuApp.ViewModels"
   xmlns:controls="clr-namespace:MarcTron.Plugin.Controls;assembly=Plugin.MtAdmob">
   <StackLayout>
      .....
   </StackLayout>
</ContentPage>

Apresentando o anuncio

O código a seguir é o que de fato insere o anuncio do AdMob em seu aplicativo Xamarin.Forms, repare que é neste ponto que você deve inserir o ID do Anuncio. Então basta escolher a view onde deseja apresentar o anúncio e inserir o código abaixo.

<StackLayout HorizontalOptions="EndAndExpand">
   <controls:MTAdView x:Name="myAds" IsVisible="true" PersonalizedAds="true" AdsId="ca-app-pub-XXXXXXXXXXXXXXXX/XXXXXXXXXX" VerticalOptions="EndAndExpand" >
      <controls:MTAdView.HeightRequest>
         <x:OnIdiom>
            <x:OnIdiom.Phone>50</x:OnIdiom.Phone>
            <x:OnIdiom.Tablet>90</x:OnIdiom.Tablet>
            <x:OnIdiom.Desktop>90</x:OnIdiom.Desktop>
         </x:OnIdiom>
      </controls:MTAdView.HeightRequest>
   </controls:MTAdView>
</StackLayout>

Resultado

Vale ressaltar que o anúncio aparecerá somente se você não deixar nenhuma pendência na sua conta do AdMob, como por exemplo seus dados de pagamento, dados estes que serão obrigatórios para poder receber os ganhos com a monetização do seu app Xamarin.Forms e AdMob by Google.

Espero que gostem deste artigo! Até a próxima…