Webブラウザのリファラ取得対策がよくわかりません、何をしたら良いですか?

No:9204

最終更新日: 2024/07/03

Webブラウザ最新版(Google Chrome85以降等)を利用し、 e-shopsカートSのカートに商品を入れ、最初に表示される購入手続き画面の 「買い物を続ける」ボタンや「戻る」ボタンをクリックしたときに直前の商品詳細ページへ戻らず、TOPページへ戻ってしまう事象が発生しております。

※弊社推奨環境のwebブラウザ(GoogleChrome、EdgeやSafari)の最新版にて、同様の事象が浸透しつつあります。

詳細につきまして、下記をご参照いただきますよう、お願い申し上げます。

対象

購入者様がWebブラウザ最新版を利用し、e-shopsカートSの購入手続き画面内で 「買い物を続ける」や「戻る」ボタンをクリックした場合。


事象

購入者様がWebブラウザ最新版を利用し、e-shopsカートSのカートに商品を入れ、 最初に表示される購入手続き画面(買い物カゴの中身画面)で「買い物を続ける」ボタンや「戻る」ボタンをクリックした場合に直前の商品詳細ページへ戻らず「ショップページのTOP」に戻ってしまう事象が発生しております。


原因

各種Webブラウザ側にてセキュリティレベルを上げる仕様変更があったため。


e-shopsカートSの従来の仕組み・動作

購入手続き画面内の「買い物を続ける」ボタンや「戻る」ボタンをクリックしたとき、 直前のページ(リファラ)が取れない場合には、 管理画面「基本設定」>「ショップURL」に登録されているURLへ遷移するという仕様でした。

※リファラとは
アクセスログに記載されている情報のひとつで
直前に閲覧していたページのURLを内容とする情報となります。

リファラの取得可否は、本来、ブラウザの設定(リファラを送信する・javascriptが有効等)に よって異なるのですが各種Webブラウザ側の仕様変更により、強制的にリファラの取得ができなくなりました。


e-shopsカートSでの対策

ショップページの作成方法に応じてご利用頂ける、対策用のタグをご紹介します。
また、購入手続き画面内の「買い物を続ける」ボタンや「戻る」ボタンをクリックしたとき、管理画面「商品管理」>「商品登録」画面にてご登録のある商品掲載ページURLに移動するように仕様変更しております。

※2020年11月10日より適用しております。


ネットショップオーナー様へのお願い

自作サイトなどにカートを設置している場合

【対策1】買い物カゴソースを設置しているページに「リファラ取得用JS」を設置する

※全ブラウザを対象に直前のページに戻すためのタグ設置となります。下記【対策2】のmetaタグと併用しても問題ありません。

リファラを取得するために、弊社での買い物カゴを貼り付けている各ページのHTMLの<head>~</head>内に以下枠線内の「リファラ取得用JS」を設置して下さい。
買い物カゴソースの貼替えは不要です。

<script>
window.addEventListener("DOMContentLoaded", function() {
    var es_cnt = document.forms.length;
    for(var i=0;i<es_cnt;i++) {
        if(document.forms[i].action.match(/(http:|https:)\/\/cart.ec-sites.jp\//gi)) {
            var es_form = document.createElement('input');
            es_form.type = 'hidden';
            es_form.name = 'es_referrer';
            es_form.value = location.href;
            document.forms[i].insertBefore(es_form, document.forms[i].firstChild);
        }
    }
}, false);
</script>

▼HTML記述の例 直前の挿入がおすすめ

※HTMLがよくわからない方は、HP制作に携わった方やお詳しい方へご相談下さい。



【対策2】買い物カゴソースを設置しているページにmetaタグを設置する

※GoogleChromeのver.85以降でリファラを取得するためのタグ設置となりますが、一部ブラウザには適用されない場合がございます。上記【対策1】の「リファラ取得用JS」と併用しても問題ありません。

リファラを取得するために、弊社での買い物カゴを貼り付けている各ページのHTMLの<head>~</head>内に以下枠線内のmetaタグを設置して下さい。
買い物カゴソースの貼替えは不要です。

<meta name="referrer" content="no-referrer-when-downgrade">

▼HTML記述の例 直前の挿入がおすすめ

※HTMLがよくわからない方は、HP制作に携わった方やお詳しい方へご相談下さい。



【対策3】管理画面の各商品へ商品掲載ページのURLを登録する

※上記各種タグを設置しても、閲覧者のブラウザ設定や環境によりリファラの取得ができない場合があります。その時に、遷移するページURLのご設定が以下となります。

管理画面「商品管理」>「商品登録」>「PC・スマートフォン共用URL」or「商品掲載ページ」に該当商品の詳細ページURLをご設定下さい。

▼サイト作成機能をご利用されてない方 (サイト作成機能未初期化の方)


▼サイト作成機能をご利用されたことがある方
  (サイト作成機能の初期化ボタンを押下されたことのあるの方)


 ※ここで設定したURLは、購入手続き画面内の商品画像や商品名にリンク設定できるようになりました。
   2021年7月27日より適用しております。


サイト作成ページで出力されたカートをご利用の場合

ショップ様側で必要な作業は、ございません。


【注意事項】
・全ての環境での動作を保証するものではございません
・このページ内でご案内しているコードの設置は任意ですので、設置可否のご判断はショップ様側で行ってください
・コード設置後の動作確認は弊社では行えませんので、ショップ様ご自身でご確認ください
・HTMLがよくわからない方は、HP制作に携わった方やお詳しい方へご相談下さい

詳細につきましては、以下リンク先ページでもご報告をさせていただいております。
▼Google Chrome85へのアップデートに伴い仕様変更を予定しております
https://cart.e-shops.jp/news/20200930.html
▼Chrome85においてリファラが正常に取得できない場合の対応について
https://cart.e-shops.jp/manual/14-newreferer/

お手数ですが併せてご確認の上、ご対応いただきますようお願い致します。