FutureShop2への導入 | KARTEサポートサイト

Futureshop2の環境でKARTEをご利用いただくためのヘルプページです。タグの設置箇所などについては以下の各ページをご参照ください。

目次 - Page Index

1 FutureShop2環境に計測タグを設置する
2 追加レイアウトを使用している場合
3 コンバージョンタグ・ユーザータグの設置
4 スマートフォン向けサイトの計測を開始する
5 新規会員登録(signup)イベントの計測方法
6 カートイベントの計測方法

FutureShop2環境に計測タグを設置する

以下の手順に従い計測タグを設定することで、FutureShop2店舗のユーザー計測を開始できます。

（※FutureShop2で追加レイアウトを使用している場合は、使用しているすべての追加レイアウトで計測タグを設定する必要があります。）

（※静的ページの管理をFTPや別サービスでされている場合は、こちらのページの内容をもとに設定を行ってください。）

1. レイアウト編集ページに移動
FutureShop2管理画面にログインした状態で、構築メニュー → デザイン設定に移動し、お使いのテンプレートの編集ボタンをクリックしてレイアウト編集ページに移動します。

追加レイアウトを使用している場合

FutureShop2で追加レイアウトを使用している場合は、使用しているすべての追加レイアウトで計測タグを設定する必要があります。

1. レイアウト編集ページに移動
FutureShop2管理画面にログインした状態で、構築メニュー → デザイン設定に移動し、お使いのテンプレートの編集ボタンをクリックしてレイアウト編集ページに移動します。

2. 追加レイアウトパターンの確認
レイアウト編集ページのレイアウト指定をクリックし、現在使用している追加レイアウトパターンを確認します。

ここで表示されている追加レイアウトパターンのレイアウト編集ページにそれぞれ計測タグを設定する必要があります。
図の場合ではカートページに追加レイアウトパターン01が使用されていますので、追加レイアウトパターン01のヘッダエリアに計測タグを設定する必要があります。
※図の場合で追加レイアウトパターン01に計測タグを設定していない場合、カートページではKARTEによるユーザーの計測は一切行われません。

3. レイアウト編集ページのレイアウトパターンを切り替え
手順2で確認した追加レイアウトパターンで計測タグを設置します。手順1に従ってお使いのテンプレートのレイアウト編集ページに移動し、レイアウトパターンの追加レイアウトを選択して、手順2で確認した追加レイアウトパターンを選択し、黄色い切り替えボタンをクリックします。

図の場合では追加レイアウトパターン01を選択しています。

4. レイアウトパターン切り替えの確認
切り替えボタンを押して遷移したページで、現在編集中のレイアウトパターンが手順3で選択したレイアウトパターンであることを確認します。

図は追加レイアウトパターン01に切り替えた場合の表示です。

5. 計測タグの設置
ページ下部のヘッダエリアに表示させるHTMLタグの入力欄に、管理画面から取得した計測タグを貼り付けてください。

6. 登録
ページ最下部の登録するボタンをクリックし、設定を保存します。
手順2で確認したすべての追加レイアウトパターンで、手順3以降の設定をしてくだい。

コンバージョンタグ・ユーザータグの設置

FutureShop２環境におけるコンバージョンタグ・ユーザータグの設置手順です。
FutureShop2環境における、ユーザーID以外のユーザー情報の取得方法は、現在未対応となっております。

1. 任意アフィリエイト設定ページに移動
FutureShop2管理画面にログインした状態で、構築メニュー → プロモーション管理 →任意アフィリエイト設定に移動します。
2. アフィリエイト追加
初期テンプレート一覧にて指定なしをチェックし、アフィリエイト追加をクリックします。
3．コンバージョン(成果)タグ設定①
出力設定で出力するにチェックを入れます。
4. コンバージョン(成果)タグ設定②
出力画面で注文完了ページに表示を選択します。
5. コンバージョン(成果)タグ設定③
トラッキングタグ設定で売上型(商品別コミッション)をチェックします。
6. コンバージョン(成果)タグ設定④
トラッキングタグ(繰り返し前)に以下の内容を入力してください。

<script type="text/javascript">
try{
  if('$MEMBER_ID$' !== undefined && '$MEMBER_ID$' !== '' && '$MEMBER_ID$' !== null){
    tracker.user({
      user_id: '$MEMBER_ID$'
    });
  }
var items = [

7. コンバージョン(成果)タグ設定⑤
トラッキングタグ(繰り返し)に以下の内容を入力してください。

{ item_id: '$GOODS_NO$', name: '$GOODS_NAME$', price: $UNIT_PRICE$, quantity: $BUY_COUNT$ }

8. コンバージョン(成果)タグ設定⑥
区切り文字の欄に,を入力してください。
9. コンバージョン(成果)タグ設定⑦
トラッキングタグ(繰り返し後)に以下の内容を入力してください。

];

items.map(function(item){
  if(item.name !== null && item.name !== undefined){
    item.name = decodeURIComponent(item.name);
  }
})

  tracker.buy({
    transaction_id: '$ORDER_ID$',
    revenue: $TOTAL_GOODS_AMOUNT$+0,
    items: items
  });
  tracker.track('in_cart',{status: false});
}catch(e){
  if('tracker' in window){ tracker.track('_error',{ message: e.message }); }
}
</script>

