楽天の商品ページにバナーを差し込むjavascriptコードを作ってRMSに登録してみた。

ネットショップオーナー兼プログラマーブロガーの井川です。

 

「世はまさにモバイルファースト時代」

 

っと、そんな事を叫ばれている昨今、私の運営しているショップでもスマホ向けの商品ページにもっと力を入れようかと思って色々なサイトを調べていた所、こんな商品ページの作り方を見つけました。

（他のショップを晒すのはアレなので自分で実装した画像です。）

お分かりいただけただろうか？

カテゴリーとショップタイトルの間に謎のバナーを差し込んでいます。

 

商品ページ開いてすぐにバナーあると目立ちますね。

これ、どうやってるのかと思って自分で調べてコードを作りましたので、公開します。

 

 

楽天の商品ページにバナーを差し込むjavascriptコードの作り方

コード自体の中身を知らないと自分用に改造したい時に困ると思うので作り方も合わせて紹介します。

そんなん良いからコードだけ知りたい方のために、完成したコードはこちら。

[日付]、[商品URL]、[画像URL]を使いたい物に変更してコピペするだけですぐ使えます。

後は指定のgoldページにアップロードで完成！

 

ここからはjavascript何それ？って人用に詳しく説明していきます。

 

javascriptとは？

javascript（ジャバスクリプト）とは、ネットショップやWEBサイトなどで動かせるプログラミング言語です。

クライアントサイド言語と言われていてプログラミングを動かすためにスマホの力を使って計算したり表示させたりします。

スマホの処理能力を使うため、スマホの能力が低いとjavascriptを使ったページは表示に時間がかかります。

楽天のページは元々が重いため、動作が重い所にjavascriptを使うとより表示に時間が必要になるのであまり多用しない方が良いです。

 

もっと詳しく、本格的にjavascriptを知りたい人は教科書みたいなサイトがあるのでこっちで勉強してみて下さい。

JavaScript リファレンス

 

テキストエディタを決める

プログラミング言語を使うためにはテキストエディタと言う物が必要になります。

テキストエディタの説明をすると１記事出来るくらいのボリュームになってしまうので省略して、今回はどのパソコンにも入っているであろう「メモ帳」で作っていきます。

 

メモ帳を開いたらこちらのコードをコピペしてください。

ちょっと上にも書いた謎の英単語集団です。

各行の説明は後からご説明しますので、いまはとりあえずメモ帳にコピペして保存します。

 

ファイル名を決める。

メモ帳にプログラミングコードを入れて保存しようしたら名前を求められると思います。ってか求められます。

ファイル名は「frame.js」にしてください。

 

「frame.js」の「frame」部分は自分で好きな名前に設定できますが、あとから楽天のRMS上でも関連付ける必要があるので「frame」のままの方がスムーズにいきます。

「frame.js」の「.js」部分は拡張子と言われていて、JavaScriptを省略した文字で、「このファイルはjavascript用のファイルですよ」っと言う事を判断するための部分になります。

 

コード説明

それではいよいよコードの説明に入ります。

コピペしたコードをそのままアップロードしても画像や商品リンクなどが設定されていないのでぜひとも一度目を通してみて下さい。

 

