楽天店舗のヘッダーに設置したバナーを即時反映、javascriptで期間指定表示（タイマー設定）させる方法
毎月2〜3回開催されるお買い物マラソンやスーパーSALEなどのキャンペーン、皆さんは毎回しっかりと対策をされていますか？
キャンペーンごとに新しい画像を作成し、ページに設定する作業はとても手間がかかります。楽天RMSは日々改善が進んで便利になる一方、古くから変わらない仕様や不便に感じる点もいくつかあります。
例えば、R-cabinetに格納した画像に関してですが、画像を同じファイル名で上書きした場合、反映に最大で24時間かかるという仕様は、昔から変わっていません。
そのため、画像を新しくするたびに新しいファイル名で保存する必要があり、不便だと感じる方も多いでしょう。
また、楽天RMSではJavaScriptが使用できないことも、悩みの種となっている店舗様がいらっしゃるかもしれません。
JavaScriptが使えれば、もっと自由度の高い設定が可能になるのに、と思うこともありますよね。
そこで、今回はこれらの問題に対応するための方法をご紹介致します。
上書き保存した画像を即時反映させる方法
前述した通り、楽天R-cabinetに登録した画像を上書きした場合、反映までに最大24時間かかります。しかしそんなに待ってられませんよね。そこで画像を上書きしたらすぐに反映させる方法を紹介致します。
画像ファイル（バナー）の格納場所について
楽天には、「R-cabinet」の他に「楽天GOLDサーバ」にも画像を格納することができます。それぞれ下記の利点と欠点があります。
- R-cabinet：容量が多く便利ですが、アップロードできる画像形式や容量・サイズに制限があり、上書き保存後、反映までに最大24時間かかります。また、画像を一括でダウンロードすることも出来ません。
- 楽天GOLDサーバ：容量が1GBと少ないものの、どんなファイルでもアップロードでき、即時反映されるという利点があります。さらに、アップロード・ダウンロードが容易に行えます。
画像ファイル（バナー）を即時反映させる方法
頻繁に更新するキャンペーンバナーなどは、即時反映される楽天GOLDサーバにアップロードすることをおすすめします。
しかし、楽天GOLDサーバに画像を上書きしても反映されないことがあります。その原因はキャッシュにあります。楽天GOLDサーバに格納されたファイルは即時反映されるのですが、なぜか画像ファイルだけキャッシュが強く残って即時に反映されない時があります。
これはファイル名の後ろにパラメータを追加することで解決します。例えば、下記のように「?a」を付けると、キャッシュではなく最新の画像が表示されます。「?」の後ろは任意の半角英数字を指定してください。
https://www.rakuten.ne.jp/gold/店舗URL/xxx.jpg
↓
https://www.rakuten.ne.jp/gold/店舗URL/xxx.jpg?aただし、パラメータを含めた画像URLを設定できる箇所と出来ない箇所があります。HTMLを記述できるエリアはOK、画像URLを設定する箇所はNGと覚えておくとよいです。
パラメータを含めた画像URLが設定できる場所（HTMLを記述できる箇所）
- 楽天GOLDサーバ上のページ
- ヘッダー、フッター、レフトナビエリア
- 共通説明文エリア
- 商品ページの販売説明文や商品説明文
- HTMLメルマガ
パラメータを含めた画像URLが設定できない場所（画像URLを設定する箇所）
- 商品ページの画像（1〜20）
- レスポンシブメルマガ
- スマホ用共通バナー
パラメータを設定できる場所とできない場所の違いをしっかり理解しておきましょう。
メルマガに設定できる画像ファイル（バナー）について
ここで一つ注意点があります。パラメータを設定できる箇所にHTMLメルマガが指定されています。
楽天のメルマガは通常、R-cabinetの画像しか設定出来ません。しかし、サムネイル画像のURLを指定することで楽天GOLDサーバの画像を設定することが出来るのです。
楽天GOLDサーバに格納した画像は、下記の4種類のURLがあります。
- 通常のURL：https://www.rakuten.ne.jp/gold/店舗URL/xxx.jpg
- サムネイル画像のURL1：https://thumbnail.image.rakuten.co.jp/@0_gold/店舗URL/xxx.jpg
- サムネイル画像のURL2：https://tshop.r10s.jp/gold/店舗URL/xxx.jpg
- サムネイル画像のURL3：https://shop.r10s.jp/gold/店舗URL/xxx.jpg
通常のURLは、HTMLメルマガに設定することは出来ませんが、サムネイル画像のURLはメルマガに設定することが可能です！ぜひお試しください。
楽天RMSのヘッダーエリアでJavaScriptを使用する方法
楽天RMSのHTML設定エリアでは、通常JavaScriptファイルを読み込むための<script>タグが使えません。
scriptタグを含めたHTMLファイルを楽天GOLDサーバに格納し、それをiframeで読み込む方法がありますが、今回は、ヘッダー・フッター・レフトナビに直接scriptタグを記述する方法を紹介致します。
それはonpageshow属性を使用することで、JavaScriptを実行することが可能です。（onpageshow属性はPCのみで、スマホでは使用できません）例えば、次のコードをヘッダーエリアに追加すると、ページを開いた時に「ページが表示されました」とアラートを表示することができます。
<body onpageshow="alert('ページが表示されました')">
<h1>こんにちは！</h1>
</body>さらに、楽天の商品ページでは、jQueryが既に読み込まれているため、jQueryを使ったスクリプトも動作します。例として、ヘッダーエリアにバナーを日時指定で切り替える方法をご紹介致します。
jQueryを使った画像の期間表示設定（タイマー設定）
キャンペーンの開始や終了に合わせて、バナーの表示を自動で切り替える方法を紹介します。最初に下記のコードをヘッダー・フッター・レフトナビエリアに設定します。
<body onpageshow="
(function ($) {
$('.view_timer').each(function(index, target) {
var startDate = $(this).attr('data-start-date');
var endDate = $(this).attr('data-end-date');
var nowDate = new Date();
if (startDate) {
startDate = new Date(startDate);
} else {
startDate = nowDate;
}
if (endDate) {
endDate = new Date(endDate);
}
if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
$(this).show();
} else {
$(this).hide();
}
});
})(jQuery);
"></body>次に、ヘッダーエリアに表示したいバナーの<img>タグを、以下のような<div>で囲み、data-start-dateおよびdata-end-dateで表示期間を指定します。
<div class="view_timer" data-start-date="2024/01/01 00:00:00" data-end-date="2024/01/31 23:59:59" style="display:none;">
<img src="画像URL">
</div>これで、PCのヘッダーエリアにも、キャンペーン期間中のみバナーを表示させることができます。この方法を使用することで、PCページ内のどこでもバナー画像の期間表示指定が可能となります。
いかがでしたか。
今回ご紹介した楽天RMSの小技を活用することで、キャンペーンの準備やページの更新作業がより効率的になるはずです。日々の運営で少しでも手間を減らし、売上アップにつながる施策に集中できるよう、ぜひこれらのテクニックをお試しください。
楽天店舗構築や商品ページ構築などページ構築楽天RMSは進化を続ける一方、昔ながらの仕様も多く残っていますが、少しの工夫や技を使うことで、使い勝手を大幅に向上させることができます。
今後もさらなる改善や便利な方法を見つけた際には、またご紹介しますので、ぜひ引き続きチェックしてみてください。
楽天店舗構築、キャンペーンページ構築などでご不明な点がございましたら、お気軽にお問い合わせください。
