futureshop
U-KOMI関連のパーツを追加
ヘッダーにJSを追加
スターレーティングの表示
レビュー一覧の表示
コンバージョントラッキングコードの設置
メールによる受注連携
futureshopの導入は info@u-komi.com までご連絡いただければ導入のお手伝いをさせていただきます。
commerce creator利用ありの場合の導入手順が下記となります。
commerce creator→パーツでU-KOMI関連のパーツを追加します。パーツ種類はフリーパーツです。
サイト内でU-KOMIのコンテンツを表示するためのコード
<script type="text/javascript">
(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キーを入力します。
<div class="review-summary-container" data-pid="" data-group="true" data-action="summary"></div>
<div class="review-container" data-pid="" data-group="true" data-action="widget"></div>
<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>
サイト内で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 までご連絡いただければ共有いたしますのでご連絡ください。