まずは1行目「! function(){」、プログラミングを動かす時のおまじないです。「この中に書いたコードを動かすからね」って言う準備みたいな物だと思ってください。

2行目「"use strict"」、合っても無くても動きます。小難しいので「なんかいるわ」程度にスルーしてください。

 

3行目「var key = [日付];」、鍵となる日付を入れます。ここに入れた日付になるまでバナーを表示、過ぎた場合はバナーを表示しないと言う設定にしています。

「var key = 405;」だと4月5日、「var key = 1001;」だと10月1日、「var key = 1231;」だと12月31日までバナーを表示してくれます。

 

4行目「var date = new Date();」、いま現在の日付を取得してdateと言う箱の中にしまっています。

5行目「var month = (date.getMonth()+1)*100;」、今現在の月を取得して×100しています。

1月だと100、10月だと1000になります。

ちなみにプログラミングの世界では一番最初の月は「0」から始まるので1月は「0」、5月は「4」です。分かりやすいように今回は+1して実際の月に合わせています。

6行目「var day = date.getDate();」、今日の日にちを取得します。7日なら7、20日なら20になります。

7行目「var kei = month + day;」、取得した月と日を足します。2月14日とかなら「214」になります。

 

8行目「if(kei <= key){」、条件を指定しています。今日の日付が設定した鍵の日付以下ならば、なんか処理をします。

小学校くらいで習う比較演算ってやつですね。

9行目「jQuery('#topFuncShopPopup').after('<div><a href=\"[商品URL]\"><img width=\"100%\" src=\"[画像URL]\"></a></div>');」、長ったらしいですが中身は「楽天の商品ページにあるid=topFuncShopPopupのHTMLタグの後ろにバナーを差し込むよ」って事です。

topFuncShopPopupって言うのが楽天の商品ページ（スマホ版）のカテゴリーの名前です。

カテゴリーの後ろに１行バナーを入れるのでカテゴリーとショップタイトルの間にバナーが入るようになります。

 

タグにつけられた「id」や「class」名などはパソコンのキーボード「F12」を押すと分かります。

私の商品ページ上で「F12」を押すと下のような画面になります。

topFuncShopPopupって言うのがあるのが分かると思います。

これがカテゴリータグの親のid名になります。

 

HTMLについてはこの記事では説明しません。

詳しく知りたい方はHTML用のおすすめサイトのリンクを貼っておきますのでご覧ください。

HTML5リファレンス

 

RMSにコードを入れる

次に楽天のRMS上にjavascriptファイルを読み込むためのコードを入れます。

「店舗設定>デザイン設定>商品ページ共通パーツ設定」の中にある「商品ページ共通説明文」にコードを入れてます。

[店舗URL]には自分のショップのURLを入れます。

楽天RMSトップ画面上右上にある店舗名をクリックすると「店舗URL:」と言う項目があるので、そこに書いてある英数字を入れてください。

店舗URLを書き直したらコピペして保存します。

 

goldへアップロードする

作った「frame.js」を楽天のgoldへアップロードします。

FTPアップロードに関してはFTPクライアントと言うソフトを使います。

楽天は楽天用のFTPクライアントを提供してくれているようですが、私は個人的にずっとFileZillaと言うソフトでアップロードしていたので画像はFileZillaの物となっています。

今回は「display_frame」と言うフォルダを作ってその中に「frame.js」を入れます。

フォルダ無くてもいいのですが、どれがなんのファイルが分からなくなるので整理用にフォルダ分けしています。

 

FTPの設定にIDとPASSWORDを求められるのですが、必要なIDとPASSWORDは楽天RMS「店舗設定>画像・動画登録>FTPサーバ用パスワード変更」から見つける事が出来ます。

反映結果を見る

これで無事設定が出来ました。

ファイルをアップロードしてから実際に表示されまで時間がかかります。

反映されたかどうかの確認はアップロードしてから30分後くらいに確認して頂くと分かると思います。

 

お客様の購入意欲を上げて『つい』買ってしまう心理テクニックとは？

適当におしゃれなバナーを作っても買って貰えません。

なので、つい買ってしまう心理テクニックをバナーの中に入れていきましょう。

 

どういう心理テクニックがあるのかを説明しようと思うとボリュームが大きいので、別記事『売れない商品ページを売れる商品ページする心理テクニック11選』に詳しくまとめています。

バナーにも心理テクニックを入れて、お客様をワクワクさせるバナーを作ってみてください。

 

まとめ

javascriptを使って楽天の商品ページに無理やりバナーを差し込んでみました。

今回はカテゴリーとショップタイトルの間でしたが、付け加えるIDを増やしたり場所を変えたりするとサムネイルの前後に挟むように置いたり検索ボックスの前に置いたり結構自由に設定できるようになります。

 

注意点として、これはスマホのブラウザ表示の時にしか見えない事です。

アプリ表示の場合にはjavascript自体が動作しない上、表示されているサイトの構造そのものが違うので表示はされません。

ショップ回遊時限定の技ですが、競合ショップとの差別化になるので結構使ってるショップさんはいます。

 

2020年4月現在まだまだ現役で使えるので「いいな」っと思ったらぜひともお試しください。

 

ネットショップ向けバナーの作り方を知りたい人はこちらの記事も参考にしてみてください。

ネットショップ用バナーの作り方！現役ネットショップオーナー直伝！

バナー作成にデザインセンスは不要！作り方さえ知っていれば当てはめるだけで作る事が出来ます。 本記事はこんな方におすすめ デザイン初心者だけどバナー作りを任された人向け ネットショップ専用のバナーの作り ...

続きを見る