EC運営ヒント

楽天・Yahoo!でも使える!予約可能なタイマー式バナーの設置方法

投稿日:

[`evernote` not found]
LINEで送る

どうも!!きたむです!

楽天で毎月開催されるキャンペーンや、店舗独自で行うセール、イベントなど、店舗運営をする上でこういったイベントの告知は重要な仕事の一つです!

告知する方法はとしては「バナー掲載」や「メルマガ配信」などが主な方法ですよね。

店舗運営者は忙しく、終わらせれる仕事はできるときに一つでも終わらせておきたいですよね!
メルマガ配信は予約ができるので、一気に作って予約することができますが、バナー掲載はリアルタイムで変更するしかないですよね。。。

バナーの内容によってはイベント開催前と、イベント開催中などでバナーを変更することもよくありますし、スケジュールを常に意識しておかないといけません。
楽天のスーパーセールなどは夜中の1:59に終わることもありますし、
「夜中まで起きているのもキツイ。。。寝てしまったらどうしよう!!!バナーも予約設定ができれば楽なのに!!」
とそんな声にお答えし、javascriptで日付と時間を設定し、表示するバナーを変更できる方法をご紹介します。

例:

javascriptの設定

下記のjavascriptに日付と時間を設定し、バナーのhtmlを設定します。
下記のjavascriptをコピーして「bnr-timer.js」という名前をつけて保存してください。
編集方法は以下で説明いたします。

img = new Array();

/*===========================================================
d1 には開始時、d3 には終了時を指定
月には 1月から順に
Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec
を指定
===========================================================*/

/*============
バナー1(10/20 17:00~10/20 17:30)
==============*/
var d1_1 = new Date("Oct 20, 2017 17:00:00");
var d1_2 = new Date();
var d1_3 = new Date("Oct 20, 2017 17:30:59");

img[1] = "<div><a href='リンク先URL' target='_blank'><img src='画像パス' alt='' border='0'></a></div>";


/*============
バナー2(10/20 17:31~10/30 20:59)
==============*/
var d2_1 = new Date("Oct 20, 2017 17:31:00");
var d2_2 = new Date();
var d2_3 = new Date("Oct 30, 2017 20:59:59");

img[2] = "<div></div>";


/*============
バナー3()
==============*/
var d3_1 = new Date("Oct 01, 2020 00:00:00");
var d3_2 = new Date();
var d3_3 = new Date("Oct 31, 2020 23:59:59");

img[3] = "";


/*============
バナー4()
==============*/
var d4_1 = new Date("Oct 4, 2020 10:00:00");
var d4_2 = new Date();
var d4_3 = new Date("Nov 1, 2020 09:59:59");

img[4] = "";


/*============
バナー5()
==============*/
var d5_1 = new Date("Oct 05, 2020 10:00:00");
var d5_2 = new Date();
var d5_3 = new Date("Oct 09, 2020 09:59:59");

img[5] = "";


/*====================
3.出力条件設定 ※基本触らない!!!!
======================*/

/* 1つ目 出力 */
if ((d1_1.getTime() < d1_2.getTime()) && (d1_2.getTime() < d1_3.getTime())) {
	document.write(img[1]);
}
/* 2つ目 出力 */
if ((d2_1.getTime() < d2_2.getTime()) && (d2_2.getTime() < d2_3.getTime())) {
	document.write(img[2]);
}
/* 3つ目 出力 */
if ((d3_1.getTime() < d3_2.getTime()) && (d3_2.getTime() < d3_3.getTime())) {
	document.write(img[3]);
}
/* 4つ目 出力 */
if ((d4_1.getTime() < d4_2.getTime()) && (d4_2.getTime() < d4_3.getTime())) {
	document.write(img[4]);
}
/* 5つ目 出力 */
if ((d5_1.getTime() < d5_2.getTime()) && (d5_2.getTime() < d5_3.getTime())) {
	document.write(img[5]);
}

 

日にちと時間の設定

d1 には開始時、d3 には終了時を指定してください。
「new Date("Oct 14, 2017 20:00:00");」中で「月、日付、年、時間」の順番で設定します。
月には 1月から順に「Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec」を指定してください。

/*1つ目のオブジェクト*/
var d1_1 = new Date("Oct 14, 2017 20:00:00");
var d1_2 = new Date();
var d1_3 = new Date("Oct 18, 2017 09:59:59");

 

バナーのhtmlを設定

上記のタイマーの「/*1つ目のオブジェクト*/」と対になるhtml。
「リンクURL」「画像パス」を設定します。バナーはいくつ設定しても問題ありませんが、htmlは必ず改行を消した状態で、
「img[1] = "";」の中に入れてください。
あとは「ダブルコーテーション」は使えません。必ず「シングルコーテーション」で囲ってください。
img[1] = "<div><a href='リンクURL' target='_blank'><img src='画像パス' alt='' border='0'></a></div>";

 

javascriptを設置

タイマーとバナーをセットした「timer.js」をgoldサーバーの任意の場所にアップし、
下記のようにバナーを表示したい場所にscriptタグで「timer.js」を読み込ませるとバナータイマー式のバナーの設置が完了です。

<body>

<script src="任意のディレクトリ/timer.js"></script>

</body>

このjsは本当に便利なjsですが、時間の設定を間違えると違うバナーが出てしまったり、
逆にバナーが出なかったりするので、設定した後は必ず、カレンダー機能で時間通りの設定ができているか試していただくことをオススメします!

関連ニュース

[`evernote` not found]
LINEで送る

-EC運営ヒント

Copyright© EC grow | EC関連のニュースメディアサイト , 2017 All Rights Reserved.