Como monetizar o seu App Xamarin.Forms com AdMob

Neste artigo veremos como monetizar o seu aplicativo Xamarin.Forms, adicionando propaganda com a plataforma AdMob by Google.

Atualmente a AdMob by Google é suportada apenas pelas plataformas Android e iOS.

Criando uma conta na AdMob

É necessário criar uma conta na AdMob, para isso acesse: https://apps.admob.com/signup.

Após criar uma conta, clique em “Primeiros Passos” e crie um novo aplicativo, no término da criação do aplicativo você receberá um Id nesse formato: ca-app-pub-XXXXXXXXXXXXXXXX / XXXXXXXXXX. Guarde esse Id, será utilizado a seguir.

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

Criando um bloco de anúncios

Para este exemplo o bloco escolhido foi o Banner.

1
O processo de criação do bloco de anúncios demora 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.

Para fins de testes, a AdMob fornece alguns anúncios:

Xamarin.Forms

AdMobView

Crie a classe AdMobView com a propriedade AdUnitId do tipo string , como demonstrado a seguir.

using Xamarin.Forms;
namespace DemoAdMob
{
public class AdMobView : View
{
public static readonly BindableProperty AdUnitIdProperty = BindableProperty.Create(
nameof(AdUnitId),
typeof(string),
typeof(AdMobView),
string.Empty);
public string AdUnitId
{
get => (string)GetValue(AdUnitIdProperty);
set => SetValue(AdUnitIdProperty, value);
}
}
}

view raw
AdMobView.cs
hosted with ❤ by GitHub

 

Xaml

No Xaml crie um AdMobView e posicione onde desejar.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:DemoAdMob"
x:Class="DemoAdMob.MainPage">
<StackLayout>
<local:AdMobView x:Name="adMobView"
VerticalOptions="EndAndExpand"/>
</StackLayout>
</ContentPage>

view raw
MainPage.xaml
hosted with ❤ by GitHub

 

 

C#

Para fins apenas de exemplificação esse código foi adicionado no CodeBehind, mas você também pode coloca-lo em uma ViewModel.

Realize a verificação de qual plataforma está sendo utilizada e adicione o Id referente a plataforma na propriedade AdUnitId do AdMobView criado anteriormente.

using Xamarin.Forms;
namespace DemoAdMob
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
BindingContext = this;
if (Device.RuntimePlatform == Device.Android)
adMobView.AdUnitId = "SEU ID ANDROID";
else if (Device.RuntimePlatform == Device.iOS)
adMobView.AdUnitId = "SEU ID iOS";
}
}
}

view raw
MainPage.xaml.cs
hosted with ❤ by GitHub

 

 

Android

Em seu projeto Android, instale o Nuget Package Xamarin.Firebase.Ads.

2

Observação: Instale uma versão anterior da atual, devido a alguma incompatibilidades com a versão do Xamarin.Forms.

 

MainActivity

Na MainActivity inicialize o plugin após “base.OnCreate(bundle)”.

using Android.App;
using Android.Content.PM;
using Android.Gms.Ads;
using Android.OS;
namespace DemoAdMob.Droid
{
[Activity(Label = "DemoAdMob", Icon = "@drawable/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
protected override void OnCreate(Bundle bundle)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
base.OnCreate(bundle);
MobileAds.Initialize(ApplicationContext, "SEU ID ANDROID");
global::Xamarin.Forms.Forms.Init(this, bundle);
LoadApplication(new App());
}
}
}

view raw
MainActivity.cs
hosted with ❤ by GitHub

 

 

Permissões

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

3

 

 

AndroidManifest.xml

Edite o arquivo AndroidManifest.xml e entre as Tags “manifest” adicione a seguinte linha.

<?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.DemoAdMob" android:installLocation="auto">
<uses-sdk android:minSdkVersion="15" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<application android:label="DemoAdMob.Android"></application>
<activity android:name="com.google.android.gms.ads.AdActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize" android:theme="@android:style/Theme.Translucent" />
</manifest>

view raw
AndroidManifest.xml
hosted with ❤ by GitHub

 

AdMobViewRenderer

O último passo para o projeto Android é adicionar um CustomRenderer, para isso crie uma classe chamada “AdMobViewRenderer” como demonstrado a seguir.

