Ebisumart に実装する

導入の流れ

実装にはAPI キーとストア名が必要となるため、担当者にお問い合わせください。

Ebisumart でタグを登録する

Ebisumart の 管理画面 の左メニューから、データ解析 ⟶ タグマネージャ ⟶ タグルール新規登録/一覧 を選択して表示されたページで 新規登録 をクリック。

こちらでは商品ページへの出力用と注文完了ページへの出力用のタグルールをそれぞれ1つずつ作成する。 後ほど使用する為、タグルール名はわかりやすい名称にし、出力ページはそれぞれ商品詳細ページとカート完了画面を選択し、登録をクリック

■商品ページ用の例

■注文完了ページ用の例

商品詳細ページ内に<input> タグと javascript を出力する

左メニューから、データ解析 ⟶ タグマネージャ ⟶ タグ新規登録/一覧 を選択して表示されたページで 新規登録 をクリック。

タグコード、タグ名 を入力し、タグタイプ で カスタム HTML を選択。タグ HTML に <input> タグとサンプルの javascript をコピーして、入力する。 なお、タグ出力箇所で下部を選択し、タグ表示ルールは先ほど商品ページへの出力用として作成したタグルールを選択。 確認をクリックしてタグを新規登録。

<input type="hidden" id="vs-product-id" value="" />
<input type="hidden" id="vs-user-id" value="" />

<script type="text/javascript">
document.getElementById("vs-product-id").value = document.getElementById("ebisu_item_cd").innerHTML;
document.getElementById("vs-user-id").value = document.getElementById("ebisu_user_id").innerHTML;

var vsStoreName = 'ストア名';　//担当者からお知らせする値に書き換えてください。
var vsEnv = 'production'; //stagingまたはproduction、どちらかの環境設定を指定してください。
var vsDeviceType = 'desktop';　//mobileまたはdesktop、どちらかの端末設定を指定してください。

(function(d) {var s = d.createElement('script'); s.type = 'text/javascript'; s.charset='utf-8'; s.async = true;
s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'integration.virtusize.jp/' + vsEnv + '/' + vsStoreName + '/' + vsDeviceType + '.source.js';var s1 = d.getElementsByTagName('script')[0]; s1.parentNode.insertBefore(s, s1);})(document);
</script>

注文完了ページ内に javascript を 出力する

左メニューから、データ解析 ⟶ タグマネージャ ⟶ タグ新規登録/一覧 を選択して表示されたページで 新規登録 をクリック。

タグコード、タグ名 を入力し、タグタイプ で カスタム HTML を選択。タグ HTML に <input> タグとサンプルの javascript をコピーして、入力する。 なお、タグ出力箇所で下部を選択し、タグ表示ルールは先ほど注文完了ページへの出力用として作成したタグルールを選択。 確認をクリックしてタグを新規登録。

<script type="text/javascript">
var orderId = 	document.getElementsByName('ORDER_NO')[0].value;
var userId = document.getElementsByName('MEMBER_ID')[0].value;

if (!userId) {
  userId = `guest_${Math.random().toString(36).substring(2, 15)}.${new Date().getTime().toString(36)}`
}

var items = []
var productIds = document.getElementsByName('ITEM_CD_ONLY');
var sizes = document.getElementsByName('ITEM_NAME');
var quantities = document.getElementsByName('ITEM_AMOUNT');
var prices = document.getElementsByName('ITEM_TEIKA');
var variantIds = document.getElementsByName('ITEM_CD');


for (var i = 0; i < productIds.length/2; i++) {
 let item = {}
 let size_tmp;

 if (sizes[i].value.substring(sizes[i].value.lastIndexOf(', '),sizes[i].value.lastIndexOf(')')).indexOf(', ') !== -1) {
　 size_tmp = sizes[i].value.substring(sizes[i].value.lastIndexOf(', ')+2,sizes[i].value.lastIndexOf(')'));

 }else{
   size_tmp = sizes[i].value.substring(sizes[i].value.lastIndexOf('(')+1,sizes[i].value.lastIndexOf(')'));
 }

 item.productId = productIds[i].value;
 item.size = size_tmp;
 item.variantId = variantIds[i].value;
 const serviceUrl = window.location.origin;
 item.url = `${serviceUrl}/item/${productIds[i].value}`;
 item.imageUrl= `${serviceUrl}/client_info/ebisumartNo/itemimage/${productIds[i].value}/${productIds[i].value}.jpg`;
 item.color = "NA";
 item.unitPrice = parseInt(prices[i].value);
 item.quantity = parseInt(quantities[i].value);
 item.currency = "JPY";
 item.gender = "NA";
 items.push(item)
}

var orderObject = {
  orderId,
  userId,
  region: "JP",
  items,
}

window.vsEnv = "production"; // これは"staging"または"production"の開発環境です。
window.vsDomain = "jp"; // これはサイトを展開している国です。"jp"、"kr"、"com"からお選びください。
window.vsApiKey = "API_KEY"; // これは"実装前"でバーチャサイズの御社担当からお伝えしたAPIキーです。
window.vsOrderObject = orderObject;

(function(d) {
  var s = d.createElement("script");
  s.type = "text/javascript";
  s.charset = "utf-8";
  s.async = true;
  s.src = "https://integration.virtusize.com/orders/confirmation.js";
  var s1 = d.getElementsByTagName("script")[0];
  s1.parentNode.insertBefore(s, s1);
})(document);

</script>

item_detail.xhtml ファイルの編集

Ebisumart の 管理画面 の左メニューから、コンテンツ管理 ⟶ ファイル管理をクリック。 表示されたページで/veiw/userweb/item_detail.xhtmlへ遷移。 item_detail.xhtml ファイルの body の閉じタグの直前にサンプルのタグをコピーして入力する。

<span id="ebisu_item_cd" style="display:none;"><span m:id="ITEM_CODE_HERE"></span></span>
<span id="ebisu_user_id" style="display:none;"><span m:id="common.MEMBER_ID_HERE"></span></span>

参考情報

EbisumartではHIDDENタブを使用し、お客様が購入した商品の情報を注文完了ページでも取得できるような仕組みが備わっています。 HIDDENタグの内の一つが「ITEM＿NAME」となり、こちらは購入商品の「商品名（カラー,サイズ）」という規則で自動生成されるようになっております。 VSを使用する場合、サイズ情報が不可欠のなる為、こちらから取得できる文字列を処理し、サイズ情報のみを抽出するようにしているが、お客様の環境によっては 必ずしも上記コードで動作するとは限りません。 そのため、一度本マニュアル通りに設定いただきましたら、担当者にご連絡いただけると幸いです 参考サイト）https://support.ebisumart.com/category/UW_C_R_OTHER/USERWEB_CART_RESULT_HIDDEN_DATA_TAGS_HERE.html