読者です 読者をやめる 読者になる 読者になる

F@N Ad-Tech Blog

株式会社ファンコミュニケーションズ nend・nex8のエンジニア・技術ブログ

AndroidアプリでnendSDKが使えなくてもnend広告を表示する方法

android Android Java nend WebView

こんにちは!こんばんは!

SDK班所属、「うどんかそばかを選べ」と言われたら蕎麦派、 e です。

以前、iOSアプリ向けにWebViewを利用した広告掲載について記事を書かせて頂きましたが、今回はAndroidアプリでの掲載方法について書きたいと思います。

お・さ・ら・い・です iOSアプリでnendSDKが使えなくてもnend広告を表示する方法 http://lab.adn-mobasia.net/?p=806

開発環境でSDKが使えない!

 androidアプリ開発においてnendSDKが利用できないケース自体は、iOSに比べると少ないとは思いますが、昨今では、ネイティブではない開発環境を使ってスマートフォン向けアプリケーションをつくる方法もたくさん提供されています。WEB上で手軽に開発が出来るようなサービスを見かけることも珍しくはなくなってきました。そのような環境ではネイティブ向けのSDKは利用できません。コンテンツによっては、広告掲載用のプラグインや、サポートマニュアルなども提供されていたりしますが、そういうことはまだ珍しいかと思います。

 そこで登場するのが 「WebViewと広告コード(JavaScript)を使ってアプリにnend広告を貼る」 という方法です。

ここで言う広告コード(JavaScript)とは?

バナー広告の場合、WEBサイト用に「広告コード」が発行されています。 これを利用して、アプリ内でもサイト同様にWebViewを利用して広告を貼り付けることが出来ます。

nend管理画面 広告枠の管理 > 広告枠 > 広告コード > 広告コードの取得 例) https://www.nend.net/m/adspot/code/00000

SDKのDLページからでも メディア管理画面 SDK取得メディア管理画面 広告コード

メリットとしては、「広告SDKのバージョンアップごとに改修をしなくて済むこと」と、広告コードを含んだhtmlをアプリ外部に配置することで「広告枠(ID)の差替えが容易になる※」ことでしょうか。(※ただし、htmlの外部配置については後半の注意点を参照)

ただ、WebView+広告コード(JavaScript)で実装する際の、nendSDKとの大きな違いとして

  • 在庫切れや受信エラーなどの広告が表示できない場合の検知が出来ない
  • 管理画面で指定できるリフレッシュの設定は反映されない

という点があります。

当たり前ですが、SDK特有の機能は利用できないという事です。これは、iOSの時も同じでした。メディエーション利用なども不向きですから、収益化を考えた場合、SDKの利用に問題が無ければそちらを使うほうがよいと思います。

それでも使いたいけど、何をすればいいの?

やることは単純です。

【事前準備】 1) 管理画面から「Androidアプリの登録」と「広告枠の作成」をしておく → 広告コードが生成されます

【実装】 1) AndroidManifest.xmlへ下記のパーミッションを追加   * INTERNET 2) 広告コードを含んだhtmlファイルを準備する 3) 任意のActivityなどで広告用WebViewを生成、JSを有効にした上で、htmlを読み込む 4) 広告用WebViewのリンクをタップした際に新規にブラウザのウィンドウが開くように処理を追加 5) 画面へ配置

こんな感じの流れになります。

広告コードを入手して実際にやってみましょう

具体例としてネイティブ環境での説明になります。

【assets/nendAd.html】 広告コード(JavaScript)を記述したhtmlファイルサンプル

[html] <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" > <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> </head> <body style="margin:0px;background-color:#3399CC" > <!--// 広告コード ここから --> <script type="text/javascript" > var nend_params = {"media":82,"site":2426,"spot":3174,"type":1,"oriented":3}; </script> <script type="text/javascript"src="">http://js1.nend.net/js/nendAdLoader.js"> <!--// 広告コード ここまで --> </body> </html> [/html]

【ポイント】

  • 余白を排除するため body の margin を all 0px に指定します
  • 背景色は任意ですが、取得失敗を検知出来ないため、アプリのデザインに合わせて設定する事をお勧めします
  • 上記の広告コードはandroid用のサンプルIDですので、実際のものに置き換えてください

