futureshopのコマースクリエイターを使用しているECサイトにFlipdeskのタグを設置する手順を説明します。
futureshopのコマースクリエイターを使用しているECサイトに、Flipdeskの基本タグやコンバージョンタグ、その他オプションタグを設置する際は、コマースクリエイターの管理画面から設定していきます。
- タグの設置箇所
- 基本タグの設置
- コンバージョンタグの設置
※会員情報連携のタグ設置もこちらを参照ください。 - カートタグの設置
1. タグの設置箇所
- コマースクリエイターの管理画面にログインします。
- ログイン後、「設定画面 ＞ プロモーション管理 ＞ 測定タグ一覧」を開きます。
- 画面下部にある「＋測定タグを追加する」をクリックします。
- 開いた「計測タグ設定」画面でタグを設置していきます。
2. 基本タグの設置
- 「利用設定」と「名称設定」項目をそれぞれ設定していきます。
項目名 説明 利用設定 「利用する」にチェックを入れる
名称設定 設定名に「Flipdesk」など、分かりやすい任意の名称を記入 - 画面を下にスクロールして、「共通出力」項目で基本タグの設置ルールを設定します。
項目名 説明 出力設定 「<body>タグ内（</body>タグ前）に出力する」を選択します。
※出力設定の1番下を選択出力内容 出力内容部分に、Flipdeskの基本タグを入れます。
貴社専用の基本タグが管理画面にありますので、コピーの上貼り付けてください。基本タグについては、基本タグの仕様のマニュアルをご確認ください。
※キャプチャ内の
api_token=★★★★★の「★」部分は貴社専用のトークンが入ります。 - 次に、コンバージョンタグを設置していきます。
「3. コンバージョンタグの設置」をご確認ください。
基本タグのみの設置で問題ないお客様は画面右下にある「保存する」ボタンをクリックしてください。
会員情報連携（ファイル連携）を使用する場合
会員情報連携用の属性が付与された基本タグを設置してください。- 基本タグ設置がまだの場合
- 基本タグを入力する「出力内容」にdata-sync-user-id属性を含んだ基本タグを入力してください。
※data-sync-user-id属性を含んだ基本タグのマニュアルはこちら
- 基本タグを入力する「出力内容」にdata-sync-user-id属性を含んだ基本タグを入力してください。
- 基本タグ設置が済んでいる場合
- 基本タグの末尾にdata-sync-user-id属性を入力してください。
data-sync-user-id='{@ member.id @}'
▼ data-sync-user-id属性が含まれたFlipdesk基本タグの例
<script language="javascript" charset="UTF-8" type="text/javascript" src="https://api.flipdesk.jp/chat_clients/flipdesk_chat.js?api_token=★★★★★&enc=UNICODE" data-sync-user-id='{@ member.id @}' defer></script>
※api_token=★★★★★の「★」部分は貴社専用のトークンが入ります。
3. コンバージョンタグの設置
画面を下にスクロールしていき、「注文完了ページ」項目で設定していきます。
- 基本タグの設置手順同様に「出力設定」と「出力内容」を設定します。
項目名 説明 出力設定 「<body>タグ内（</body>タグ前）に出力する」を選択します。
※出力設定の1番下を選択出力内容 下記のコンバージョンタグをコピーし貼り付けてください。
tid: ☆☆☆☆;の「☆」の部分はコンバージョンタグごとにIDが異なります。
管理画面よりタグIDをコピーし、必ず置き換えてください。<script id="fd_conversion">
window.fdData = window.fdData || [];
function fdtag(){window.fdData.push(arguments);}
fdtag('track', 'conversion', {
// コンバージョンタグID(※変更しないでください)
tid: ☆☆☆☆,
// 合計購買点数(※必須)
q: '{% analytics.total_quantity %}',
// 合計購買金額(※任意)
p: '{% analytics.purchase_price_including_tax %}',
// 受注番号など、コンバージョンを識別する文字列(※任意)
oid: '{% analytics.order_no %}',
// 購買した商品の内訳(※任意)
skus: [
{% analytics.item_info %}
]
});
</script>コンバージョンタグについては、コンバージョンタグの仕様のマニュアルをご確認ください。
- 次に「商品情報置換文字の設定」を設定していきます。
項目名 説明 出力内容 以下をコピーして入力エリアに貼り付けてください。
{q: {% analytics.quantity %}, sku: "{% analytics.product_no %}", t: "{% analytics.product_name %}", p: {% analytics.product.price_excluding_tax %} }
区切り文字 , （カンマを入れてください）
会員登録をCVとして計測する場合
「会員登録完了」項目で設定していきます。
<script id="fd_conversion">
window.fdData = window.fdData || [];
function fdtag(){window.fdData.push(arguments);}
fdtag('track', 'conversion', {
// コンバージョンタグID(※変更しないでください)
tid: ☆☆☆☆,
// 合計購買点数(※必須)
q: 1,
});
</script>
置き換え文字はないため、「</body>タグの前に出力する」を選択し、
上記タグを出力内容に貼り付けて完了です。
※タグIDは必ず会員登録専用のタグIDに変更してください。
4. カート情報取得タグ
カート内情報取得タグを使用する場合は、基本タグ・コンバージョンタグ同様の画面をさらに
下にスクロールしていき、「ショッピングカートページ」項目で設定していきます。
- ショッピングカートページ項目の「出力設定」と「出力内容」を設定します。
項目名 説明 出力設定 「<body>タグ内（</body>タグ前）に出力する」を選択します。
※出力設定の1番下を選択出力内容 下記のカート情報取得タグをコピーし貼り付けてください。
<script id="fd_cart">
window.fdData = window.fdData || [];
function fdtag(){window.fdData.push(arguments);}
fdtag('track', 'cart', {
skus: [
{% analytics.item_info %}
]
});
</script> - 次に「商品情報置換文字の設定」を設定していきます。
項目名 説明 出力内容 以下をコピーして入力エリアに貼り付けてください。
{q: {% analytics.quantity %}, sku: "{% analytics.product_no %}", t: "{% analytics.product_name %}", p: {% analytics.product.price_excluding_tax %} }
区切り文字 , （カンマを入れてください）
タグ内で使用する変数について
- 本マニュアルにてタグ設置後、正常に発火しない場合はタグで使用している
カートシステム専用の変数が影響している可能性があります。 - 最新の変数は弊社側ではお調べすることができかねますため、カートシステムのお問合せ窓口へご連絡をお願いいたします。