Sunday, 17 July 2016

How to add Google Adsense Ads to your Android App

How to add Google Adsense Ads to your Android App

After I got a taste of how is to build apps for Android on mobile, I wanted to go further and insert ads into my apps. Other apps that I previously downloaded had that and it wasn't that annoying seeing ads at the bottom of my screen and I felt good that free apps can get people's support through Adsense mechanism.

I read a little bit on the Google's Adsense Setup page that you can "Unlock the revenue potential of your mobile site with targeted Google ads." This sounded so good that I wanted to try.
But wait, Google is talking about my mobile sites where I can put Google ads, while I'm trying to add these ads to my android apps. How can I do that ? You'll see that is not that complicated and in fact is very simple .

And here is how I succeeded adding Google Adsense Ads to my android apps: "World Cup Goal Scream" and "World Cup Red Vuvuzela". You can download these apps from android market to get a feeling of what I'm talking about.

The following is a step by step guide for you and for me. Yes for me too, because we always forget stuff and thank God to the internet that we have a place to come back and save the day.

Ok, let's go

Step 1:
Create a Google account, if you don't have one, and log in to the Google Adsense site (https://www.google.com/adsense)

Step 2:
Select "Adsense Setup" from the menu

Step 3:
Select "AdSense for Mobile Content New high-end devices!" and follow the wizard steps to customize you ads.

Step 4:
Get "Your AdSense code" and save it to an empty html page


<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="www.flyloopproject.com">
<title>World Cup Goal Scream Ads</title>
</head>
<body marginwidth="0" marginheight="0 leftmargin="0"
topmargin="0" style="background-color: black">
.....insert your Adsense Code here.........
</body>
</html>

And save the page, for example call it myads.html

Step 5:
Upload this page to your website, oh you need a place on the internet where you can upload stuff

Step 6:
Test the page on your mobile phone by opening the page that you just upload.
Note!: it won't display any content if you open the page from your computer's web browser. You have to test it on your mobile web browser. Check out my ads page:http://flyloopproject.com/myads.html

Step 7:
Now that you have this page, you probably ask yourself "How the hack do I add it to my app ?"
Well don't worry you are on track to do this.
Take a deep breath of fresh air and proceed with the next step.

Step 8:
Open your Android project and edit the View where you want to add your ads.
For example you can add ads to your main.xml where you'll place a WebView component.


<LinearLayout android:id="@+id/adsHolder"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:orientation="vertical" android:layout_alignParentBottom="true"
android:layout_centerInParent="true" android:paddingTop="5px">
<WebView android:id="@+id/adsDisplay" android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>


Step 9:
All you have to do now is to wire up the WebView component that you just add to your web page created in Step 4


public class MainActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
...............
WebView adsDisplay = (WebView) findViewById(R.id.adsDisplay);
adsDisplay.getSettings().setJavaScriptEnabled(true);
adsDisplay.loadUrl("http://flyloopproject.com/myads.html");
...............
}
}


Step 10:
Add user INTERNET permission to your app by editing the AndroidManifest.xml file


<manifest ...>
...............
<uses-permission android:name="android.permission.INTERNET" />
...............
</manifest>


Step 11:
You're done, test it by building your app and run it with your emulator or on your mobile phone and you should see your ads at the bottom of your screen.

A quick overview of the steps
Step 1 : Log in to the Google Adsense site https://www.google.com/adsense
Step 2-3 : Get Your Adsense Code
Step 4 : Save it to an empty web page (example: http://flyloopproject.com/myads.html)
Step 5 : Upload the page to your website
Step 6 : Test it on your mobile
Step 7 : Fresh air
Step 8 : Add a WebView component to a view in your android project
Step 9 : Wire up the component to display you web page that you just created in Step 4
Step 10 : Add INTERNET permission to your app
Step 11 : FINISH (check your heart rate :) )

That's pretty much it.

I hope that you find this posting useful and don't stop building free apps and get support for your development using Google Adsense for mobile.

No comments:

Post a Comment