1page.title=Advertising without Compromising User Experience 2parent.title=Monetizing Your App 3parent.link=index.html 4@jd:body 5 6 7<!-- This is the training bar --> 8<div id="tb-wrapper"> 9<div id="tb"> 10 11<h2>This lesson teaches you to</h2> 12<ol> 13 <li><a href="#ObtainPubAccountAndSDK">Obtain a Publisher Account and Ad SDK</a></li> 14 <li><a href="#DeclarePermissions">Declare Proper Permissions</a></li> 15 <li><a href="#SetupAdPlacement">Set Up Ad Placement</a></li> 16 <li><a href="#InitializeAd">Initialize the Ad</a></li> 17 <li><a href="#EnableTestMode">Enable Test Mode</a></li> 18 <li><a href="#ImplementListeners">Implement Ad Event Listeners</a></li> 19</ol> 20 21<h2>You should also read</h2> 22<ul> 23 <li><a href="http://code.google.com/mobile/ads/">AdMob SDK</a></li> 24</ul> 25 26 27<h2>Try it out</h2> 28 29<div class="download-box"> 30 <a href="http://developer.android.com/shareables/training/MobileAds.zip" class="button">Download 31the sample app</a> 32 <p class="filename">MobileAds.zip</p> 33</div> 34 35 36</div> 37</div> 38 39<p>Advertising is one of the means to monetize (make money with) mobile applications. In this 40lesson, you are going to learn how to incorporate banner ads in your Android application.</p> 41 42<p>While this lesson and the sample application use <a 43href="http://code.google.com/mobile/ads/">AdMob</a> to serve ads, the Android platform doesn’t 44impose any restrictions on the choice of mobile advertising network. To the extent possible, this 45lesson generically highlights concepts that are similar across advertising networks.</p> 46 47<p>For example, each advertising network may have some network-specific configuration settings such 48as geo-targeting and ad-text font size, which may be configurable on some networks but not on 49others. This lesson does not touch not these topics in depth and you should consult documentation 50provided by the network you choose.</p> 51 52 53<h2 id="ObtainPubAccountAndSDK">Obtain a Publisher Account and Ad SDK</h2> 54 55<p>In order to integrate advertisements in your application, you first must become a publisher by 56registering a publishing account with the mobile advertising network. Typically, an identifier is 57provisioned for each application serving advertisements. This is how the advertising network 58correlates advertisements served in applications. In the case of AdMob, the identifier is known as 59the Publisher ID. You should consult your advertising networks for details.</p> 60 61<p>Mobile advertising networks typically distribute a specific Android SDK, which consists of code 62that takes care of communication, ad refresh, look-and-feel customization, and so on.</p> 63 64<p>Most advertising networks distribute their SDK as a JAR file. Setting up ad network JAR file in 65your Android project is no different from integrating any third-party JAR files. First, copy the 66JAR files to the <code>libs/</code> directory of your project. If you’re using Eclipse as IDE, be 67sure to add the JAR file to the Build Path. It can be done through <b>Properties > 68Java Build Path > Libraries > Add JARs</b>.</p> 69 70<img src="/images/training/ads-eclipse-build-path.png" id="figure1" /> 71<p class="img-caption"> 72 <strong>Figure 1.</strong> Eclipse build path settings. 73</p> 74 75 76<h2 id="DeclarePermissions">Declare Proper Permissions</h2> 77 78<p>Because the mobile ads are fetched over the network, mobile advertising SDKs usually 79require the declaration of related permissions in the Android manifest. Other kinds of permissions 80may also be required.</p> 81 82<p>For example, here's how you can request the {@link android.Manifest.permission#INTERNET} 83permission:</p> 84 85<pre> 86</manifest> 87 <uses-permission android:name="android.permission.INTERNET" /> 88 ... 89 <application>...</application> 90</manifest> 91</pre> 92 93 94<h2 id="SetupAdPlacement">Set Up Ad Placement</h2> 95 96<div class="figure" style="width:262px"> 97<img src="/images/training/ads-top-banner.png" id="figure2" /> 98<p class="img-caption"> 99 <strong>Figure 2.</strong> Screenshot of the ad layout in the Mobile Ads sample. 100</p> 101</div> 102 103<p>Banner ads typically are implemented as a custom {@link android.webkit.WebView} (a view for 104viewing web pages). Ads also come in different dimensions and shapes. Once you’ve decided to put an 105ad on a particular screen, you can add it in your activity's XML layout. The XML snippet below 106illustrates a banner ad displayed on top of a screen.</p> 107 108<pre> 109<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 110 android:id="@+id/ad_catalog_layout" 111 android:orientation="vertical" 112 android:layout_width="match_parent" 113 android:layout_height="match_parent" > 114 <com.google.ads.AdView 115 xmlns:googleads="http://schemas.android.com/apk/lib/com.google.ads" 116 android:id="@+id/ad" 117 android:layout_width="fill_parent" 118 android:layout_height="wrap_content" 119 googleads:adSize="BANNER" 120 googleads:adUnitId="@string/admob_id" /> 121 <TextView android:id="@+id/title" 122 android:layout_width="match_parent" 123 android:layout_height="wrap_content" 124 android:text="@string/banner_top" /> 125 <TextView android:id="@+id/status" 126 android:layout_width="match_parent" 127 android:layout_height="wrap_content" /> 128</LinearLayout> 129</pre> 130 131<p>You should consider using alternative ad sizes based on various configurations such as screen 132size or screen orientation. This can easily be addressed by <a 133href="{@docRoot}guide/topics/resources/providing-resources.html#AlternativeResources">providing 134alternative resources</a>. For instance, the above sample layout might placed under the 135<code>res/layout/</code> directory as the default layout. If larger ad 136sizes are available, you can consider using them for "large" (and above) screens. For example, the 137following snippet comes from a layout file in the <code>res/layout-large/</code> directory, which 138renders a larger ad for "large" screen sizes.</p> 139 140<pre> 141... 142<com.google.ads.AdView 143 xmlns:googleads="http://schemas.android.com/apk/lib/com.google.ads" 144 android:id="@+id/ad" 145 android:layout_width="fill_parent" 146 android:layout_height="wrap_content" 147 <strong>googleads:adSize="IAB_LEADERBOARD"</strong> 148 googleads:adUnitId="@string/admob_id" /> 149... 150</pre> 151 152<p>Notice that the custom view name and it’s configuration attributes are network-specific. Ad 153networks might support configurations with XML layout attributes (as shown above), runtime APIs, or 154both. In the sample application, Mobile Ads, the {@code AdView} ad size 155(<code>googleads:adSize</code>) and publisher ID (<code>googleads:adUnitId</code>) are set up in the 156XML layout.</p> 157 158<p>When deciding where to place ads within your application, you should carefully 159consider user-experience. For example, you don’t want to fill the screen with 160multiple ads that will quite likely annoy your users. In fact, this practice is banned by some ad 161networks. Also, avoid placing ads too closely to UI controls to avoid inadvertent clicks.</p> 162 163<p>Figures 3 and 4 illustrate what <strong>not</strong> to do.</p> 164 165<div style="float:left;width:275px"> 166<img src="/images/training/ads-close-to-button.png" /> 167<p class="img-caption"> 168 <strong>Figure 3.</strong> Avoid putting UI 169inputs too closely to an ad banner to prevent inadvertent ad clicks. 170</p> 171</div> 172 173<div style="float:left;width:275px;height:530px;margin-left:2em"> 174<img src="/images/training/ads-cover-content.png" /> 175<p class="img-caption"> 176 <strong>Figure 4.</strong> Don't overlay ad banner on useful content. 177</p> 178</div> 179 180 181<h2 id="InitializeAd" style="clear:left">Initialize the Ad</h2> 182 183<p>After setting up the ad in the XML layout, you can further customize the ad in {@link 184android.app.Activity#onCreate Activity.onCreate()} or {@link 185android.app.Fragment#onCreateView Fragment.onCreateView()} based on how your application is 186architected. Depending on the ad network, possible configuration parameters are: ad size, font 187color, keyword, demographics, location targeting, and so on.</p> 188 189<p>It is important to respect user privacy if certain parameters, such as demographics or location, 190are passed to ad networks for targeting purposes. Let your users know and give them a chance to opt 191out of these features.</p> 192 193<p>In the below code snippet, keyword targeting is used. After the keywords are set, the 194application calls <code>loadAd()</code> to begin serving ads.</p> 195 196<pre> 197public View onCreateView(LayoutInflater inflater, ViewGroup container, 198 Bundle savedInstanceState) { 199 ... 200 View v = inflater.inflate(R.layout.main, container, false); 201 mAdStatus = (TextView) v.findViewById(R.id.status); 202 mAdView = (AdView) v.findViewById(R.id.ad); 203 mAdView.setAdListener(new MyAdListener()); 204 205 AdRequest adRequest = new AdRequest(); 206 adRequest.addKeyword("sporting goods"); 207 mAdView.loadAd(adRequest); 208 return v; 209} 210</pre> 211 212 213 214<h2 id="EnableTestMode">Enable Test Mode</h2> 215 216<p>Some ad networks provide a test mode. This is useful during development and testing in which ad 217impressions and clicks are not counted.</p> 218 219<p class="caution"><strong>Important:</strong> Be sure to turn off test mode before publishing your 220application.</p> 221 222 223<h2 id="ImplementListeners">Implement Ad Event Listeners</h2> 224 225<p>Where available, you should consider implementing ad event listeners, which provide callbacks on 226various ad-serving events associated with the ad view. Depending on the ad network, the listener 227might provide notifications on events such as before the ad is loaded, after the ad is loaded, 228whether the ad fails to load, or other events. You can choose to react to these events based on 229your specific situation. For example, if the ad fails to load, you can display a custom banner 230within the application or create a layout such that the rest of content fills up the screen.</p> 231 232<p>For example, here are some event callbacks available from AdMob's {@code AdListener} 233interface:</p> 234 235<pre> 236private class MyAdListener implements AdListener { 237 ... 238 239 @Override 240 public void onFailedToReceiveAd(Ad ad, ErrorCode errorCode) { 241 mAdStatus.setText(R.string.error_receive_ad); 242 } 243 244 @Override 245 public void onReceiveAd(Ad ad) { 246 mAdStatus.setText(""); 247 } 248} 249</pre> 250 251
