futureshopの環境でKARTEをご利用いただくためのヘルプページです。

以下記事は、futureshopの「コマースクリエイター」をご利用中のお客様向けのマニュアルとなります。

futureshopの「測定タグ」

コマースクリエイター利用中のfutureshopでは、「測定タグ」としてKARTEのタグをセットすることができます

測定タグについての詳細はこちらのサイトを御覧ください

本ドキュメントで設定方法を説明するタグ

測定タグを用いて、以下のイベントを発生させるタグの設置方法についてご案内します。

  • 計測タグ

  • ユーザータグ(identifyイベント)

  • 商品詳細閲覧（view_itemイベント）

  • カートタグ(cartイベント)

  • コンバージョンタグ(buyイベント)

  • 会員登録完了(signupイベント)

タグの設置方法

  1. ヘッダーメニューの「設定メニュー」 > 「プロモーション管理」 > 「測定タグ一覧」 > 「測定タグ設定」をクリック

  2. 「測定タグ設定」エリア：「利用設定」の「設定する」をチェック。名称を「KARTE」と入力

  3. 「共通出力」エリア：

  • 「出力設定」を「<head>タグ内に出力する」をチェック
  • 出力内容に「自プロジェクトの計測タグ」と、以下のタグ（ユーザータグ）を入力
    <script type="text/javascript">
var __karte_loop_count = 0;
var __karte_interval_id = setInterval(function () {
  var user_id = '{@ member.id @}';
  if (user_id && user_id.indexOf('{') !== 0) {
      clearInterval(__karte_interval_id);
      try {
          krt("send", "identify", {
              user_id: user_id
          });
      } catch (e) {
          if ("krt" in window) {
            krt("send", "_error", { message: e.message });
          } else {
            console.warn("tracker was not loaded");
          }
      }
  }
  __karte_loop_count++;
  if(__karte_loop_count > 100) clearInterval(__karte_interval_id);
}, 100);
</script>

※ futureshopの「会員情報置換文字」（{@ member.id @}等）はブラウザ上で非同期に置換されるため、上記タグは会員情報置換文字の置換を最大10秒間待ち受ける実装になっています（詳細）

  1. 「商品詳細」エリア
  • 「出力設定」を「<body>タグ内(<body>の後)に出力する」をチェック
  • 「出力内容」に以下のタグを入力
    <script type="text/javascript">
  try{
    krt("send", "view_item", {
      item_id: '{% analytics.product_no %}',
      name: '{% analytics.product_name %}',
      item_url: '{% analytics.product_path %}',
      item_image_url: '{% analytics.product.image_thumbnail_path %}',
      price: {% analytics.product.price_including_tax %},
      category: '{% analytics.category.name %}',
    });
  }catch(e){
    if ("krt" in window) {
      krt("send", "_error", { message: e.message });
    } else {
      console.warn("tracker was not loaded");
    }
  }
  </script>
  1. 「ショッピングカートページ」エリア：

  • 「出力設定」を「<body>タグ内(<body>の後)に出力する」をチェック

  • 「出力内容」に以下のタグを入力

    <script type="text/javascript">
try {
  var items = [{% analytics.item_info %}];
  var item_ids = items.map( function(item) { return item.item_id; });
  var item_names = items.map( function(item) { return item.name; });
  var item_prices = items.map( function(item) { return item.price; });
  var item_quantities = items.map( function(item) { return item.quantity; });

  krt("send", "cart", {
      price: Number('{% analytics.purchase_price_with_options_including_tax %}'),
      quantity: Number('{% analytics.total_quantity %}'),
      item_ids: item_ids,
      item_names: item_names,
      item_prices: item_prices,
      item_quantities: item_quantities,
      items: items,
      status: {% analytics.total_quantity %} != 0
  });
} catch(e) {
  if ("krt" in window) {
    krt("send", "_error", { message: e.message });
  } else {
    console.warn("tracker was not loaded");
  }
}
</script>

  • 「商品情報置換文字の設定」に以下のタグを入力

    {
  item_id: '{% analytics.product_id %}',
  name: '{% analytics.product_name %}',
  price: Number('{% analytics.product.price_including_tax %}'),
  quantity:  Number('{% analytics.quantity %}'),
  category: '{% analytics.category.name %}'
}

  • 「区切り文字」に , を入力

  1. 「注文完了ページ」エリア：

  • 「出力設定」を「<body>タグ内(<body>の後)に出力する」をチェック

  • 「出力内容」に以下のタグを入力

    <script type="text/javascript">
try {
    var items = [{% analytics.item_info %}];
    krt("send", "buy", {
        transaction_id: '{% analytics.order_no %}',
        revenue: Number('{% analytics.purchase_price_with_options_including_tax %}'),
        items: items,
        shipping: Number('{% analytics.total_postage %}')
    });
    krt("send", "cart", {
      price: 0,
      quantity: 0,
      item_ids: [],
      item_names: [],
      item_prices: [],
      item_quantities: [],
      items: [],
      status: false
    });
} catch(e) {
    if ("krt" in window) {
      krt("send", "_error", { message: e.message });
    } else {
      console.warn("tracker was not loaded");
    }
}
</script>

  • 「商品情報置換文字の設定」に以下のタグを入力

    {
  item_id: '{% analytics.product_id %}',
  name: '{% analytics.product_name %}',
  price: Number('{% analytics.product.price_including_tax %}'),
  quantity: Number('{% analytics.quantity %}')
}

  • 「区切り文字 」に,を入力

  1. 「会員登録完了」エリア：
  • 「出力設定」を「<body>タグ内(<body>の後)に出力する」をチェック
  • 「出力内容」に以下のタグを入力
    <script type="text/javascript">
try{
  krt("send", "signup");
} catch(e) {
  if ("krt" in window) {
    krt("send", "_error", { message: e.message });
  } else {
    console.warn("tracker was not loaded");
  }
}
</script>
  1. 最下部の「登録する」をチェック

以上で設定は完了です。タグが動作し、KARTEの管理画面にユーザーが表示されているかどうか、上記のイベントが飛んでいるかどうかをご確認ください

上記以外のイベント内容の連携について

上記のタグは、Futureshop測定タグを配信する際ユーザーごとに変化する「置換文字」を利用して、実装しております。

デフォルト以外の情報を連携したい場合は、下記のリンク下部にある「置換文字一覧」を確認の上、必要なタグを修正してください。

測定タグ設定（コマースクリエイター）