「cb-slideshowad-js」概要

「cb-slideshowad-js」は、複数のバナー広告を組み合わせて「スライドショー動画広告」を実装するjQueryプラグインです。「スライドショー動画広告」にすることで、広告をリッチに見せることができ、広告のクリック率を向上させることができるようになります。静止画像では実現できなかった広告にストーリーを持たせるということが可能となり広告の訴求力を高めます。

• maechabin/cb-slideshowad-js

当プラグインには、以下のような特徴があります。

ちょうど昨年の10月頃にFacebook広告でもスライドショー動画広告の提供を開始していたりします。やはりこうした動きを見ると、いかに広告をリッチに見せるかが、ネット広告の業界では至上命題になってきていますね。当プラグインは広告を掲載する側の方向け（メディア向け）となっていますが、ぜひ当プラグインを使って掲載する広告の効果を高めてみてください。

「cb-slideshowad-js」サンプル

「cb-slideshowad-js」を使ってどのようなものが実装できるか、まずはサンプルをご覧ください。

• cb-slideshowad-js サンプル

「cb-slideshowad-js」のダウンロード

「cb-slideshowad-js」の入手先はGitHubのページからとなります。

• cb-slideshowad-jsをダウロード

[git clone]コマンドでローカルにコピーしてもよいです。

npm経由でも入手可能です。

使用するファイルは以下のjsファイルとなります。

「cb-slideshowad-js」の実装方法

1. ライブラリの読み込み

jQuery本体と、distディレクトリ内の「jquery.slideshowad.js」をページに読み込みます。

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="./dist/jquery.slideshowad.js"></script>

2. スライドショー動画広告を表示させる＜要素＞を準備

htmlファイル内にスライドショー動画広告を表示させる要素を作成し、任意のclass名またはid名を付けます。

<div class="slideshowad-images">

<!-- ここにスライドショーさせたいバナー広告を複数コピーしていきます -->

</div>

また、作成した要素に対して、以下のスタイルを指定します。（ページ表示時に、設定した広告の画像が表示されるのを防ぐためです。）

<style>
.slideshowad-images {
  display: none;
}
</style>

3. スライドショーさせる広告（URLと画像）を設定

上記で作成した＜要素＞内にスライドショーさせたい広告タグ（リンク, 画像[, インプレッション計測用画像]）をスライドショーさせたい順番に上から貼り付けていきます（貼り付けた順番にスライドショーが実行されます）。貼り付ける広告の数に制限はありません。また貼り付ける広告の画像はできるだけ同じサイズのものとすることをお勧めします。

<div class="slideshowad-images">
  <!-- 1つ目の広告タグ -->
  <a href="https://example.com/">
    <img src="https://exapmle.com/example1.png" width="300" height="250">
  </a>
  <img src="https://example.com/img1.gif" width="1" height="1">

  <!-- 2つ目の広告タグ -->
  <a href="https://example.com/">
    <img src="https://exapmle.com/example2.png" width="300" height="250">
  </a>
  <img src="https://example.com/img2.gif" width="1" height="1">

  <!-- 3つ目の広告タグ -->
  <a href="https://example.com/">
    <img src="https://exapmle.com/example3.png" width="300" height="250">
  </a>
  <img src="https://example.com/img3.gif" width="1" height="1">
</div>

設定する広告タグは以下の形式（img要素を持ったa要素）となります。

<!-- 広告の飛び先URL（href属性 必須） -->
<a href="https://example.com/">
    <!-- 広告の画像（width属性/height属性 必須） -->
  <img src="https://exapmle.com/example.png" width="300" height="250">
</a>
<!-- インプレッション計測用のimg要素（任意） -->
<img src="https://example.com/img.gif" width="1" height="1">

a要素には必ずhref属性、img要素にはwidth属性、height属性を設定するようにしてください（width属性、height属性がないと画像の表示サイズに不具合が生じる場合があります）。インプレッション（広告の表示数）を計測するための幅1px、高さ1pxのimg要素はあってもなくても問題ありません。多くのアフィリエイトサービスの広告タグは以下の形式となっていることが多いです。

4. プラグインを実行

ステップ2で作成した要素に対して、.slideShowAd()メソッドの呼び出しを行います。オプションはメソッドの引数にセットします。

