変更履歴ガイドご利用ガイドコーポレートサイト
ガイド

futureshop コマースクリエイター

futureshop コマースクリエイターで Sprocket のデータ連携機能を利用するためのタグ設置方法を説明します。

Suggest Edits

スタートアップガイド

  • futureshop コマースクリエイターの機能を利用すると、通常の手順よりもより手軽にデータ連携（リアルタイム取り込み）を導入することが可能です。本ドキュメントではコマースクリエイターを用いたデータ連携（リアルタイム取り込み）の導入手順について説明します。
  • futureshop を使用していることが前提となります。

futureshop コマースクリエイターで利用できるデータ項目

コマースクリエイターで連携できるデータ項目は次の通りです。
データ連携（リアルタイム取り込み）の仕様についてはデータ連携（リアルタイム取り込み）の各タグの説明ページを参照ください。

ユーザー属性タグ

フィールド名（Key）概要値（Value）のサンプル
userIdユーザーを識別するユニークなID
※ この項目があると会員ID連携されます		'123456'
group会員をグルーピングしている場合にはその情報を入力してください。'G1'
point会員が保有するポイント数500
prefecture都道府県'東京都'
gender性別'M', 'female', '女性', '0'
birthday誕生日'1975-04-19'
purchase購入に関連するデータをセットします{
initialDate: '2018-11-23T00:00:00Z',
totalCount: 3
}
purchase.initialDate初回購入日時'2018-11-23T00:00:00Z'
'2018-11-23T00:00:00+09:00'
purchase.totalCount総購入回数3

ログイン状態タグ

フィールド名（Key）概要値（Value）のサンプル
isLoggedInログインしている：true
ログインしていない：false		true

購入データタグ

フィールド名（Key）概要値（Value）のサンプル
transactionId購入トランザクションに紐づいた一意なID'123456'
totalAmount購入金額合計
※当該購入の購入金額合計をセットしてください。送料、消費税を含む金額を推奨。		7350
shippingFee送料960
itemsitemsというキーに個別商品データの配列をセットしてください。[
{
itemId: '4774192627',
name: 'Amazon Web Services負荷試験入門',
price: 3800,
quantity: 1,
category: 'book',
brand: '技術評論社'
},
{
itemId: '4295000159',
name: 'いちばんやさしいコンバージョン最適化の教本',
price: 1922,
quantity: 1,
category: 'book',
brand: 'インプレス'
}
]
items[].itemIdアイテムに振られる任意のIDです。例として SKU ID などを想定しています。'4295000159'
items[].name商品名
※文字列長が64文字よりも長い場合、先頭から64文字に丸められます。		'いちばんやさしいコンバージョン最適化の教本'
items[].price商品価格
※税抜を推奨		1922
items[].quantity購入商品数2
items[].category商品カテゴリ'book'

カート内データタグ

フィールド名（Key）概要値（Value）のサンプル
totalAmount購入金額
※送料、消費税を含む金額を推奨		7350
quantity購入商品数2
itemsitemsというキーに個別商品データの配列をセットしてください。[
{
itemId: '4774192627',
name: 'Amazon Web Services負荷試験入門',
price: 3800,
quantity: 1,
category: 'book',
brand: '技術評論社'
},
{
itemId: '4295000159',
name: 'いちばんやさしいコンバージョン最適化の教本',
price: 1922,
quantity: 1,
category: 'book',
brand: 'インプレス'
}
]
items[].itemIdアイテムに振られる任意のIDです。例として SKU ID などを想定しています。'4295000159'
items[].name商品名
※文字列長が64文字よりも長い場合、先頭から64文字に丸められます。		'いちばんやさしいコンバージョン最適化の教本'
items[].price商品価格
※税抜を推奨		1922
items[].quantity購入商品数2
items[].category商品カテゴリ'book'

導入手順

下記の項目ではデータ連携（リアルタイム取り込み）導入のための、コマースクリエイターの設定手順について説明します。

