1 page.title=Advertising without Compromising User Experience 2 parent.title=Monetizing Your App 3 parent.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 31 the 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 40 lesson, 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 43 href="http://code.google.com/mobile/ads/">AdMob</a> to serve ads, the Android platform doesnt 44 impose any restrictions on the choice of mobile advertising network. To the extent possible, this 45 lesson 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 48 as geo-targeting and ad-text font size, which may be configurable on some networks but not on 49 others. This lesson does not touch not these topics in depth and you should consult documentation 50 provided 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 56 registering a publishing account with the mobile advertising network. Typically, an identifier is 57 provisioned for each application serving advertisements. This is how the advertising network 58 correlates advertisements served in applications. In the case of AdMob, the identifier is known as 59 the 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 62 that 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 65 your Android project is no different from integrating any third-party JAR files. First, copy the 66 JAR files to the <code>libs/</code> directory of your project. If youre using Eclipse as IDE, be 67 sure to add the JAR file to the Build Path. It can be done through <b>Properties > 68 Java 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 79 require the declaration of related permissions in the Android manifest. Other kinds of permissions 80 may also be required.</p> 81 82 <p>For example, here's how you can request the {@link android.Manifest.permission#INTERNET} 83 permission:</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 104 viewing web pages). Ads also come in different dimensions and shapes. Once youve decided to put an 105 ad on a particular screen, you can add it in your activity's XML layout. The XML snippet below 106 illustrates 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 132 size or screen orientation. This can easily be addressed by <a 133 href="{@docRoot}guide/topics/resources/providing-resources.html#AlternativeResources">providing 134 alternative 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 136 sizes are available, you can consider using them for "large" (and above) screens. For example, the 137 following snippet comes from a layout file in the <code>res/layout-large/</code> directory, which 138 renders 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 its configuration attributes are network-specific. Ad 153 networks might support configurations with XML layout attributes (as shown above), runtime APIs, or 154 both. 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 156 XML layout.</p> 157 158 <p>When deciding where to place ads within your application, you should carefully 159 consider user-experience. For example, you dont want to fill the screen with 160 multiple ads that will quite likely annoy your users. In fact, this practice is banned by some ad 161 networks. 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 169 inputs 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 184 android.app.Activity#onCreate Activity.onCreate()} or {@link 185 android.app.Fragment#onCreateView Fragment.onCreateView()} based on how your application is 186 architected. Depending on the ad network, possible configuration parameters are: ad size, font 187 color, 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, 190 are passed to ad networks for targeting purposes. Let your users know and give them a chance to opt 191 out of these features.</p> 192 193 <p>In the below code snippet, keyword targeting is used. After the keywords are set, the 194 application calls <code>loadAd()</code> to begin serving ads.</p> 195 196 <pre> 197 public 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 217 impressions and clicks are not counted.</p> 218 219 <p class="caution"><strong>Important:</strong> Be sure to turn off test mode before publishing your 220 application.</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 226 various ad-serving events associated with the ad view. Depending on the ad network, the listener 227 might provide notifications on events such as before the ad is loaded, after the ad is loaded, 228 whether the ad fails to load, or other events. You can choose to react to these events based on 229 your specific situation. For example, if the ad fails to load, you can display a custom banner 230 within 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} 233 interface:</p> 234 235 <pre> 236 private 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
