弊社にて開発提供しておりますクラウド型ECサイト構築ASPのaishipシリーズにて「会員属性別コンテンツ出し分け機能」をリリース致しました。この機能は、会員登録時に属性を選択し、その情報を基にサイト全体のデザインやコンテンツを出し分けて表示できるというものです。
例えば、会員登録フォームに「一般会員」「法人会員」「卸会員」のような選択肢を用意しておくとします。会員登録者が「一般会員」を選択すると、一般会員向けのデザインを適用させ、コンテンツを表示することが可能です。
コンテンツの出し分けには、CSSとJSを使用する必要がありますが、アイディア次第で可能性の広がる機能となっております。会員別にシークレットコンテンツの表示や即時クーポン発行にも使えますので、詳しくご紹介していきます。
会員属性を取得する為の会員登録の流れ
会員属性選択フォームの作成
まずは、フリーフォームの作成画面にて、会員登録フォームに設定する選択肢を作成します。フォーム項目は「セレクトボックス」か「ラジオボタン」のどちらかを選びます。
選択肢名は任意に設定ができます。画像キャプチャは「一般会員」「ゴールド会員」「プレミアム会員」として例にしておりますが、「法人会員」や「卸会員」などの自由に名称を付けることが出来ます。この選択肢を作成する際に、あわせてclassを設定します。選択肢ごとに設定できるclassを使ってこの後、カスタマイズをおこなっていきます。
会員登録フォームの設置
会員登録フォーム設定画面のフリーフォーム項目にて、上記で作成したフリーフォームを設置し、設定が完了です。会員登録フォームにて、項目の最下部に作成した会員属性の選択肢が表示されるようになります。
全ページのbodyタグに会員属性のclassを出力
上記の手順で作成した会員登録フォームを利用して、会員登録時に選択された会員属性は、顧客情報に紐づきます。これにより該当顧客がログインすると、選択した会員属性をもとにbodyタグ内にclassが出力されます。class出力内容はログインした会員の属性によって可変します。
会員属性別にサイトデザインの切替が可能
会員属性をもとに可変するclassを利用して、例えばプレミアム会員のみヘッダーを変更したい場合のCSSの設置例は以下になります。
body.会員属性別のclass名 .header_wrap{background:任意の色や背景画像等を指定;}
会員属性別にシークレットコンテンツの設置が可能
この機能に対し、CSSとJSを使用することで、特定の会員向けにのみ、コンテンツを表示させたり商品を販売するといったシークレットセール会場への誘導が可能です。一般会員・法人会員・卸会員にて価格を変更できたり、販売内容を切り替えることが可能です。
手順１：特定の会員向けコンテンツを用意
クラウド型ECサイト構築ASPのaishipシリーズではコンテンツの作成を機能パーツで実施します。
機能パーツの種類は豊富のご用意しており、商品情報を表示させるための商品ブロックや、自由にHTMLを設定可能なテキストの機能パーツをご利用頂きます。作成した機能パーツを任意の位置に設置します。
手順２：JSを作成
会員属性ごとに出力されるclassを使用してJSを作成します。bodyタグ内に、対象会員のclass名が出力されていれば、手順1で作成した機能パーツを表示させるための指示を追加します。
$(function() {
if ($('body').hasClass('会員属性別のclass名')) {
$('div.機能パーツのclass').addClass('on');
}
});
手順３：CSSを作成
機能パーツ作成時に指定したclass名を利用して、一旦非表示の設定を意味するCSSを設定します。そして手順2で作成したJS適用時にのみ表示されるように記述します。
.機能パーツのclass名{display:none;}
.on{display:block;}
以上の設定で、特定の会員向けに表示させるコンテンツの完成です。
※サイト訪問者のブラウザ側の設定でJSを無効にしている場合など、JSが正しく効かない場合を想定し、JSが適用された場合にのみ会員別のコンテンツが表示される、という設定例になります。
会員属性別にクーポン発行が簡単に作成可能
クラウド型ECサイト構築ASPのaishipシリーズでご用意しておりますクーポン機能で、特定の会員向けにクーポンを発行する為には、会員登録後に後日配布の作業が必要です。しかし今回の機能を利用することで、会員登録直後から、会員属性別のクーポンを獲得できる導線を用意することが出来ます。
手順１：クーポンを作成
クーポンの新規作成画面にて、以下のように指定してクーポンを作成します。
利用可能範囲：会員は誰でも利用可能
利用可能タイミング：クーポンURLにアクセス後利用可能
手順２：クーポンURLを設置
作成したクーポンURLをサイト内の任意の位置に設置します。機能パーツや会員登録完了画面や、マイページログイン後のトップ画面のフリーエリア等、HTMLソースの入力可能エリアに設置します。
以下は、ゴールド会員向け、プレミアム会員向けに2種類のクーポンを発行した場合の設置例で、発行されたクーポンURLに対し、任意のclass名を指定しています。
<a href="<#SSLルートURL>member/coupon/membercoupon.html?coupon_id=gold" class="gold">ゴールド会員</a> <a href="<#SSLルートURL>member/coupon/membercoupon.html?coupon_id=premium" class="premium">プレミアム会員</a>
手順３：JSを作成
会員属性ごとに出力されるclassを使用してJSを作成します。bodyタグ内に、対象会員のclass名が出力されていれば、手順2で作成したクーポンURLを表示させるための指示を追加します。
$(function() {
if ($('body').hasClass('premium')) {
$('a.premium').addClass('on');
}
});
上記は、プレミアム会員でログインした場合に、プレミアム会員向けのクーポンを表示させるJSの設定例になります。
手順４：CSSを作成
発行されたクーポンURLに指定したclass名を利用して、一旦非表示の設定を意味するCSSを設定します。そして手順3で作成したJS適用時にのみ表示されるように記述します。
.gold,.premium{display:none;}
.on{display:block;}
以上にて指定した会員にのみクーポン獲得用のURLが表示されるようになります。
まとめ
いかがでしたでしょうか。今回ご案内しました「会員属性別コンテンツ出し分け機能」を活用し、会員属性ごとに機能パーツを構築していくことで、1つのECサイトなのに会員属性ごとにまったく違うコンテンツのサイトも実現できそうです。今回ご紹介したような表示切替用のCSSやJSを設定したり、或いは会員属性をもとに可変するclass名と機能パーツ作成時に指定したclass名を利用して、該当会員属性でログイン時に非表示にしたい機能パーツをCSSで設定するなどの対応が必要ですが、自由度の高いASPならでは実現できる手法かと思いますので、我こそはと先陣を切って作成頂けるEC事業者様をお待ちしております。
