Banners ads con Xamarin.Forms & CustomRenders

Mis compañeros de Pasiona Joan Isaac y Joan Caparrós están trabajando duro en el proyecto con Xamarin.Forms y han querido aportar su granito de arena explicando como agregar publicidad en nuestras app. Esta opción no está ni siquiera en ingles y por eso los he animado ha escribir el artículo. Espero que no sea el último.

Antes de encontrar la solución se realizó una búsqueda para encontrar la mejor solución y que fuese lo más adaptable posible. Decidimos tratar de integrar los anuncios a través de Customs Renderers.

Este método permite poner el anuncio en la mejor posición y hacerlo visible/invisible según la necesidad, por ejemplo, si la aplicación tiene unos usuarios Premium que paga para evitar los anuncios, se podrían hacer invisibles los anuncios, pero si el usuario es un usuario libre, se podría mostrar el anuncio en la aplicación en la mejor posición para evitar problemas con la experiencia del usuario.

Ciertamente el diseño básico Xamarin.forms está limitado (recordemos que Xamarin.Forms intenta compactar en un único control el máximo de propiedades disponibles comunes a las tres plataformas) y si se quiere hacer modificaciones para añadir funcionalidades propias de cada plataforma, es posible hacerlo a través de Customs Renderers. Los customs renderers permiten modificar los controles usados en el PCL añadiéndoles funcionalidades nativas propias de cada dispositivo.

CustomRender

Como se puede ver en la imagen anterior, definiendo un control propio y conectándolo con cada uno de los nativos, se consigue poder modificar el control común en cada una de las plataformas para poder modificarlo con las propiedades y/o funcionalidades propias de cada una de las plataformas que se requieran.

Esta función es necesaria porque la API para mostrar los anuncios depende de cada plataforma, y estos anuncios se construyen con objetos personalizados en función cada plataforma. Combinando Customs Renderers  y la API de Banners logramos nuestro objetivo, añadir anuncios en nuestro proyecto Xamarin.Forms de forma rápida, que se adapten al diseño y usable para el usuario.

Customview

En nuestro caso, y como se puede ver en la imagen, para poder añadir los Banners nativos en cada uno de los controles personalizados, hemos optado por usar el control View y por tanto los controles nativos ViewRenderer personalizados para poder añadir en estos cada uno de los banners usados.

 Banner

Ejemplo.

Requisitos:

PCL

  • Lo primero que has de hacer es crear la clase en el PCL, en este caso, una clase que herede de vista. (En este punto, se recomienda compilar para hacer esta clase visible)
  • Esta clase, esta vacía, ya que la definición de la funcionalidad estará en las clases dependientes.
    public class MyBanner: View
    {
    }

Código específico para cada Plataforma

  • Windows Phone
    • Antes de empezar, es necesario añadir la librería GoogleAds.dll, que se puede encontrar en este enlace: https://developers.google.com/mobile-ads-sdk/download#downloadios
    • Una vez bajada, se ha de añadir la librería al proyecto específico de Windows Phone 8.1
      1. Clic derecho en la solución de Windows Phone
      2. Add->Reference->Browse.
      3. Busca el archivo GoogleAds.dll de Windows Phone, y añadelo.
    • Es necesario crear una clase, en este caso, “CustomBannerRendered.cs”
      • Esta clase tendrá la lógica de Windows Phone 8.
      • en el atributo “adUnitID” hay que poner el key que tengamos de Google Ads.

 

[assembly: ExportRenderer(typeof(MyBanner), typeof(CustomBannerRenderer))]
namespace WinPhone.CustomRenders
{
    public class CustomBannerRenderer : ViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<View> e)
        {
            base.OnElementChanged(e);
            if (e.OldElement == null)
            {
                AdView bannerAd = new AdView
                {
                    Format = AdFormats.Banner,
                    AdUnitID = "Your key",
                };
                AdRequest adRequest = new AdRequest();
                bannerAd.LoadAd(adRequest);
                Children.Add(bannerAd);
            }
        }
    }
}
  • Android
    • Antes de empezar debes añadir el componente para la versión de Android que vayas a usar, en este caso, se ha usado de Google Play service, la versión para ICS.
    • Para añadir el componente se debe:
      1. Hacer clic derecho en la carpeta Components, del proyecto de Android.
      2. Haz clic en “Get more components”
      3. Buscar “Google play service”.
      4. Hacer clic en “Add to App”
    • El siguiente paso es configurar el Android Manifest para otorgarle los permisos necesarios:
      • Haz clic con el botón derecho encima de la solución y selecciona propiedades.
      • Selecciona la pestaña de Android manifest y en Required permisions, selecciona:
        •  ACCESS_NETWORK_STAT
        • INTERNET
    • El siguiente paso es añadir meta-data en el archivo “AndroidManifest.xml”
    • Finalmente ya se puede crear la clase, en este caso “CustomBannerRenderer.cs”
    • En AdUnitID, poner la Key de Google Ads.
<application>
   <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" />
   <activity android:name="com.google.android.gms.ads.AdActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize" />
</application>

 

[assembly: ExportRenderer(typeof(MyBanner), typeof(CustomBannerRenderer))]
namespace Android.CustomRenders
{
    public class CustomBannerRenderer : ViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs&lt;View&gt; e)
        {
            base.OnElementChanged(e);

            if (e.OldElement == null)
            {
                AdView ad = new AdView(this.Context);
                ad.AdSize = AdSize.Banner;
                ad.AdUnitId = &quot;Your key&quot;;
                var requestbuilder = new AdRequest.Builder();
                ad.LoadAd(requestbuilder.Build());
                this.SetNativeControl(ad);
            }
        }
    }
}
  • iOS
    • En este caso en particular ya no se necesario poner la key de Google Ads, ya que se usa el servicio iAds, de Apple.
    • En este caso, solo es necesario añadir la nueva clase, “CustomBannerRenderer.cs”

 

[assembly: ExportRenderer(typeof(MyBanner), typeof(CustomBannerRenderer))]
namespace iOS.CustomRenders
{
    public class CustomBannerRenderer : ViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs&lt;Xamarin.Forms.View&gt; e)
        {
            base.OnElementChanged(e);

            var adBannerView = new ADBannerView(new System.Drawing.Rectangle(0, 386, 320, 50));
            base.SetNativeControl(adBannerView);

        }
    }
}

 Resultado real :

res

Ya lo tenemos todo !! Pero como más vale un ejemplo que mil palabras, podéis descargar el ejemplo desde github…

 

 

 

Deja un comentario