スマートフォンでの表示選択

スマートフォンでの表示選択

解説

スマートフォンでは携帯と違い画面サイズの大きい機種やピンチアウトによる拡大表示が可能なため、 携帯用に変換されたサイトではなくPC用のサイトをそのまま表示しても問題なく閲覧することが可能となっておりますが、 当サイトで解説しているリダイレクトの設定を行なうと携帯用サイトに転送されてしまいます。

そこで、最近良く見かけるJavaScriptによる表示サイトの確認画面（下記画像参照）を表示し、 訪問者がどちらのサイトを表示するかを選択できるようになります。

※携帯電話ではJavaScriptが動作しないため、携帯電話だけをリダイレクトで携帯サイトへ転送する必要があります。

ipod

設定方法

下記ソースの2箇所をお客様の情報に書き換え、PCサイトの<body>と</body>の間に挿入してください。

1、▲▲▲▲　を　お客様のPCサイトのドメインへ書き換え
例） sample.co.jp

※　http://www.sample.co.jp/ はドメインではなくURLですのでご注意ください。

※　変換元のPCサイト内で別ページに遷移するたびに毎回表示される場合は、この部分の記述ミスによるものです。


2、●●●●　を　お客様の携帯サイトのURLへ書き換え
例） http://*****

※設定するＰＣサイトと同じ階層にする必要があります。
　設定するPCサイトが　http://www.sample.co.jp/aaa/faq.html　の場合、
　　携帯サイトのURLは　 http://sample.mobirth.com/aaa/faq.html　となります。

※ソースの修正により、以下を挿入することにより階層を同じにする必要はなくなりました。

<div class="****_Delete">
<script type="text/javascript">
if (document.referrer.indexOf('▲▲▲▲')== -1 &&
((navigator.userAgent.indexOf('iPhone') > 0
|| navigator.userAgent.indexOf('iPod') > 0
|| navigator.userAgent.indexOf('willcom') > 0
|| (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)
))){
if(confirm('スマートフォン用のサイト表示しますか？\n（キャンセルの場合はＰＣサイトを表示します。)')) {
location.href = '●●●●' + location.pathname;
}}
</script>
</div>

注意事項
  • リダイレクトの設定を行なっている場合はそちらが優先されるため、
    この方法での選択を表示する場合は、リダイレクト設定からスマートフォンの判別を削除する必要があります。
  • <div class="****_Delete">を使用して変換後サイトで非表示処理を行わないと選択肢が逆となり無限ループとなります。
  • PCサイト用のGoogleAnalyticsを導入している場合は、表示選択のタグとGoogleAnalyticsのタグの位置関係にご注意ください。

    A.表示選択タグより下部にGoogleAnalyticsのタグが存在する場合
    スマートフォンからのアクセス時に表示選択にて「OK」を選択した場合は、
    その時点で自動変換後のサイトに転送されGoogleAnalyticsのタグには到達しないためカウントされない。
    （表示選択にて「いいえ」を選択した場合はGoogleAnalyticsのタグに到達しカウントされます。）

    B.GoogleAnalyticsのタグが表示選択のタグより上部に存在する場合
    スマートフォンからのアクセスがGoogleAnalyticsのタグによりカウントされる。
    その後、表示選択により「OK」を選択した場合は自動変換後のサイトに転送される。

    スマートフォンからPCサイトにアクセスがあり表示選択にて自動変換後のサイトに転送された場合に、
    ・スマートフォンからのアクセスは変換後サイトでカウントするため、PCサイトではカウントしない場合は上記Aを設定してください。
    ・スマートフォンからPCサイトにアクセスがあったことを解析結果としてカウントする場合は上記Bを設定してください。