【新サービス】320×50バナー枠に新広告登場!1つの広告枠に複数広告を表示してCTR向上を狙う「アイコンハーフバナー」


halfbanner2
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

アスタのアイコン広告をはじめ、インタースティシャル広告や動画広告などスマホ業界では新しい広告サービスが続々と登場しています。
しかし、1,2年前まで主流だった320×50サイズのバナー広告は今でも大きな市場となっています。

そんなバナー広告枠で利用できる新広告サイズ「アイコンハーフバナー」をリリースしました!
アイコンハーフバナーは、アイコンとテキストが160×50サイズに収まった広告で、320×50では2つ、320×100では4つ広告を表示することができます。

今回はアイコンハーフバナーの掲載イメージと掲載方法をご紹介します!

まずはこちらをご覧ください。

実際の掲載イメージをご覧ください。
(スマートフォンからこの記事をご覧いただくと、実際の広告が表示されます。)
iconhalfbanner

アイコンハーフバナーの主な特徴

■ アイコンとテキストによる新しいクリエイティブ
 アプリ広告で重要となるアイコンに加え、最大約25文字までのテキストによる訴求が可能です。
 また、ユーザーが複数の広告から選択できるため、広告枠あたりのCTR向上が見込めます。

■ アプリやスマホ向けサイトに配信可能
 スマートフォン向け広告で一般的な320×50や320×100サイズの広告枠に対応しているため、
 アプリだけではなく、スマートフォン向けWebサイトへの配信も可能です。

■ SSPやJavaScriptタグで簡単に導入可能
 SSP各社やJavaScriptタグによる提供なので、SDKの導入は不要です。
 JavaScriptタグをご利用の場合は、CSSを編集することで文字色などを変更することも可能です。

Webサイトではjavascriptタグで簡単導入!

まずはスマホ向けWebサイトに掲載する方法をご紹介します。

広告枠の作成がお済みでない方は先に広告枠の新規作成を行います。
その後、承認されたら広告枠一覧よりタグを取得しましょう。

スクリーンショット_2014-02-25_20_14_17-3スクリーンショット_2014-02-25_20_15_39-13

①のコードをheadタグ内に、②のコードをbodyタグ内で広告を掲載したい箇所に掲載してください。
320×100サイズで表示したい場合は②のacCount=を4にすることで2段表示になります。

基本的な導入は以上で完了です。サンプルサイトはこちら↓
http://blog.astrsk.net/halfbanner.html (スマホからご覧ください)

アスタは1つのタグでiOSとAndroidに対応しており、ユーザーのOSを判別して自動的に最適な広告が表示されます。

文字色や背景色はCSSで自由に変更可能!

アスタの標準アイコンのJS版と同じく、文字色などのデザインはCSSをカスタマイズすることで変更できます。

例1:白背景+青&黒文字

サンプルページ (スマホからご覧ください)

body {
    margin:0;
    padding:0;
}
.astbanner {    /* jsタグを掲載するクラス(任意) */
    width: 320px;
    height: 50px;
    background-color: #FFF;
}
div.Astrskfncstx_sb .iconView {
    color:#3879d9;  /* 1行目の文字色 */
}
div.Astrskfncstx_sb .iconView .ast_descrSpan1,
div.Astrskfncstx_sb .iconView .ast_descrSpan2{
    color:#333;  /* 2,3行目の文字色 */
}
div.Astrskfncstx_sb .iconView:hover {
    background-color:#CCC;    /* タップ時のホバー色 */
}
<div class="astbanner">
    <!--/__MEDIA_CODE__を置き換えてご利用ください。/-->
    <script type="text/javascript" src="http://public.astrsk.net/__MEDIA_CODE__/mab-sb.js?size=160x50&amp;acCount=2" ><!--//--></script>
</div>

例2:15秒間隔で上下にローテーション

サンプルページ (スマホからご覧ください)

body {
    margin:0;
    padding:0;
}
.astbanner{
    width: 320px;
    height: 50px;
    background-color: #333;
    overflow:hidden;
}
div.Astrskfncstx_sb.base {
    -webkit-animation: appearing 30s ease 15s infinite normal;
    -moz-animation: appearing 30s ease 15s infinite normal;
}
@-webkit-keyframes appearing {
    0%   {-webkit-transform:translateY(0px); }
    2%   {-webkit-transform:translateY(-50px);}
    50%  {-webkit-transform:translateY(-50px); }
    52%  {-webkit-transform:translateY(0px);}
    100%  {-webkit-transform:translateY(0px); }
}
@-moz-keyframes appearing {
    0%   {-moz-transform:translateY(0px); }
    2%   {-moz-transform:translateY(-50px);}
    50%  {-moz-transform:translateY(-50px); }
    52%  {-moz-transform:translateY(0px);}
    100%  {-moz-transform:translateY(0px); }
}
<div class="astbanner">
    <!--/__MEDIA_CODE__を置き換えてご利用ください。/-->
    <!--/acCount=4でご利用ください/-->
    <script type="text/javascript" src="http://public.astrsk.net/__MEDIA_CODE__/mab-sb.js?size=160x50&amp;acCount=4" ><!--//--></script>
</div>

デザインを調整することで掲載サイトの雰囲気を崩すことなく、見た目をキレイに整えることが可能です。
※CSSで文字や画像のサイズも変更できますが、レイアウトが崩れるおそれがあるためご遠慮ください。

アプリではSSP各社より順次利用可能に!

アイコンハーフバナーはWebサイトだけではなく、アプリでも利用することができます。
しかし、アプリの広告枠にJSタグを直に張っている方は少ないと思います。
最近ではSSP※1を利用しているデベロッパ様が多いことから以下のSSPで順次利用できるようになります。

  • Ad Generation (株式会社mediba)
  • AdStir (ユナイテッド株式会社)
  • アドフリくん (株式会社寺島情報企画)
  • Fluct (株式会社adingo)

上記SSP様を既にご利用でアイコンハーフバナーの掲載をお試しされたい方は、
お問い合わせページよりお気軽にご連絡ください。

その他、Googleが提供するADサーバー「DFPスタンダード」などでも設定次第で利用することができます。
こちらについては次回の記事で詳しくご紹介いたします。

アスタではバナー広告の収益にお悩みのデベロッパー様を大募集中です。
新規登録、お問い合わせはこちらからお気軽にどうぞ。

Feedlyで購読
follow us in feedly