【Monacaでアプリ開発】2.広告実装

2017年10月3日

Monacaでアプリ開発


リールの番手とPEの号数を選ぶと何m巻けるかを表示する無料オリジナルアプリ”Wind PE”

いつもご利用ありがとうございます。もうすぐでリリース一周年という事で旧ブログで11回連載だった奮闘記を6回に凝縮して公開中!

今回は1.コーディング編のつづきで2.広告の実装編である。

2.広告の実装編

無料アプリにしたので広告を導入することにした。なんせ開発費がかかるわけで少しでも回収できたらいいなと。

  • Appleのdeveloper登録費用(毎年)
  • googleのdeveloper登録費用 (初年)
  • 独自ドメイン管理費(毎年)
  • iMacの購入費

色々調べた結果、審査も簡単で直ぐに導入できるnendという広告サービスに決定。

バナーをクリックしたら報酬が発生するタイプ。しかしインストールしてもらい、なおかつ広告をクリックしてもらわなければ収益にならないってことはよっぽど人気が出ないと開発費の回収なんて夢のまた夢だろうなぁ・・・・
しかも¥3000単位じゃないと振り込まれないので気が遠くなりそうだ(;´Д`A

1.ユーザー登録

ユーザー登録は画面の指示に従って手続きするだけで非常に簡単であっけなかった。

2.広告枠の作成

広告枠の作成も非常に簡単だった。オーバーレイ型ってちょっとじゃまくさいのでインライン型をチョイス。

広告枠の申請してから認証されるまで約1日かかった。後は生成された広告コードアプリに実装する。

3.アプリに実装

実装方法を検索するとjavascriptのサンプルコードを紹介している親切なサイトがいくつかあった。
ハイブリッドアプリの場合は提供された広告コードを改良してiOSとAndroidに両対応させるjavascriptで表示すると良いらしい。

サンプルのjavascriptにnendで取得した広告コードを書き込んで実装してみた。
わくわくしてデバッグしてみると・・・・

ひょ、表示されないではないか((((;゚Д゚)))))))

原因を調べてみるとjquery mobileの特徴である”一つのhtmlで複数のページを制御するajax”下では、それぞれのページに広告を表示する為にページをそれぞれ独立させなくてはならないことが分かった(;´Д`A

広告を載せたいページを独立させて、それぞれに別々の広告コードを取得しjavascriptに書き込んで再デバッグだ!

ひょ、表示されず(´;Д;`)

まさかおまけの広告でこんなに悩むとは・・・・。

再度検索してみる。
「ふむふむ、ajaxは最初のページのjavascriptしか読みにいかない・・・・ということは!?」

”サーバーフォルダ内にjavascriptを格納→<head>に定義→<body>に発動タグ”という流れから・・・・

やけくそで<body>内に全部書いてみたら表示されちゃった((((;゚Д゚)))))))

※ajaxを無効にする方法もあるがおすすめしないと書かれていたので内部リンクに関しては無効にしなかった。

なんとか上手くいったが広告によってはクリックしてもタイムアウトしてリンクに飛ばないものもあり、検証が必要である。ま、広告はおまけだからいっかな(笑)

実際にアプリ開発していて感じたことは、「こんなレベルじゃとてもじゃないけど本業はもとより副業にすらならない」ってことだ。

次回予告

何はともあれ、これで一通り計画していたアプリが完成!次回はいよいよAppleとgoogleのdeveloper登録をしてアプリの審査に提出だ!(つづく)

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でK☆太(makiriri.com)をフォローしよう!