デジタル商材の販売や定期的な自動クレジットカード決済が条件のサブスクリプション販売など、注意や同意を促すページを挟む方法についてのアイディアを共有します。
商品を購入してもらう上で、「必ず注意書きを読んでもらいたい」「同意を押してもらった上、購入ページに遷移させたい」という時ありませんか。
例えば、
・デジタル商材：ネットで流布してはいけないと注意
・サブスクリプション：定期的に登録したクレジットカードで自動決済が行われる
・子供用の商品：保護者の同意が必要
など、注意と同意を促した上、購入してもらいたいケースは少なくないと思います。
今回は、顧客にご購入いただく前に、
・注意書きページや同意ページを挟む
・そのページからでないと商品ページにアクセスできない
方法について解説したいと思います。
※この記事では任意上、注意書きページと同意ページを「注意ページ」に同一して表記・解説しています。
前提
まず、前提について。
Shopifyテーマで用意された、商品一覧セクションから商品ページへ遷移する間に注意ページを挟む事はできません。
商品ページへのリンクを挿入した注意ページを作成し、そのページをループするセクションを作成する方法をおすすめします。
ページのループを作成する方法については本記事では割愛します。
注意ページを作る
注意ページは、普通にShopifyのデフォルト機能の一つである、オンラインストア＞ページで作成を行います。
もし同意をしないと「商品ページへのリンクが有効にならない」という仕組みを作りたいのであれば、以下のコードを参考に作成してみてください。
<div class="checkBlock">
<input type="checkbox" id="check-enable">
<label for="check-enable">注意事項などに同意する</label>
<a href="/products/id-pay" class="anchorText">購入ページへ</a></div>.anchorText {
pointer-events: none;
color: gray;
}
#check-enable:checked ~ .anchorText {
pointer-events: auto;
color: blue;
}簡単に説明すると、
①商品ページへのリンク(class=”anchorText”)のクリックイベント(pointer-events)は、デフォルトでは無効になっている。リンクの色はグレー。
②チェックボックスにチェックが入ると、クリックイベントが有効になり、リンクの色も青色に変わる。
という仕組みになります。
リファラー(遷移元)を制限
次は、商品ページへの遷移を、すでに作成した注意ページのリンクのみを有効にする方法になります。
まず、新しい商品ページのテンプレートを作成する必要があります。少し面倒くさいかもしれないですが、注意ページを挟む商品ページの場合、それぞれ新しいテンプレートが必要になります。
というのも、特定のページからの遷移のみができる固有のJavaScriptコードを挿入しなければならないからです。
もちろん、取り扱いの商品すべてが、
・注意もしくは同意が必要な商材
・同じ注意もしく同意を促すページで充分
という場合は、新しい商品テンプレートを作成する必要はありません。（そういった場合は、次の自作テンプレート作成方法をスキップして、リファラー制限のJavascriptコード挿入をご確認ください）
商品ページの独自テンプレートを作る手順については、以下の関連記事をご一読ください。
（関連記事）Shopify 商品ページ 自作テンプレートを作成する方法
関連記事の解説のように「product.new.json」と、メインセクション「main-product-new.liquid」を作成が完了したら、「main-product-new.liquid」を修正します。
約806行あたりにある「</section>」の下に以下のJavascriptコードを挿入します。
<script>
function checkReferrer() {
var referrer = document.referrer;
// 参照元のURLが空でない場合
if (referrer) {
// 特定のページ(参照元)でない場合はリダイレクトする
if (referrer !== "https://aaa.com/caution/") {
window.location.href = "/access-impossible "; // リダイレクト先URLを指定
}
} else {
// 参照元のURLが空の場合はリダイレクトする
window.location.href = "/access-imossible"; // リダイレクト先URLを指定
}
}
// ページ読み込み時に参照元をチェックする
window.onload = function() {
checkReferrer();
};
</script>コードを簡単に解説します。
①「https://aaa.com/caution/」が参照元(リファラー)でないと、「/access-impossible」ページへリダイレクトする。
②参照元のURLは空の場合とは、参照元からの遷移ではないアクセスの事。例えば、商品ページのURLをブラウザに貼り付ける事などを指します。
これで、特定のページから遷移のみができるため、注意書きの一読や同意を得る事ができるようになります。
以上、顧客の購入してもらう前に注意や同意を促すページを挟む方法について解説しました。皆さんのストら構築・運営にお役に立てれば幸いです。