計測タグ設定

futureshop 管理画面の 構築メニュー＞プロモーション管理＞測定タグ一覧 を開いてください。当該ページから［測定タグ 新規登録］を選択してください。

利用設定

［設定する］にチェックします。

設定名

Sprocket（Web接客） と入力します。
［アカウント名］に管理画面＞拡張設定＞タグ情報の［サービスID］を入力します。

共通出力

出力設定

［<body>タグ内(<body>タグの後)に出力する］を選択してください。

出力内容

<script src="//assets.v2.sprocket.bz/js/sprocket-jssdk.js#config=//assets.sprocket.bz/config/{% analytics.account_id %}.json" charset="UTF-8"></script>
<script type="text/javascript">
(function() {
  if (Boolean({@ member.logged_in @})) {
    var propsIsLoggedIn = { isLoggedIn: Boolean({@ member.logged_in @}) };
    // テスト時に変数の内容を確認したい場合、下記の行のコメントアウトを解除してください。本番公開時には消去してください。
    // console.log('Sprocket:Login  props:\n' + JSON.stringify(propsIsLoggedIn, null, '  '));
    SPSDK.record('login', propsIsLoggedIn);
    var propsUser = {};
    if ('{@ member.id @}' !== '') {
      propsUser['userId'] = String('{@ member.id @}');
    }
    if ('{@ member.active_points @}' !== '') {
      propsUser['point'] = Number('{@ member.active_points @}');
    }
    if ('{@ member.stage_name @}' !== '') {
      propsUser['group'] = '{@ member.stage_name @}';
    }
    // テスト時に変数の内容を確認したい場合、下記の行のコメントアウトを解除してください。本番公開時には消去してください。
    // console.log('Sprocket: User props:\n' + JSON.stringify(propsUser, null, '  '));
    if (Object.keys(propsUser).length > 0) {
      SPSDK.user(propsUser);
    }
  } else {
    var propsIsLoggedIn = { isLoggedIn: Boolean({@ member.logged_in @}) };
    // テスト時に変数の内容を確認したい場合、下記の行のコメントアウトを解除してください。本番公開時には消去してください。
    // console.log('Sprocket:Login  props:\n' + JSON.stringify(propsIsLoggedIn, null, '  '));
    SPSDK.record('login', propsIsLoggedIn);
  }
})();
</script>

ショッピングカートページ

出力設定

［<body>タグ内(</body>タグの前)に出力する］を選択してください。

出力内容

<script type="text/javascript">
(function() {
  var count = 0;
  setTimeout(function wait() {
    if (++count > 10) return;
    if (typeof SPSDK === 'undefined') return setTimeout(wait, 500);
      var items = [{% analytics.item_info %}];
      var props = {
        totalAmount: {% analytics.purchase_price_with_options_including_tax %},
        quantity: {% analytics.total_quantity %},
        items: items
      };
     // テスト時に変数の内容を確認したい場合、下記の行のコメントアウトを解除してください。本番公開時には消去してください。
     // console.log('Sprocket: Cart props:\n' + JSON.stringify(props, null, '  '));
     SPSDK.record('cart', props);
  }, 500);
})();
(function() {
  var count = 0;
  setTimeout(function wait() {
    if (++count > 10) return;
    if (typeof SPSDK === 'undefined') return setTimeout(wait, 500);
    if (Boolean(true)) {
      // '20200101' -> '2020-01-01'
      var birthdayFormatter = function(rawBirthdayStr) {
        return rawBirthdayStr.slice(0,4) + '-' + rawBirthdayStr.slice(4,6) + '-' + rawBirthdayStr.slice(6,8);
      };

      // '20200101' -> '2020-01-01T00:00:00+09:00'
      var iso8601Formatter = function(rawDateStr) {
        return rawDateStr.slice(0,4) + '-' + rawDateStr.slice(4,6) + '-' + rawDateStr.slice(6,8) + 'T00:00:00+09:00';
      };    

      var propsPurchase = {};
      if ('{% analytics.member.times_purchased %}' !== '') {
        propsPurchase['totalCount'] = '{% analytics.member.times_purchased %}';
      }
      if ('{% analytics.first_buy_date %}' !== '') {
        propsPurchase['initialDate'] = iso8601Formatter('{% analytics.first_buy_date %}');
      }

      var propsUser = {};
      if ('{@ member.id @}' !== '') {
        propsUser['userId'] = String('{@ member.id @}');
      }
      if ('{% analytics.prefecture %}' !== '') {
        propsUser['prefecture'] = '{% analytics.prefecture %}';
      }
      if ('{% analytics.gender %}' !== '') {
        propsUser['gender'] = '{% analytics.gender %}';
      }
      if ('{% analytics.birthday %}' !== '') {
        propsUser['birthday'] = birthdayFormatter('{% analytics.birthday %}');
      }
      if (Object.keys(propsPurchase).length > 0) {
        propsUser['purchase'] = propsPurchase;
      }
      // テスト時に変数の内容を確認したい場合、下記の行のコメントアウトを解除してください。本番公開時には消去してください。
      // console.log('Sprocket: User props:\n' + JSON.stringify(propsUser, null, '  '));
      if (Object.keys(propsUser).length > 0) {
        SPSDK.user(propsUser);
      }
    }
  }, 500);
})();
</script>

