futureshop コマースクリエイター

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

スタートアップガイド

  • 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

items

itemsというキーに個別商品データの配列をセットしてください。

[
{
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

items

itemsというキーに個別商品データの配列をセットしてください。

[
{
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のサイトをご確認ください。