Advertise in Your Mobile app
An step by step approach to add Google AdSense in Xamarin forms :
Step no 1 :
Initial requirement: Google AdMob account.
First of all you need to setup an account on Google AdMob. Now you must be thinking “What is Google AdMob”?
So don’t worry about it.
Google AdMob is a mobile advertising platform that you can use to generate revenue from your app.
How does it work?
You will need to create an AdMob account and activate one or more ad unit IDs. This is a unique identifier for the places in your app where ads will be displayed.
Ads can be displayed as banner, interstitial, video, or native ads.
How you can use it?
Here I am sharing screen shots which help you to create an account and setup Android id/ iOS id.
After creating a Google AdMob account, this screen will appear and it is just a confirmation about the app is already uploaded on Google or iTune play store or not.
Here, I am select ”NO”, because I am demonstrating from scratch.
Now, in the next step a screen is shown which is for application setup.
Here, you have to choose a option separately that you are creating an app in Android or iOS platform.
As I choose Android, that simply shows I am creating an app for Android.
The process is same for both platform. After creating app you will get a separate App id for Android or iOS respectively.
Moving on the next step, where you can see a blue button with mentioned text “Create Ad Unit” in the above image. Hit that button.
When I click on “Create Ad Unit” then next screen will appear to move forward for the next step.
Here, you can see some different options for create your own advertisement. Remember that, I am not describing you about how to create advertisement here, because I am just showing you how to add advertisement in your mobile app.
So, here we can use the pre defined advertisement template for testing purpose.
These are the different links for testing advertisement on Android and iOS platform separately.
Here I am using the below mentioned id,
ca-app-pub-3940256099942544/6300978111
The id’s will just look similar to above format.
Now, we are completely done with the first step, and turning to the second step.
Step no 2:–
Create a Xamarin Forms Project. I am assuming that you guys are know how to create a Cross platform xamarin forms Mobile App.
Step no 3:–
You have to create a view for it and this view can be add any where in your mobile application.
Create a Class and create a bindable property for appunit id like this
public class AdvertisementView : View
{
public static readonly BindableProperty AdUnitIdProperty = BindableProperty.Create
(
nameof(AdUnitId),
typeof(string),
typeof(AdvertisementView),
string.Empty
);
private string adUnitId;
public string AdUnitId
{
get { return adUnitId; }
set { adUnitId = value; }
}
}
Step no 4:–
This is view where you want to show advertisement. I am showing it on main page. So xaml view is showing just like this
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=”*”/>
<RowDefinition Height=”Auto” />
</Grid.RowDefinitions>
<Label Text=”Welcome to Xamarin Forms!”
VerticalOptions=”Center”
HorizontalOptions=”Center” />
<local:AdvertisementView AdUnitId=”{Binding AdUnitId}” Grid.Row=”1″ />
</Grid>
Now Create a viewmodel for bind this property and set its value in viewmodel
Like this :-
public string AdUnitId { get; set; } = “ca-app-pub-3940256099942544/6300978111”;
if (Device.RuntimePlatform == Device.iOS)
AdUnitId = “iOS Key”;
else if (Device.RuntimePlatform == Device.Android)
AdUnitId = “android Key”;
Step 5:-
Setup for Android
Install nuget package for MobileAds Class
Xamarin.Firebase.Ads
Now You have to add permission for internet and access network state in Android manifest.
Alongside this, you also have to add one activity for the advertisement
Overall this should be add in your manifest file
<uses-permission android:name=”android.permission.INTERNET” />
<uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” />
<activity android:name=”com.google.android.gms.ads.AdActivity” android:configChanges=”keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize” android:theme=”@android:style/Theme.Translucent” />
Step 6:-
Add this line in to main activity file before init method
MobileAds.Initialize(ApplicationContext, “Your android app advertisement unit id “);
Step 7:-
Last step for Android project and i.e Create Custom render for your view like this
public class AdvertisementViewRenderer : ViewRenderer<AdvertisementView, AdView>
{
public AdvertisementViewRenderer(Context context) : base(context) { }
protected override void OnElementChanged(ElementChangedEventArgs<AdvertisementView> 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;
}
}
Step 8:–
Setup for IOS
Install nuget package
Xamarin.Firebase.iOS.AdMob
Step 9:–
Configure iOS advertisement unit id in App delegate
Add this line in finisedlaunching method
Google.MobileAds.MobileAds.Configure(“YOUR IOS APP ID “);
Step 10:–
Last step for Create Custom Renderer in iOS
public class AdMobViewRenderer : ViewRenderer<AdvertisementView, BannerView>
{
protected override void OnElementChanged(ElementChangedEventArgs<AdvertisementView> 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;
}
}
All done now. Run and Enjoy….
Great You have done your job
Author
Santosh Kundkar
#Xamarin Developer # .Net Developer #Software Architect
