nendの導入
広告を入れる
せっかくアプリを作るのなら、ついでに広告も入れたくなるのが人の性ってものですよね。
べ、べつに広告収入とか狙ってないんだからねっ(汗)
そんなわけで、アプリ開発初心者のくせに一丁前に広告を入れようと頑張ってみたら、結構あちこちでつまずいたので(当然だ!)、メモ代わりに書き留めてみました。
nend (ネンド)
小学生が図工の時間にコネコネするアレではありません。
スマートフォン広告『nend』 は、クリック課金型広告のことです。
スマホでWebページ画面やアプリの一番下に表示されている広告、あれの一種ですね。他にも色々あるみたいですが、アプリを開発したmonacaの公式サイトで紹介されていたので、素直にこれにしてみました(安易)
広告掲載をお願いする場合は有料みたいですが、アプリに広告枠を設置するだけなら登録も利用も無料です。いやー、なんて経済的。素晴らしい。
もし興味がある人は、下のバナーからでも公式ページにいけるので覗いてみてください。
登録の流れ
ざっくりと登録までの流れを説明します。
しょうもないところでつまずいたりもしたので、何かの参考になれば幸いです(苦笑)
大まかには、以下の順に行いました。
- nend へ登録
- 審査後、アカウント情報登録
- サイト/アプリの作成
- 新規広告枠の作成
- 承認後、広告コード取得
スクリーンショット付きの親切な説明は、monaca公式サイトやこちらのブログ様に載っていますので、ここでは私が躓いたことを中心にお伝えします(照れ)
nend への登録
ここは流石に躓かなかった。偉い、自分!
一つだけ挙げるとすれば、私の場合、まだアプリの開発途中で登録作業を行っていたので、サイトURLの欄に記載する内容に戸惑いました。
とはいえ、これは公式でもきちんと説明してあったのですぐに解決しましたが。
開発中のアプリの場合は、以下のURLを記載します。
ここだけ気をつけたら、あとはすんなり登録完了。
nend の送信専用アドレスから登録した自分のメールアドレスに、
【nend 】メディアパートナー┃仮登録完了のお知らせ
というメールが届いたら大丈夫です。
アカウント情報の登録
平日の営業時間中なら、仮登録後にすぐ、本登録までいくみたいなんですが、残念ながら土曜日に作業してしまったので、しばらく音沙汰なし状態。
月曜日になってようやく
【nend 】メディアパートナー┃登録完了のお知らせ
というメールが届き、メール内の管理画面用URLをクリックするまで、nend のサイトにログインすら出来ません。
てか、最初の登録でパスワードも設定してるのに、登録完了メール来るまでログインできないとか、ちょっと焦るじゃないですか!?
しかも、エラーメッセージで、メールアドレスかパスワードが違ってますって言われたら、めちゃくちゃ動揺しますから!!
そんなわけで、登録は平日の営業時間内がオススメです。心底、オススメです!
あ、アカウント情報の登録は簡単なので、端折りますね(いい加減)
サイト/アプリの作成 と 新規広告枠の作成
広告枠の管理タブから、サイト/アプリの作成を選びます。
実際に広告を載せたいアプリやサイト(PCサイトでは広告は表示されません。あくまで、スマホ用のWebサイトのみです)を設定していくのですが、最初の登録時に一つ登録を済ませていると思いますので、まずはそれを選択。
基本的には必要事項を埋めていくだけなのですが、一つ、イラっとさせられたのが広告枠の形式の項目ですね。
オーバーレイという選択肢の存在。
あれば選びたくなりますよね。なのに、それなのに。
どゆこと!?
しかたないので、インラインを選択し、アプリ側でオーバーレイっぽくすることにしました。ちっ!(舌打ち)
しかも、この段階まで行くと広告コードがコピーできる状態になりますが、このコードをアプリ/サイトに貼り付けてもまだ何も表示されません。
広告枠の管理タブから広告枠を選び、ステータスの部分がアクティブになるまで待たなければいけません。待てません!セッカチさんなんだから!(怒)
私みたいな、
とりあえず広告の中身は空でもいいから、アプリに埋め込んで表示を確かめてみたいのっ!
って人のためにテスト用コードも用意されているので、まずはそちらでお試しすることをオススメします。
nendサイトの右上にあるヘルプから、
ヘルプ => テスト用広告コードについて
でいけるので、よければお試しあれ。
広告コード取得
広告枠の登録が完了すると、登録したアプリ/サイト名の下に小さく広告コードとありますので、そちらをクリックすると、アプリ/サイトに貼り付ける用のコードが出てきます。
基本的にはこれをコピーして張り付ければ完成みたいなのですが、ここでも大きな落とし穴がありました(きっと初心者ホイホイなんです、間違いないです)
説明では、HTMLの
<head>ここにコードを貼り付ける</head>
とのことでしたが、騙されてはいけませんよ、初心者の皆様。
そんなところに貼り付けても、サイトでは表示されません。(アプリでは表示されましたが)
サイトで貼り付ける先は、
</head>ここにコードを貼り付ける<body>
↑↑↑ここです。こんなところに貼り付けようなんて、普通思いつきませんよね。なんて非道な!恐るべし、初心者ホイホイめ!
まとめ
そんなこんなで結構骨が折れましたが、無事nendを導入して、なんとかテスト表示までこぎつけました。
導入したらあとはほったらかしてたらガッポガッポ、とは流石にいかないでしょうけど、運用に関してはまた今度ということで。