|
| 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 doesn’t |
| 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 you’re 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 you’ve 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 it’s 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 don’t 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 | + |
0 commit comments