# 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