*

スマホ用サイトへの転送を記憶させるJavaScript(楽天Gold用)

公開日: : 楽天RMS, スマホ対策


楽天Goldでページを作成している場合、レスポンシブデザインでないかぎり、
スマホでページを見ている人はスマホ専用サイトに転送する必要があります。

「スマホサイトがあります、表示しますか?」と表示して
お客様に毎回選択させているショップ様がほとんどのようですが、
毎回メッセージを出すのはユーザビリティとして非常に劣悪です。

かと言って、強制的に転送するのもPCとスマホで情報量が違うから、好ましくありません。
そこで、PC版を見るかスマホ版を見るか、選んだ内容を記憶させておきましょう。
まず、楽天Goldのページの<BODY>より前の部分に、以下のJavaScriptを貼っておきます。

1.楽天GoldのPC板ページに貼るJavaScript

<script type=”text/javascript”>
// 動作確認テスト用 localStorage.removeItem(“sp_set”);
var spsite=”スマホサイトURL”;
var ua=navigator.userAgent;
switch ( localStorage.getItem(“sp_set”) ){
case “sp”:
location.href = spsite;
break;
case”pc”:
break;
case null:
if( ua.indexOf(‘iPhone’) > 0 || ua.indexOf(‘iPod’) > 0 || ua.indexOf(‘Android’) > 0 ){
if(confirm(‘スマートフォン用サイトを表示しますか?’)) {
localStorage.setItem(“sp_set”,”sp”);
location.href = spsite;
}else{
localStorage.setItem(“sp_set”,”pc”);
}
}
}
</script>

JavaScriptの設定

3行目のスマホサイトURL欄に、転送させたいスマホページのURLを入れます。
また、// 動作確認テスト用 の部分を消すと毎回確認のメッセージが出るようになるので、転送が問題ないかチェックすることができます。
問題なかったら、「// 動作確認テスト用 localStorage.removeItem(“sp_set”);」の部分は行ごと消して大丈夫です。

スマホサイトの設定

1の設定だけだと、一度スマホサイトを見たあとに、PC版を見たいと思ってPC版トップページを開いても常にスマホ版に転送されるようになってしまいます。
そこで、スマートフォン版ページの方にも「PC版を見る」などのリンクを置いて、HTML
を以下のようにしておきます。

2.スマートフォン板ページに貼るJavaScript

<script type=”text/javascript”>
function pcmove(){
localStorage.setItem(“sp_set”,”pc”);
</script>

スマートフォン版ページのHTMLの設定

上記のJavaScriptをスマホ版ページのHTMLのBODYより前に貼ったあと、PC版を見るなどのリンクを作り、リンクの中にonclick=”pcmove()”という項目を付けます。
PC版を見る
これで、PC版を見たい人は転送されることなくPC版が見えるようになります。

3.PC版ページの仕上げ

これでスマホサイトを見たあとPCサイトを見たい人はPCサイトが見えるようになりましたが、もう一度スマホサイトを見たい人が見えるようにする必要があります。
2の手順と同様に、まず以下のJavaScriptをPC版ページのBODYより前に入力します。
<script type=”text/javascript”>
function spmove(){
localStorage.setItem(“sp_set”,”sp”);
</script>

PC版ページのHTMLの設定

上記のJavaScriptをPC版ページのHTMLのBODYより前に貼ったあと、スマホ版を見るなどのリンクを作り、リンクの中にonclick=”spmove()”という項目を付けます。
スマホで見る

関連記事

no image

楽天ショップのショップ内サーチのカスタマイズ

楽天ショップで設置できる店舗内検索について 店舗内検索のフォームは実は裏側でいろいろなパラメータを

記事を読む

楽天Goldで作成したページのFacebook最適化(OGP設定)

楽天GoldページのFacebookへの対応の仕方-OGP 楽天Goldで作成したページも、Fac

記事を読む

楽天RMSの項目選択肢別在庫に出る納期のデザインを変更

項目選択肢別在庫の納期情報の文字色・サイズなどの変更 1月13日から楽天では納期情報が必須になるた

記事を読む

楽天RMSでの消費税の変更方法

4月1日から消費税率が8%に変更になりますが、 1月27日現在の発表では楽天市場では消費税は自動で

記事を読む

楽天ディレクトリID(商品ジャンル)とタグIDの変更

楽天ディレクトリID(商品ジャンル)とタグIDの変更の影響について 2014/05/18に楽天の全

記事を読む

お荷物伝票番号付きURLの発送メールへの入れ方 楽天RMS対応

配送状況に関する問い合わせを減らすには? ネットショップでよくあるお問い合わせの一つが、配送状況の

記事を読む

楽天スマホページでヒートマップを導入して改善

ヒートマップとは、ユーザーがどのように行動したか、可視化してくれるツールです。 以下のように、どこ

記事を読む

楽天R-Backofficeに受注CSVを戻すときの注意点

R-BackofficeにCSVアップロードで注文修正すると消費税が8%に! 楽天ネットショップで

記事を読む

楽天Goldで作ったページをモバイルフレンドリー対応にするには?

Googleが、2015年4月21日からスマートフォン対応していないサイトは検索での順位を落とすと発

記事を読む

楽天、YahooなどのCSVをExcelで安全に開くには?

楽天やYahooショッピングなど、ネットショップの業務をやっていると「CSVデータ」がないと出来ない

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

RPP(楽天 検索連動型広告)で商品を除外する方法

楽天RPP(キーワード広告)でパフォーマンスレポートの見方はこちらのR

RPP最初の画面
RPPパフォーマンスレポートの新規、既存などの意味は?

楽天RPP(キーワード広告)を運用していく上で大事なのは、成果を見て改

no image
RPP(楽天キーワード広告)の平均ROASは?

楽天では、RPP(楽天プロモーションプラットフォーム)という検索画面に

no image
楽天ペイ(RMS)で効率的に受注管理するには?

楽天ペイは今までの受注管理、R-Backofficeと異なりステータス

Yahooショッピング SEO(7)3月14日から低評価でペナルティ

Yahooショッピングで2017年10月に発表された、評価が悪いショッ

→もっと見る

PAGE TOP ↑