futureshopの導入方法について
2️⃣ヘッダーにJSを追加
3️⃣スターレーティングの表示
4️⃣レビュー一覧の表示
6️⃣メールによる受注連携
futureshopの導入は info@u-komi.com までご連絡いただければ導入のお手伝いをさせていただきます。
commerce creator利用ありの場合の導入手順が下記となります。
U-KOMI関連のパーツを追加
commerce creator→パーツでU-KOMI関連のパーツを追加します。パーツ種類はフリーパーツです。
U-KOMIタグ
サイト内でU-KOMIのコンテンツを表示するためのコード
(function u(){var u=document.createElement("script");u.type="text/javascript",u.async=true,u.src="//api.u-komi.com/API_KEY/widget.js";var k=document.getElementsByTagName("script")[0];k.parentNode.insertBefore(u,k)})();
</script>💡 【API_KEY】はU-KOMI管理画面から確認できるAPIキーを入力します。
U-KOMI星表示
<div class="review-summary-container" data-pid="" data-group="true" data-action="summary"></div>U-KOMIレビュー一覧
<div class="review-container" data-pid="" data-group="true" data-action="widget"></div>U-KOMI用商品ID取得JS
<script>
window.addEventListener('load', function() {
if($('.review-summary-container').length > 1){
$('.fs-c-productList__list__item').each(function(){
var target = $(this).find('.review-summary-container');
if(target.attr('data-pid') === ""){
var url = $(this).find('a').attr('href');
updated_url = url.replace(url.substring(url.indexOf("?")),"");
url=updated_url==""?url:updated_url;
var pid=url.split("/").pop();
target.attr('data-pid', pid);
initWidget();
}
})
} else if($('.review-summary-container').length){
var target = $('.review-summary-container');
if(target.attr('data-pid') === ""){
var url = window.location.href;
updated_url = url.replace(url.substring(url.indexOf("?")),"");
url=updated_url==""?url:updated_url;
var pid=url.split("/").pop();
target.attr('data-pid', pid);
initWidget();
}
}
if($('.review-container').length){
var url = window.location.href;
updated_url = url.replace(url.substring(url.indexOf("?")),"");
url=updated_url==""?url:updated_url;
var pid=url.split("/").pop();
$('.review-container').attr('data-pid', pid);
initWidget();
}
});
</script>ヘッダーにJSを追加
サイト内でU-KOMI関連のコンテンツを表示するためにヘッダーに下記のJSを追加します。
U-KOMIコンテンツを表示させる各レイアウトの<head設定>内に「U-KOMIタグ」のパーツを追加します。
⚠️ 上記U-KOMIタグの先に jQuery v1.12.4以上のタグ(https://developers.google.com/speed/libraries/#jquery) を設置する必要があります。
スターレーティングの表示
- サイト内でスターレーティングを表示するためのコードを追加します。
- TOPページ商品一覧、検索結果、商品詳細ページなどで表示できます。
- スターレーティングを表示させる各レイアウトの<body設定>内に「U-KOMI星表示」のパーツを追加します。 また、「U-KOMI用商品ID取得JS」を<body設定>内のフッターエリアに追加します。
レビュー一覧の表示
- サイト内でレビュー一覧を表示するためのコードを追加します。
- レビュー一覧を表示させる各レイアウトの<body設定>内に「U-KOMIレビュー一覧」のパーツを追加します。 また、「U-KOMI用商品ID取得JS」を<body設定>内のフッターエリアに追加します。
コンバージョントラッキングコードの設置
- U-KOMI管理画面から解析データを確認できるためのコンバージョントラッキングコードを設置します。 こちらのコードはチェックアウト完了ページ（サンクスページ）で設置します。
- 「ご注文完了」レイアウトの<head設定>内に「U-KOMIタグ」のパーツを追加します。
また、設定→プロモーション管理→測定タグ一覧の設定の「注文完了ページ」の「出力設定」を「<body>タグ内（</body>タグの前）に出力する」に設定していただき、出力内容内に下記のコードを追加します。
コンバージョントラッキングコード
<script>ukomiOrderTrackData = {orderId: "{% analytics.order_no %}", orderAmount: "{% analytics.purchase_price_including_tax %}", orderCurrency: "JPY"}</script>メールによる受注連携
U-KOMIのメールアドレスに受注データが入ってるメールを転送していただくことで受注連携することができます。
メールによる受注連携は info@u-komi.com までご連絡いただければ連携設定のお手伝いをさせていただきます。
また、詳しい設定情報は下記のガイドをご確認ください。
https://support.u-komi.com/ja/article/44oh44o844or44gr44ki44kl5yx5roo6ycj5pc6-4el1ix/
futureshopでのメールによる受注連携は「設定」→「メール」→「メール設定一覧」の「発送通知メール」の設定を開いていただき、「送信先メールアドレス」の送信先メールアドレスにU-KOMI管理画面のメールによる受注連携の設定ページで発行されるU-KOMIアドレスを追加してください。
その後、U-KOMI管理画面のメールによる受注連携の設定ページで各値を取得するための初期設定を行う必要があります。 こちらのfutureshopの場合の設定するべき各値に関しては info@u-komi.com までご連絡いただければ共有いたしますのでご連絡ください。