Help us understand the problem. What is going on with this article?

10秒のコーディングで収益化する方法【Ionic】

More than 1 year has passed since last update.

はじめに

この記事は、Ionic Advent Calendar 2018の8日目の記事です。
ionicというフレームワークの中で、「とりあえず広告バナーをつけて、収益化させる方法」を紹介します。
広告の申請などは完了していることを前提としますが、この記事では申請についても軽く触れています。

Step①:nendの登録

まずは、nendへの登録を行います。
URL:https://www.nend.net/mediapartner

ここでの説明は省略しますが、大まかに説明すると、
① アカウントの作成
② 新規サイト/アプリの作成
③ 広告枠の作成

この時、広告枠は、静止画 < バナー < インライン(ヘッダー) < 320×50というように作成してください。

52090474-94D4-4232-B922-6152207B9D07.jpg

より具体的な手順は以下のサイトが参考になるかもしれません。
URL:【スマートフォン広告】Nend(ネンド)の登録~設置方法までを徹底解説

Step②:JSタグをIonicに組み込む

nendの中の、アプリ < 広告 < 広告コードから、以下のような広告コード(JSタグ)を取得します。

AdCodeSample.js
<script type="text/javascript">
var nend_params = {"media":12345,"site":123456,"spot":123456,"type":1,"oriented":2};
</script>
<script type="text/javascript" src="https://js1.nend.net/js/nendAdLoader.js"></script>

次に、そのJSコードをionicの中のsrc < index.htmlのディレクトリの<body>タグの中に埋め込みます。
スクリーンショット 2018-12-04 14.08.55.png

Step③:バナーの重複を調整する

このままだと、以下のようにバナーが被ってしまいます。
スクリーンショット 2018-12-04 14.12.28.png
そのため、「バナーの高さ分の空白を作っていきたい」と思います。

広告バナーをつけたい場所のhtmlファイルの先頭に以下のコードを追加し、改行(<br>)による空白を作ります。(例えば、src < pages < home < home.htmlの中など)

home.html
<div class="HeaderAdSpace">
  <br>
</div>

続いて、この改行の高さをバナーの高さに合わせます。
ionicの中のsrc < theme < variables.scssを開きます。
スクリーンショット 2018-12-04 14.29.16.png
ここの一番最後の部分に次のコードを追加します。
(もしも320×100のバナーを指定した場合は100pxに設定。)

variables.scss
.HeaderAdSpace{
  line-height: 50px;
}

実際に書くコードは以上です!
以下のように、表示されれば成功です!

スクリーンショット 2018-12-07 12.07.53.png

終わりに

実際に書くコードはこれのみです!
フッターにしたり、アプリ内の特定のタイミングで表示したりする場合、typescript上でより細かく実装する必要がありますが、個人開発のプロトタイプなどで、「とりあえず広告バナーをつけたい場合の方法」を紹介しました。

-----

以上のコンテンツを実装すると、以下のアプリ(v1.4.1)のように表示されます。
もしよろしければご覧くださいm(_ _)m

アプリ名:【Smart Memo -Tab Style-】

明日のIonic Advent Calendar 2018の投稿は@xiacaさんです!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした