※2018/06/10 実際の広告コードを記載してしまったので、その箇所を修正。
nendのネイティブアド広告を一定の間隔で更新させるサンプルコードを作成してみた。
nendの広告コードを実行した際に生成されたHTMLをすべて削除し、新たに広告コードを呼び出すことで新しい広告を取得することができる。
※削除しないと広告コードを呼び出した分だけscript・img・inputのタグが蓄積される。
あとはOnsen UI上に取得した広告HTMLを表示させるだけ。
これに少し手を加えて、アプリに実装する予定。
nend広告に興味のある方は、下記バナーをクリック!!



まず、nendのネイティブアド広告のレイアウトを下記のように設定する。
[html]

{{AD_DEFINE_TAG:ptn=1,deco=2}}{{LONG_TEXT}}

[/html]

次に、Monacaで、「Onsen UI V2 Angular 1 Minimum」プロジェクトを作成し、下記ファイルを編集する。

index.html
[html]













Introduction

What is your name?

Hello, {{ hello.world || ‘stranger’ }}!




[/html]

style.css
[css]
#nend_nativeadspace {
width: 100%;
height: 80px;
background-color: #fff;
}
.div-ntad {
display: table;
margin: 0 auto;
width: 320px;
height: 80px;
}
.div-nendnt-img {
display: table-cell;
width: 80px;
height: 80px;
}
.div-nendnt-text {
display: table-cell;
width: 240px;
height: 80px;
font-size: 13px;
line-height: 1.2em;
vertical-align: middle;
word-wrap: break-word;
}
.span-nendnt-text {
display: table-cell;
padding-left: 5px;
vertical-align: middle;
}
[/css]

Recommended Posts