【SampleActivity.java 広告を載せたい、任意の画面(Activity)

[java] public class MainActivity extends Activity { /* TAG / private static final String TAG = &quot;nend_WebView_sample&quot;;

/** スクリーン計測基準 */
private DisplayMetrics mMetrics = null;
/** スクリーン密度 */
private float mDensity = 1.0f;
/** 広告用WebView */
private WebView mWebViewNendAd = null;

@Override
protected void onCreate(Bundle savedInstanceState) {
    Log.i(TAG, &amp;quot;MainActivity onCreate() start...&amp;quot;);

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // 1. スクリーン密度を取得
    mMetrics = new DisplayMetrics();
    ((WindowManager)getApplicationContext().getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay().getMetrics(mMetrics);
    mDensity = mMetrics.density;

    // 2. 作成、ロード
    createNendAd();

    Log.i(TAG, &amp;quot;MainActivity onCreate() finish...&amp;quot;);
}

@Override
protected void onDestroy() {
    // 3. 停止、破棄
    deallocateNendAd();

    super.onDestroy();
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

/**
 * 広告用WebView生成
 */
@SuppressLint(&amp;quot;SetJavaScriptEnabled&amp;quot;)
private void createNendAd(){
    Log.i(TAG, &amp;quot;MainActivity createNendAd()&amp;quot;);

    deallocateNendAd();

    // WebViewを利用して広告バナーを作成
    mWebViewNendAd= new WebView(getApplicationContext());
    mWebViewNendAd.getSettings().setJavaScriptEnabled(true);
    mWebViewNendAd.loadUrl(&amp;quot;file:///android_asset/nendAd.html&amp;quot;);

    // 広告バナータップ時に新規ウィンドウで開くためにWebViewClientのメソッドをOverrideしたインスタンスを指定
    // 注意: 下記は一例です。別途クラスを作成しても構いませんが、必ずリンク先をブラウザで開くための処理を記述してください。
    //       対処しない場合、広告バナーと同じWebView内でリンク先のページが開く場合があります。
    mWebViewNendAd.setWebViewClient(new WebViewClient() {
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
        startActivity(intent);
        return true;
        }
    } );

    // 注意:配置先については適宜変更してください
    addContentView(mWebViewNendAd, new LayoutParams((int) (320 * mDensity), (int) (50 * mDensity)));
}

/**
 * 広告用WebView破棄
 */
private void deallocateNendAd() {
    if (mWebViewNendAd != null) {
        Log.i(TAG, &amp;quot;MainActivity deallocateNendAd()&amp;quot;);
        mWebViewNendAd.stopLoading();
        mWebViewNendAd.getSettings().setJavaScriptEnabled(false);
        mWebViewNendAd.setWebViewClient(null);
        mWebViewNendAd.destroy();
        mWebViewNendAd = null;
    }
}

} [/java]

記述は、これだけです。

広告コード(JavaScript)利用時の注意点

htmlに広告コード(JavaScript)を貼り付けてアプリ内に広告を表示する方法は、PhoneGapなどのネイティブな言語を利用しない開発環境でアプリを作成する際にも応用が可能です。ただし、ひとつのhtml内に、同一のspotIDを持つ広告コード(JavaScript)が複数存在していると、そのうちの一つしか広告を表示することが出来ません。

たとえば、jQueryMobileなどを利用して複数ページを1ファイルで動的に生成している場合にはこの点にご注意ください。

そして、クロスプラットフォームで対応する場合、iOSAndroidとそれぞれのアプリ用に広告枠を作成して広告コードを利用することを忘れないでください。同じ広告コードを利用してしまうと、レポートが一つになって効果が分かりにくくなったり、一方のアプリで配信できる広告が減る原因になったりしてしまいます。

また、このサンプルはassets/ 配下に実際にhtmlファイルを置く場合の記述です。予めWEB上に配置したhtmlファイル等を読みにいく方法でも構いませんが、その場合は端末の環境などにより広告の読み込みまでに多少時間が掛かるケースがあることにご注意ください。

最後に

次はiOSネタが書けるでしょうか。いや、書きたいです。

では、また!