質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

2812閲覧

monacaでAd Generationの広告を表示できません

Nakatasan

総合スコア7

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

1クリップ

投稿2018/04/03 03:08

前提・実現したいこと

monacaで作成したゲームアプリにAd Generationの広告を表示させようと思っています。
以前は広告が問題なく表示されていたのですが、
Cordovaのバージョンをアップしたところ、他のアプリでも広告を表示することが出来なくなりました。

まずは、まっさらなページで広告を表示させようとしています。

発生している問題・エラーメッセージ

以下、起動中の広告表示部分のHTMLソースです。
monacaデバッカーでも、プレビューでも広告が表示されませんでした。

<div id="adg" style="display: none;"> <script type="text/javascript" src="https://i.socdm.com/sdk/js/adg-script-loader.js?id=10722&adType=SP&displayid=0&targetID=adg_adg&async=true" class="loaded"></script> </div>

該当のソースコード

広告が表示されない原因を探ろうと、まっさらなページを作成した際のソースコードになります。

ad.jsは、以下サイトのものをコピペしてそのまま作成し、jsフォルダに入れています。
https://press.monaca.io/atsushi/228

javascript

1 2// Ad Generationの広告枠を作成するJavaScriptタグを生成します。 3function makeADGTag(adid , divid){ 4 var adg = document.getElementById(divid); 5 var script = document.createElement('script'); 6 script.type = 'text/javascript'; 7 // async=trueにすることによって非同期に対応されます 8 script.src ='https://i.socdm.com/sdk/js/adg-script-loader.js?id=' + adid + '&adType=SP&displayid=0&targetID=adg_' + divid + '&async=true'; 9 if(adg != null){ 10 adg.appendChild(script); 11 } 12 adg.style.display = 'none'; 13 var count = 0; 14 var timer = setInterval(function checkAd(){ 15 count++; 16 if(count > 100){ 17 clearInterval(timer); 18 return; 19 } 20 if(checkADGTag(adg) === true){ 21 clearInterval(timer); 22 adg.style.display = 'inline'; 23 } 24 },100); 25} 26 27// aタグを探す 28function checkADGTag(obj){ 29 var links = obj.getElementsByTagName('a'); 30 var frms = obj.getElementsByTagName('iframe'); 31 if(links.length > 0){ 32 makeADGLink(links); 33 return true; 34 } 35 36 var res = false; 37 for(var i = 0; i < frms.length; i++){ 38 if(checkADGTag(frms[i].contentWindow.document) === true){ 39 res = true 40 } 41 } 42 return res; 43} 44 45// aタグを置換する 46function makeADGLink(arr){ 47 for(var i = 0; i < arr.length; i++){ 48 (function(a) { 49 var href = a.href; 50 a.href = '#'; 51 a.onclick = function(){ 52 var ref = window.open(href, '_system'); 53 return false; 54 } 55 })(arr[i]); 56 } 57}

html

1 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/onsenui/js/onsenui.min.js"></script> 9 <script src="js/ad.js"></script><!--追加--> 10 11 <link rel="stylesheet" href="components/loader.css"> 12 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 13 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 14 <link rel="stylesheet" href="css/style.css"> 15 16 <script> 17 ons.ready(function() { 18 console.log("Onsen UI is ready!"); 19   makeADGTag(10722, 'adg'); //追加 20 }); 21 </script> 22</head> 23<body> 24 This is a template for Onsen UI app.<BR> 25 <div id="adg"></div><!--追加--> 26</body> 27</html>

試したこと

以下、サイトを参考にコードを書きました。

https://press.monaca.io/atsushi/228

https://qiita.com/kinyakon/items/b7868799ca5af91ed131

https://github.com/AdGeneration/sdk/wiki/Banner_Ad_Monaca

参考サイトはどれも1年以上前のもので、
Cordova CLI 7.1.0でAd Generationの広告を利用した例を検索して探しましたが、
見つかりませんでした。。

補足情報(FW/ツールのバージョンなど)

monaca無料プラン

新規プロジェクトで、Onsen UI V2 JS Minimumを選択。
プラグインで、InAppBrowserは有効にしています。

<試したバージョン>
Cordova CLI 7.1.0
iOSプラットフォーム 4.5.4
Androidプラットフォーム:6.4.0

以前のバージョンCordova CLI 6.2→Cordova CLI 6.5→Cordova CLI 7.1.0とアップデートしたところ、
広告が表示されなくなりました。
Cordova CLI 6.2では、広告は表示されていたと思うので、
バージョンアップが原因ではと思っております。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

以下のサイトを参考にしたら、まっさらな画面には表示できました。
https://github.com/AdGeneration/sdk/wiki/Banner_Ad_Monaca

■追記
表示できるようになりました。
z-indexで調整すればよかったようです。
例えば、以下のような感じです。

<div id="adg"></div> ↓ <div id = "adg" style="position:absolute;bottom:0px;width:100%;height:50px;z-index:99;"></div>

お試しください。

参考サイト
http://hatopp.wpblog.jp/archives/477

投稿2018/04/05 21:49

編集2018/04/09 21:27
itkdev

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Nakatasan

2018/04/08 01:30

ご確認いただきまして、ありがとうございます!! 以前、こちらのサイトも参考にしてみたのですが、表示されなかったので、もう一度とやってみます! ちなみに、Cordovaのバージョンはいくつで作業されましたか? 6.2では表示はされると思います。最初はそれでためしましたので、、。 7.1でも表示できましたか? 宜しければ、ご確認をお願い致します。
itkdev

2018/04/08 10:52 編集

Cordova は 7.1 を使用しています。 まっさらな画面に表示できたと言いましたが、実際には以下のような状態でした。 onsen ui の画面の下にバナー広告が表示されてしまっており、見える状態ではありませんでした。 ons-navigator に display : none を指定して消したところ、バナー広告の表示を確認できました。(もちろん、onsen ui の画面は消えました。) こちらですが、まだ解決できておらず、私も困っております。
Nakatasan

2018/04/09 04:55 編集

ご返信ありがとうございます! Cordova7.1で動作はしているということが確認できただけでも、 助かりました。。 私の方でも表示が下に重なってしまって、見えていないようです。。 OnsenUIの下に表示が行ってしまうのは、困ります。。 何か良い方法がないか、試してみます。 一先ず、表示されていることを確認して頂いて、ありがとうございます! ベストアンサーにさせて頂きました。 広告が表に表示されないと、完全に解決、とは行かないので、 回答はこのまま受けつけておきますね。 私も何か解決策があれば、追加させて頂きます。
itkdev

2018/04/09 05:14

私も何かわかったら、また書き込ませていただきます。 頑張りましょう! またよろしくお願い致します。
Nakatasan

2018/04/09 06:53

度々ありがとうございます!頑張りましょう! 他の方の参考にもなると思いますので、宜しくお願いします!
itkdev

2018/04/09 21:27

表示できるようになりました! 回答に追記しましたのでご確認ください。
Nakatasan

2018/04/11 00:33

ありがとうございます!! z-indexで表示できるようにできたのですね!私もやってみます!
Nakatasan

2018/04/18 03:32

ありがとうございました!! 遅れました、私のところでも表示することが出来ましたので、ご報告です! z-indexを調整することで、制作途中のアプリでも表示することが出来ました。 重ねてお礼申し上げます!
Nakatasan

2018/04/18 03:32

ありがとうございました!! 遅れました、私のところでも表示することが出来ましたので、ご報告です! z-indexを調整することで、制作途中のアプリでも表示することが出来ました。 重ねてお礼申し上げます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問