スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村
--/--/--(--)
スポンサー広告

19-4.広告タグをMoacaアプリに組み込む(MoancaでCPI広告を設置する・その3)

appC cloudを利用して、MoancaアプリにCPI広告を設置する流れのつづきです。
これまでの流れはこちらのカテゴリをご覧ください。

appC cloudの管理画面からアプリ情報の登録が終わりましたので、今回はMonacaのプロジェクトを開いて広告のソースを入れていきます。

まずはMonacaの「appCCloudプラグイン」をONにする必要があります。
Cordovaプラグインの設定は前もちょっと紹介しましたが、いちおうご説明。

広告を入れたいアプリのプロジェクトを開いて、右上のメニューの「設定」から「Cordovaプラグインの管理」を選びます。

mona0001.png

一番上に「appCCloud」というプラグインがありますので「有効」というボタン押します。

appc0014.png

このように赤くなったらOKです。

appc0015.png


それから広告タグを挿入します。
appCCloudのプラグインでは、バナーのようなタイプだけでなく、いろんなタイプの広告が入れられます。

詳細はこちらのページでみてみてください。
https://app-c.net/tutorial/monaca/

・リストビュー広告
・シンプル広告
・ムーブアイコン広告
・マーキー広告
・カットイン広告
・ネイティブ広告

各種広告の設定などはまた別途記事をかきますね!

今回は「カットイン広告」というタイプを入れるところをご紹介します。
カットインタイプはこのようなものです。

appc0018.png

ボタンを押すとこのようなポップアップのような画面がひらき、そこにアプリの広告やアプリのDLページに飛ぶボタンがついているものです。
ボタンは自分で用意する必要があるみたいです。
appC Cloudのサイトにはこんな感じの例が載っていました。
オレンジの「おすすめアプリ」というボタンがそうです。

appc0019.png

私のアプリに入れる用のボタンの画像を作りました。
こんなのです。

b001.png

ためしに入れてみたいけどボタン作るの面倒!というかたは、こんなしょぼいのでよければどうぞご自由にお使いください。

設置イメージはこちら。

appc0020.png

ご当地キャラクターのアプリのメニュー画面にこのように入れてみることにしました。nend広告(CPC型)と併用です。
ボタンの設置タグはこんな感じです。

■index.html
<img style="position:absolute;top:392px;" id="imgappc" src="img/b001.png" ontouchstart="appCCloud.showCutinView();" />


ontouchstartイベントでappCCloud.showCutinView();という処理を呼んでいます。
これが「ボタンをタップしたらカットイン広告を開く」ということですね。

あとは広告の初期化の処理が必要です。

■<head>タグ内

function onDeviceReady() {
appCCloud.deviceready();
appCCloud.init(success,fail,{
mediaKeyAndroid:'XXXXXXXXXXXXXXXXXXXXXXXXXX',
});
}
function success(){
//alert("OK");
}
function fail() {
//alert("NG");
}
if(typeof device == 'undefined'){
document.addEventListener("deviceready", onDeviceReady, false);
}else{
onDeviceReady();
}


広告の初期化などを行っています。
mediaKeyAndroid:'XXXXXXXXXXXXXXXXXXXXXXXXXX',
というところは各アプリのメディアキーを入れます。

前回アプリを登録した詳細ページにありますね。ここからコピーして入力してください。

appc0013.png

アプリの詳細ページへは、appC cloudの管理画面のダッシュボードページからアプリ名を選択すると飛べます。

appc0010.png

以上でMonaca側の広告のコーディングはおしまいです。
結構簡単ですよねー!

あとは広告がちゃんと表示されるかテストをしたり、appC cloudの管理画面から広告の設定をする流れを紹介しますね!
スポンサーサイト

-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村
初めまして!
初めまして!
自分もmonacaを使ってアプリを作成してるのですが、appCCloudの設置で悩んでおります…
是非ご教授をいただけたらと思い書き込みいたしました…。

リストビュー広告を設置しようとしてるのですが、テキストからのリンクで設定したいのですが、さっぱりわかりません…

どうか、バカでもわかるように教えてはいただけませんでしょうか?
どうか、どうか、、、
by: kuro * 2014/12/07 00:15 * URL [ 編集] | TOP↑

-----------

kuroさん、コメントありがとうございます。
私も試行錯誤しながら、という感じなのですが、それでよかったらそのうち記事を書きますので参考にしてください!
リストビュー広告も今ちょうどトラブってて、サポートセンターに問い合わせて返事待ちです。返事がきたら記事にしますね!(うまくいくかはわかりませんが)
by: Riri * 2014/12/08 13:40 * URL [ 編集] | TOP↑

-----------
















管理者にだけ表示を許可する


| ホーム |
Page Top↑
▲ Page Top
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。