「cb-slideshowad-js」のオプション

「cb-slideshowad-js」のオプションは以下の通りです。オプションは.slideShowAd()メソッドの引数に、　オブジェクトリテラル形式で指定します。

slideShowType {String}

スライドショー動画広告のスライドショーのタイプを以下より指定します。デフォルト値は、fade。

• fade: フェードイン・フェードアウト
• flipY: Y軸を軸に横方向へのフリップ
• flipX: X軸を軸とする縦方向のフリップ
• slideLeft: 左から右へのスライド
• slideRight: 右から左へのスライド
• slideTop: 上から下へのスライド
• slideBottom: 下から上へのスライド

width {String}

スライドショー動画広告を表示させる要素の「幅」を指定します。CSSでwidthに指定できる値で指定します。デフォルト値は、1つ目の広告として貼り付けた画像のサイズの幅となります。

height {String}

スライドショー動画広告を表示させる要素の「高さ」を指定します。CSSでheightに指定できる値で指定します。デフォルト値は、1つ目の広告として貼り付けた画像のサイズの高さとなります。

interval {Number}

スライドショーの間隔を指定します。数値（単位はミリ秒)で指定します。デフォルト値は5000（5秒）。

targetBlank {Boolean}

リンク先を別ウィンドウで表示するかしないか指定します。trueにするとリンク先を別ウィンドウで表示します。デフォルト値はfalse。

オプションの指定方法は以下の通りです。.slideShowAd()メソッドの引数にオブジェクトリテラル形式でオプションを指定します。

// 幅300px、高さ250px、スライドショーの間隔を3秒に設定
$('.slideshowad-images').slideShowAd({
  'width': '300px',
  'height': '250px',
  'interval': '3000'
});

// スライドショータイプを縦方向のフリップタイプ、リンク先を別ウィンドウで表示させる設定
$('.slideshowad-images').slideShowAd({
  'slideShowType': 'flipX',
  'targetBlank': true
});

「cb-slideshowad-js」の実装例

ファイドイン・フェイドアウトタイプ

スライドショーのタイプはデフォルトでファイドイン・フェイドアウトタイプとなっているので、特にslideShowTypeオプションの指定は必要ありません。それからのこの事例では、スライドショーの間隔をintervalオプションで2000（2秒）に設定しています。

$('.slideshowad-images').slideShowAd({
  interval: '2000'
});

X軸を軸とする縦方向のフリップタイプ

スライドショーを縦方向のフリップタイプにする場合は、slideShowTypeオプションにflipXを指定します。それからこの事例では、スライドショーの間隔をintervalオプションで2000（2秒）に設定し、さらに広告の飛び先を別ウィンドウで開くようにtargetBlankオプションをtrueに設定しています。

$('.slideshowad-images').slideShowAd({
  slideShowType: 'flipX',
  interval: '2000',
  targetBlank: ture
});

右から左へのスライドタイプ

スライドショーを右から左へ動くスライドタイプにする場合は、slideShowTypeオプションにslideRightを指定します。それからこの事例では、スライドショーの間隔をintervalオプションで2000（2秒）に設定し、さらに広告自体の高さをheightオプションで300pxに設定しています。

$('.slideshowad-images').slideShowAd({
  slideShowType: 'slideRight',
  interval: '2000',
  height: '300px'
});

補足: 対応ASP（アフィリエイトサービス）一覧

当プラグインは、主にアフィリエイトサービスの広告を使用することを想定しています。そのまま管理画面から広告タグをコピーして使えるアフィリエイトサービスを一部ですがご紹介します。（調査中）

A8.net / Moba8.net / リンクシェア / TGアフィリエイト / Amazonアソシエイト

まとめ

広告に動きを加えることでその広告の注目度は高まります。さらに複数の画像を使ってストーリー仕立てにすることで訴求力も高まります。ぜひ当プラグインを使って、掲載する広告をリッチに演出してみてください。誰でも気軽に実装できるようにjQueryプラグインにしているので、実装方法もとてもシンプルなものになっています。

• maechabin/cb-slideshowad-js

ぜひお使いいただき、何かご意見、ご要望などあればお知らせいただけると幸いです。