Sprocket

タグ設置例をご紹介しています。最新のタグはサービス提供元にお問い合わせください。

以下の設定を設定＞プロモーション＞測定タグ設定構築＞プロモーション管理＞測定タグ設定（コマースクリエイター）にて行ってください。

コマースクリエイターと以前からの管理画面の「任意測定タグ」「任意アフィリエイト」では、利用できる置換文字が異なります。
移設の際にはプロモーション管理（測定タグ）　置換文字対照表をご参照ください。

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

コマースクリエイターで連携できるデータ項目は、Sprocket社のページにてご覧ください。

測定タグ設定

利用設定

「利用する」「設定する」にチェックします。

設定名

「Sprocket（Web接客）」と入力します。

アカウント名

Sprocket管理画面＞拡張設定＞タグ情報のサービスIDを入力します。

置換文字設定

アカウント名

Sprocket管理画面＞拡張設定＞タグ情報のサービス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>

測定タグ設定（sproket）

Sprocket

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

測定タグ設定

利用設定

設定名

アカウント名

置換文字設定

アカウント名

共通出力

出力設定

出力内容

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

出力設定

出力内容

商品情報置換文字の設定

区切り文字

注文完了ページ

出力設定

出力内容

商品情報置換文字の設定

区切り文字

メールマガジン申込完了

出力設定

出力内容

項目表示について