商品情報置換文字の設定

{
        itemId: "{% analytics.product_id %}",
        name: "{% analytics.product_name %}".slice(0, 64),
        price: {% analytics.product.price_including_tax %},
        quantity: {% analytics.quantity %},
        category: "{% analytics.category.name %}"
}

区切り文字

「,」を入力します。

注文完了ページ

出力設定

［<body>タグ内(</body>タグの前)に出力する］を選択してください。

出力内容

<script type="text/javascript">
(function() {
  var items = [{% analytics.item_info %}];
  var count = 0;
  setTimeout(function wait() {
    if (++count > 10) return;
    if (typeof SPSDK === 'undefined') return setTimeout(wait, 500);
    var props = {
      transactionId: "{% analytics.order_no %}",
      totalAmount : {% analytics.purchase_price_with_options_including_tax %},
      shippingFee : {% analytics.total_postage %},
      items: items
    };
    // テスト時に変数の内容を確認したい場合、下記の行のコメントアウトを解除してください。本番公開時には消去してください。
    // console.log('Sprocket: Purchase props:\n' + JSON.stringify(props, null, '  '));
    SPSDK.record('purchase', props);
  }, 500);
})();
(function() {
  var count = 0;
  setTimeout(function wait() {
    if (++count > 10) return;
    if (typeof SPSDK === 'undefined') return setTimeout(wait, 500);
    if (Boolean(true)) {
      // '20200101' -> '2020-01-01'
      var birthdayFormatter = function(rawBirthdayStr) {
        return rawBirthdayStr.slice(0,4) + '-' + rawBirthdayStr.slice(4,6) + '-' + rawBirthdayStr.slice(6,8);
      };

      // '20200101' -> '2020-01-01T00:00:00+09:00'
      var iso8601Formatter = function(rawDateStr) {
        return rawDateStr.slice(0,4) + '-' + rawDateStr.slice(4,6) + '-' + rawDateStr.slice(6,8) + 'T00:00:00+09:00';
      };    

      var propsPurchase = {};
      if ('{% analytics.member.times_purchased %}' !== '') {
        propsPurchase['totalCount'] = {% analytics.member.times_purchased %};
      }
      if ('{% analytics.first_buy_date %}' !== '') {
        propsPurchase['initialDate'] = iso8601Formatter('{% analytics.first_buy_date %}');
      }

      var propsUser = {};
      if ('{@ member.id @}' !== '') {
        propsUser['userId'] = String('{@ member.id @}');
      }
      if ('{% analytics.prefecture %}' !== '') {
        propsUser['prefecture'] = '{% analytics.prefecture %}';
      }
      if ('{% analytics.gender %}' !== '') {
        propsUser['gender'] = '{% analytics.gender %}';
      }
      if ('{% analytics.birthday %}' !== '') {
        propsUser['birthday'] = birthdayFormatter('{% analytics.birthday %}');
      }
      if (Object.keys(propsPurchase).length > 0) {
        propsUser['purchase'] = propsPurchase;
      }
      // テスト時に変数の内容を確認したい場合、下記の行のコメントアウトを解除してください。本番公開時には消去してください。
      // console.log('Sprocket: User props:\n' + JSON.stringify(propsUser, null, '  '));
      if (Object.keys(propsUser).length > 0) {
        SPSDK.user(propsUser);
      }
    }
  }, 500);
})();
</script>

