【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

モーダルウィンドウを活用して簡単にWEB接客を導入する方法

モーダルウィンドウを活用して簡単にWEB接客を導入する方法

2月になりましたが春の訪れを感じるよりも、寒さが厳しさを増しております。

2017年も気づけば2月ですね。皆様いかがお過ごしでしょうか。
サポート部の葉糸です。

2016年にEC事業者が注目したキーワードの1つ、WEB接客。WEB接客とは、サイト訪問者に対し、探しているページへ誘導を行ったり、クーポンを表示させて購入意欲を高めたり、購入完了までのサポートを行ったり、あるいは買い忘れ商品の提案をすることで、購入率や購入単価を向上させることを目的としており、引き続き2017年も注目されるキーワードとなるでしょう。

WEB接客には、サイト上でリアルタイムに応答する「チャット型」、サイト訪問者の行動や特徴を解析し、個々のサイト訪問者にあわせた接客を行う「行動分析型」などがありますが、今回は、サイト訪問者に対し、クーポンやバナーを表示させるjavascriptをご紹介します。

設置例

まずは以下のjavascriptを設定します。

$(function(){
	var modal = $(".modal");//モーダルウインドウのクラス
	var button = $(".close_modal");//モーダル解除ボタンのクラス
	var opacity = 0.6;//モーダル背景の透明度
	var cookie = $.cookie("modal");
	if(cookie !== "off"){
		var overlay = $("<div></div>");
		overlay.css({
			"position":"fixed",
			"z-index":100,
			"top":0,
			"left":0,
			"height":100+"%",
			"width":100+"%",
			"background":"#000000", /*背景の色*/
			"opacity":opacity
		});
		$("body").append(overlay);
		modal.css("display", "block");
	}
	button.click(function(){
		$(overlay).fadeOut("slow");
		$(modal).hide();
		var clearTime = new Date();
		clearTime.setTime(clearTime.getTime()+(limit*60*1000));
		$.cookie("modal", "off", {expires:clearTime, path:"/"});
	});
	$(".remove_cookie").click(function(){
		$.removeCookie("modal", {expires:-1, path:"/"});
		location.reload();
	});
});

クーポンを設定したいページに以下のHTMLを設置します。

<div class="modal">
<div class="coupon">
<a href=""><img src="クーポンバナーを設定" alt="" /></a>
<p class="close_modal"><a href="javascript:;">CLOSE</a></p>
</div>
</div>

最後に

いかがでしたでしょうか。今回ご紹介したものは簡単なjavascriptで機械的なものですが、今後はAI(人工知能)を利用した、より高度で人材コストのかからないWEB接客ツールの展開にも期待していきましょう。

モーダルウィンドウはこちらの記事もご覧くださいレスポンシブにも対応!モーダルウィンドウの効果的な使い方

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+