自分の時間を作るプログラミング技術

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

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

 

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

 

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

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

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

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

 

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

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

 

この記事を書いたのはこんな人

ネットショップコンサルタント

 

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

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

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

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

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

 

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

 

javascriptとは?

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

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

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

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

 

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

JavaScript リファレンス

 

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

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

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

 

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

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

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

 

ファイル名を決める。

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

ファイル名は「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って言うのが楽天の商品ページ(スマホ版)のカテゴリーの名前です。

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

 

タグにつけられた「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月現在まだまだ現役で使えるので「いいな」っと思ったらぜひともお試しください。

 

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

デザイン
ネットショップ用バナーの作り方!現役ネットショップオーナー直伝!

バナーを作らないといけないけどデザインセンスが無さすぎてバナーが作れない。どこから手を出せばいいの? バナー作成にデザインセンスは不要!作り方さえ知っていれば当てはめるだけで作る事が出来ます。 本記事 ...

続きを見る

 

お得な特典があるサービス一覧

注目コンテンツ

ネットショップ開業におすすめなショッピングカート10選!現役ネットショップ店長が徹底比較!

ネットショップ開きたいけどネットショップのショッピングカートって種類多すぎてどれを選べばいいのか分からない。各サービス毎に特徴を教えて!ついでにおすすめはどれ? ショッピングカートは機能や規模によって ...

続きを見る

新着記事一覧

COMICA CVM-VM20 ショットガンマイク

ファンを作るSNS運用とは

【動画撮影向け】Canon EOS Rにピッタリのマイク『COMICA CVM-VM20 ショットガンマイク』購入レビュー

Youtubeの動画撮影でCanon EOS Rに使えるマイクを知りたい Canon EOS R用の外部マイク『COMICA CVM-VM20 ショットガンマイク』の実使用レビューを知りたい &nbs ...

起業 商工会議所 メリット

社長になる第一歩!開業方法まとめ

起業した経営者が商工会議所に入会するメリット・デメリット

商工会議所ってどんな所なのか知りたい 起業したばかりの経営者が商工会議所に入るメリットを知りたい 商工会議所で人脈って作れるのか知りたい 本記事では、このような悩みを解決します。   &nb ...

Excel 自分の時間を作るプログラミング技術

エクセルの単価表から新しい単価を抽出して反映させる関数

メーカーから貰った単価表の単価だけを抽出して、既存の単価表に移植させたい! 本記事では、このような悩みを解決します。     メーカーが値上げすると商品全部の値段を見直さないといけ ...

excel 半角カタカナ 全角

Excel 自分の時間を作るプログラミング技術

excelで半角カタカナの文字を全角の文字に変換する方法

半角カタカナが入ってるセルを全角に変換したい! 本記事では、このような悩みを解決します。     excelで半角カタカナの文字を全角の文字に変換する方法 画像のように半角カタカナ ...

Excel

Excelで特定の文字が含まれていたら処理を起こす関数

Excelで特定の文字が含まれていたら処理を起こす関数と使い方を知りたい 本記事では、このような疑問を解決します。     特定の文字が含まれていたら処理を起こす関数【COUNTI ...

新着記事一覧を見る

  • この記事を書いた人
  • 最新記事

井川 裕輝

元倉庫業からEC総合責任者へ昇進。副業でもやってたEC事業で独立。その後Lステップと言うツールに出会い、岡山県でLステップ構築代行者として活動を始める。

-自分の時間を作るプログラミング技術

© 2023 ネットショップ情報メディア『WellMaga』