10.登録
ページ最下部の登録するボタンをクリックし、設定を保存します。

スマートフォン向けサイトの計測を開始する

スマートフォン向けサイトを設定している場合、計測タグの追加設置が必要になります。（コンバージョンタグ・ユーザータグの追加設置は必要ございません）

1. スマートフォントップページ設定に移動
FutureShop2管理画面にログインした状態で、モバイル → スマートフォン設定 → トップページ設定に移動します。

2. スマートフォン起点ページ設定①
スマートフォン起点ページ(自動生成)設定のヘッダコメントのHTMLタグを使用する**にチェックがついていない場合、チェックをつけます。
3. スマートフォン起点ページ設定②
スマートフォン起点ページ(自動生成)設定のヘッダコメントの入力欄最下部に、管理画面から取得した計測タグを入力します。
４．登録

ページ最下部の登録するボタンをクリックし、設定を保存します。

５．スマートフォン基本設定ページに移動
続いて、基本設定に移動します

６．スマートフォン基本設定①
レイアウト設定のヘッダコメント１のHTMLタグを使用するにチェックがついていない場合、チェックをつけます。
７．スマートフォン基本設定②
レイアウト設定のヘッダコメント１の入力欄最下部に、管理画面から取得した計測タグを入力します。(手順3.スマートフォン起点ページ設定②で入力したものと同内容です。)
8.登録
ページ最下部の登録するボタンをクリックし、設定を保存します。

以上でスマートフォン用の設定は終了です。

新規会員登録(signup)イベントの計測方法

FutureShop2環境にて、来訪ユーザーの新規会員登録のイベントを計測する方法の解説ページです。
FutureShop2環境での新規会員登録イベントは、任意アフィリエイト設定ページにて行います。

1.任意アフィリエイト設定ページに移動
FutureShop2管理画面にログインした状態で、構築メニュー → プロモーション設定 → 任意アフィリエイト設定に移動します。
2.アフィリエイト追加
初期テンプレート一覧にて指定なしをチェックし、アフィリエイト追加をクリックします。
3．コンバージョン(成果)タグ設定①
出力設定で出力するにチェックを入れます。
4.コンバージョン(成果)タグ設定②
出力画面で会員登録完了ページに表示を選択します。
5.コンバージョン(成果)タグ設定③
トラッキングタグ設定で申込型／売上型(固定コミッション)をチェックします。
6.コンバージョン(成果)タグ設定④
トラッキングタグに以下の内容を入力してください。

<script type="text/javascript">
try{
 tracker.track("signup"); 
}catch(e){ if('tracker' in window){ tracker.track('_error',{ message: e.message }); } }
</script>

7.登録
ページ最下部の登録するボタンをクリックし、設定を保存します。

カートイベントの計測方法

来訪者がカート内に入れた商品や金額を計測することができます。
また、statusを参照することにより、カートに商品を入れたがまだ購入に至っていない来訪者をセグメント化することができます。

1.任意測定タグページへ移動
FutureShop2管理画面にログインした状態で、構築メニュー → プロモーション設定 → 任意測定タグ設定に移動します。
任意測定タグ新規登録ボタンをクリックします。
2.任意測定タグの編集
測定タグ設定を以下のように編集します。

全体出力設定：各ページの出力設定を有効にするにチェック
設定名：KARTEカートタグ（※任意の名称を入力してください）

ショッピングカートページを以下のように編集します。

出力設定：< body >タグ内に出力する
出力内容：

<script type="text/javascript">
(function() {
  if('tracker' in window){
    try{
      var items = [$ITEM_INFO$];
      var total = 0;

      items = items.map(function(item) {
          item.total = item.price * item.quantity;
          total += item.total;
          return item;
      });

      tracker.track('in_cart', {
          status: true,
          items: items,
          total: total
      });
    }catch(e){
      tracker.track('_error',{message: e.message});
    }
  }
})();
</script>

商品情報置換文字($ITEM_INFO$)の設定：

{ item_id: '$GOODS_NO$', name: '$GOODS_NAME$', price: Number('$GOODS_PRICE_INTAX$'), quantity:  Number('$GOODS_COUNT$') }

区切り文字：

3.登録
登録するボタンをクリックします。

ユーザーの行動を計測する