using System.ComponentModel;
using DemoAdMob;
using DemoAdMob.Droid;
using Android.Content;
using Android.Gms.Ads;
using Android.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(AdMobView), typeof(AdMobViewRenderer))]
namespace DemoAdMob.Droid
{
public class AdMobViewRenderer : ViewRenderer<AdMobView, AdView>
{
public AdMobViewRenderer(Context context) : base(context) { }
protected override void OnElementChanged(ElementChangedEventArgs<AdMobView> e)
{
base.OnElementChanged(e);
if (e.NewElement != null && Control == null)
{
SetNativeControl(CreateAdView());
}
}
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName == nameof(AdView.AdUnitId))
Control.AdUnitId = Element.AdUnitId;
}
private AdView CreateAdView()
{
var adView = new AdView(Context)
{
AdSize = AdSize.SmartBanner,
AdUnitId = Element.AdUnitId
};
adView.LayoutParameters = new LinearLayout.LayoutParams(LayoutParams.MatchParent, LayoutParams.MatchParent);
adView.LoadAd(new AdRequest.Builder().Build());
return adView;
}
}
}

view raw
AdMobViewRenderer.cs
hosted with ❤ by GitHub

 

iOS

Em seu projeto iOS, instale o Nuget Package  Xamarin.Firebase.iOS.AdMob.

4

 

AppDelegate

No arquivo AppDelegate.cs no método FinishedLaunching inicialize o Nuget Package como demonstrado a seguir.

using Foundation;
using UIKit;
namespace DemoAdMob.iOS
{
// The UIApplicationDelegate for the application. This class is responsible for launching the
// User Interface of the application, as well as listening (and optionally responding) to
// application events from iOS.
[Register("AppDelegate")]
public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
{
//
// This method is invoked when the application has loaded and is ready to run. In this
// method you should instantiate the window, load the UI into it and then make the window
// visible.
//
// You have 17 seconds to return from this method, or iOS will terminate your application.
//
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
Google.MobileAds.MobileAds.Configure("SEU ID iOS");
global::Xamarin.Forms.Forms.Init();
LoadApplication(new App());
return base.FinishedLaunching(app, options);
}
}
}

view raw
AppDelegate.cs
hosted with ❤ by GitHub

 

AdMobViewRenderer

E para finalizar adicione um CustomRenderer, para isso crie uma classe chamada “AdMobViewRenderer” como demonstrado a seguir.

using DemoAdMob;
using DemoAdMob.iOS;
using Google.MobileAds;
using System.ComponentModel;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(AdMobView), typeof(AdMobViewRenderer))]
namespace DemoAdMob.iOS
{
public class AdMobViewRenderer : ViewRenderer<AdMobView, BannerView>
{
protected override void OnElementChanged(ElementChangedEventArgs<AdMobView> e)
{
base.OnElementChanged(e);
if (Control == null)
{
SetNativeControl(CreateBannerView());
}
}
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName == nameof(BannerView.AdUnitID))
Control.AdUnitID = Element.AdUnitId;
}
private BannerView CreateBannerView()
{
var bannerView = new BannerView(AdSizeCons.SmartBannerPortrait)
{
AdUnitID = Element.AdUnitId,
RootViewController = GetVisibleViewController()
};
bannerView.LoadRequest(GetRequest());
Request GetRequest()
{
var request = Request.GetDefaultRequest();
return request;
}
return bannerView;
}
private UIViewController GetVisibleViewController()
{
var windows = UIApplication.SharedApplication.Windows;
foreach (var window in windows)
{
if (window.RootViewController != null)
{
return window.RootViewController;
}
}
return null;
}
}
}

view raw
AdMobViewRenderer.cs
hosted with ❤ by GitHub

Resultado

Screenshot_20180419-130037

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.

icongithub

3 comentários em “Como monetizar o seu App Xamarin.Forms com AdMob

  1. Boa tarde, tenho uma duvida. Em diversos tutoriais é dito que é necessário fazer a mudança no manifest, mas em todos os tutorias o erro é sempre o mesmo falando que é inesperado em manifest e o app nem se quer é aberto. Tentei fazer o passo a passo com você e não funcionou quando tentei usar o projeto no git o erro persiste. A duvida seria se você poderia me explicar como posso estar corrigindo isto

    Curtir

    1. Olá Caio, tudo bem ?

      Grandes chances de esse erro ser por conta de alguma atualização (ou falta dela) no plugin em questão.

      Recomendo você assistir uma playlist do Ione Souza no YouTube, onde eu acredito que o conteudo está recente e provavelmente você não terá esse problema.

      Espero ter ajudado 🙂

      Curtir

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s