商品情報置換文字の設定

{
        itemId: "{% analytics.product_id %}",
        name: "{% analytics.product_name %}".slice(0, 64),
        price: Number({% analytics.product.price_including_tax %}),
        quantity: Number("{% analytics.quantity %}"),
        category: "{% analytics.category.name %}"
}

区切り文字

「,」を入力します。

メールマガジン申込完了

出力設定

［<body>タグ内(</body>タグの前)に出力する］を選択してください。

出力内容

<script type="text/javascript">
(function() {
  var count = 0;
  setTimeout(function wait() {
    if (++count > 10) return;
    if (typeof SPSDK === 'undefined') return setTimeout(wait, 500);
    if (Boolean(true)) {
      // '20200101' -> '2020-01-01'
      var birthdayFormatter = function(rawBirthdayStr) {
        return rawBirthdayStr.slice(0,4) + '-' + rawBirthdayStr.slice(4,6) + '-' + rawBirthdayStr.slice(6,8);
      };

      // '20200101' -> '2020-01-01T00:00:00+09:00'
      var iso8601Formatter = function(rawDateStr) {
        return rawDateStr.slice(0,4) + '-' + rawDateStr.slice(4,6) + '-' + rawDateStr.slice(6,8) + 'T00:00:00+09:00';
      };    

      var propsPurchase = {};
      if ('{% analytics.member.times_purchased %}' !== '') {
        propsPurchase['totalCount'] = {% analytics.member.times_purchased %};
      }
      if ('{% analytics.first_buy_date %}' !== '') {
        propsPurchase['initialDate'] = iso8601Formatter('{% analytics.first_buy_date %}');
      }

      var propsUser = {};
      if ('{@ member.id @}' !== '') {
        propsUser['userId'] = String('{@ member.id @}');
      }
      if ('{% analytics.prefecture %}' !== '') {
        propsUser['prefecture'] = '{% analytics.prefecture %}';
      }
      if ('{% analytics.gender %}' !== '') {
        propsUser['gender'] = '{% analytics.gender %}';
      }
      if ('{% analytics.birthday %}' !== '') {
        propsUser['birthday'] = birthdayFormatter('{% analytics.birthday %}');
      }
      if (Object.keys(propsPurchase).length > 0) {
        propsUser['purchase'] = propsPurchase;
      }
      // テスト時に変数の内容を確認したい場合、下記の行のコメントアウトを解除してください。本番公開時には消去してください。
      // console.log('Sprocket: User props:\n' + JSON.stringify(propsUser, null, '  '));
      if (Object.keys(propsUser).length > 0) {
        SPSDK.user(propsUser);
      }
    }
  }, 500);
})();
</script>

❗️

futureshopの外部JavaScriptファイル無効化対応について

2021年4月26日のfutureshop仕様変更のため、futureshop内の一部ページで外部JavaScriptファイルが実行できなくなりました。本記事のデータ連携タグは影響を受けませんが、一部ページではSprocketタグを埋め込んでも動作しませんのでご注意ください。詳細はfutureshopのサイトをご確認ください。

Updated about 3 years ago