えびすマートを使用しているECサイトにFlipdeskのタグを設置する手順を説明します。
えびすマートを使用しているECサイトに、Flipdeskの基本タグやコンバージョンタグ、その他オプションタグを設置する際は、えびすマートの管理画面から設定していきます。
共通
各タグの設定をするにあたって、まずタグの設置ルールから設定していきます。
- タグの設置ルール
「データ解析 ＞ タグマネージャー ＞ タグルール新規登録／一覧」を選択し、
「新規登録」をクリックして設定していきます。
次に、タグの設定を行っていきます。
- タグの設定
「データ解析 ＞ タグマネージャー ＞ タグ新規登録／一覧」を選択し、
「新規登録」をクリックして設定していきます。
1. 基本タグの設置
- まずはタグの設置ルールから行います。
「新規登録」をクリック後、「タグルール新規登録・編集」画面で基本タグの設置ルールを設定します 。
項目名 説明 タグルール名 「Flipdesk基本タグ」など、分かりやすい任意の名称を記入 出力ページ 「全画面」を選択 表示区分 「表示」を選択 開始日 任意で設定日などを設定 終了日 設定しない -
「確認」ボタンをクリック後、「登録」ボタンをクリックして保存します。
-
次に、基本タグの設定をしていきます。
項目名 説明 タグコード タグを管理するためのタグコードを設定します。
タグコードは半角の英数字・ハイフン・アンダーバーのみ入力可能です。
- 例）flipdesk_kihon 、flipdesk_common など
タグ名 タグコードに紐付くタグ名を入力します。
分かりやすい名称にしていただくことを推奨します。
- 例）Flipdesk基本タグ など
タグタイプ 「カスタムHTML」を選択 アカウントID 入力なし タグHTML 貴社専用の基本タグが管理画面にありますので、コピーの上貼り付けてください。
基本タグについては、基本タグの仕様のマニュアルをご確認ください。
※
api_token=★★★の「★」部分は貴社専用のトークンが入ります。タグ出力個所 「下部」を選択 タグ表示ルール [1]で作成したタグルールを選択 タグ非表示ルール 選択しないままで問題ありません。 - 「確認」ボタンをクリックし、「登録」ボタンをクリックして基本タグの設置は完了です。
2. コンバージョンタグの設置
- 基本タグ同様に、まずはタグの設置ルールから行います。
「新規登録」をクリック後、「タグルール新規登録・編集」画面で基本タグの設置ルールを設定します 。
項目名 説明 タグルール名 「FlipdeskCVタグ」など、分かりやすい任意の名称を記入 出力ページ 「カート完了画面」を選択 表示区分 「表示」を選択 開始日 任意で設定日などを設定 終了日 設定しない - 「確認」ボタンをクリック後、「登録」ボタンをクリックして保存します。
- 次に、コンバージョンタグの設定をしていきます。
項目名 説明 タグコード タグを管理するためのタグコードを設定します。
タグコードは半角の英数字・ハイフン・アンダーバーのみ入力可能です。
- 例）flipdesk_cv など
タグ名 タグコードに紐付くタグ名を入力します。
分かりやすい名称にしていただくことを推奨します。
- 例）FlipdeskCVタグなど
タグタイプ 「カスタムHTML」を選択 アカウントID 入力なし タグHTML 下記に記載しているものをコピーし貼り付けてください。 タグ出力個所 「下部」を選択 タグ表示ルール [1] で作成したタグルールを選択 タグ非表示ルール 選択しないままで問題ありません。 タグHTML部分の記載について
下記のコンバージョンタグをコピーし貼り付けてください。
tid: ☆☆☆☆;の「☆」の部分はコンバージョンタグごとにIDが異なります。
管理画面よりタグIDをコピーし、必ず置き換えてください。<script id="fd_conversion">
window.fdData = window.fdData || [];
function fdtag() {window.fdData.push(arguments);}
const p = document.HIDDEN_DATA_FORM.GOKEI.value;
const oid = document.HIDDEN_DATA_FORM.ORDER_DISP_NO.value;
let q = 0;
let elementList = document.getElementsByName("HIDDEN_DATA_FORM")[0]
.childNodes;
const elements = [].slice.call(elementList);
const data = elements.map((e) => {
return {
tag: e.name,
value: e.value
}
})
const skusList = [];
for (let i = 0; i < data.length; i++) {
if (data[i].tag === 'ITEM_CD') {
const skus = {
q: '',
sku: '',
t: '',
p: '',
c: ''
}
for (let j = i; j < data.length; j++) {
const { tag, value } = data[j];
if(tag === "ITEM_CD_ONLY"){
skus.sku = value
}
if( tag === 'ITEM_AMOUNT'){
const quantity = parseInt(value)
skus.q = quantity
q += quantity
}
if (tag === "ITEM_NAME"){
skus.t = value
}
if (tag === "ITEM_TEIKA"){
skus.p = parseInt(value)
}
if (tag === 'ITEM_CATEGORY') {
skus.c = value
break;
}
}
skusList.push(skus);
}
}
fdtag("track", "conversion", {
tid: ☆☆☆☆,
q,
p,
oid,
skus: skusList
});
</script> - 「確認」ボタンをクリックし、「登録」ボタンをクリックしてコンバージョンタグの設置は完了です。
3. カート情報取得タグの設置
- 基本タグ同様に、まずはタグの設置ルールから行います。
「新規登録」をクリック後、「タグルール新規登録・編集」画面で基本タグの設置ルールを設定します 。
項目名 説明 タグルール名 「Flipdeskカートタグ」など、分かりやすい任意の名称を記入 出力ページ 「カートフロー」を選択 表示区分 「表示」を選択 開始日 任意で設定日などを選択 終了日 設定しない - 「確認」ボタンをクリック後、「登録」ボタンをクリックして保存します。
- 次に、カート情報取得タグの設定をしていきます。
項目名 説明 タグコード タグを管理するためのタグコードを設定します。
タグコードは半角の英数字・ハイフン・アンダーバーのみ入力可能です。
- 例）flipdesk_cart など
タグ名 タグコードに紐付くタグ名を入力します。
分かりやすい名称にしていただくことを推奨しております。
- 例）Flipdeskカートタグなど
タグタイプ 「カスタムHTML」を選択 アカウントID 入力なし タグHTML 下記に記載しているものをコピーし貼り付けてください。 タグ出力個所 「下部」を選択 タグ表示ルール [1] で作成したタグルールを選択 タグ非表示ルール 選択しないままで問題ありません。
タグHTML部分の記載について
<script id="fd_cart">
window.fdData = window.fdData || [];
function fdtag() {window.fdData.push(arguments);}
// domに出力されたカート商品
const cartItems = document.getElementById("flipdeskCartTagRefItem");
// ['\n q\n sku\n t\n p\n']
const innerTexts = Array.from(cartItems.children).map(item => item.innerText)
// ['q,sku,t,p']
const formatTexts = innerTexts.map((text) => text.trim().replace(/ /g, '').split('\n'))
//skusの形式にフォーマット
const skus = formatTexts.map((formatText) => {
return {
q: parseInt(formatText[0].replace(/,/g, ''), 10),
sku: formatText[1],
t: formatText[2],
p: parseInt(formatText[3].replace(/,|[^0-9]$/g, ''),10),
c: ''
}
})
fdtag('track', 'cart', {
'skus': skus
});
</script> - 「確認」ボタンをクリックし、「登録」ボタンをクリックします。
- 「コンテンツ管理 ＞ テンプレート管理」より、共通ヘッダーにあたる「header_cart.xhtml」ファイルを用意し、カート情報を出力する記述を追記します。
<!-- outputItem -->
<div id="flipdeskCartTagRefItem" style="display:none;">
<span m:id='common.LOOP_CART_ITEM'>
<span m:id='common.CART_ITEM_AMOUNT_HERE'></span>
<span m:id='common.CART_ITEM_CODE_HERE'></span>
<span m:id='common.CART_ITEM_NAME_HERE'></span>
<span m:id='common.CART_ITEM_SYOKEI_ZEIKOMI_HERE'></span>
</span>
</div>
<!-- / outputItem -->
カート情報取得タグの設置範囲について
タグルールで出力ページを「全画面」にし、header.xhtml 内へ記述した場合、
カートページ以外でもカート条件を使用したシナリオを配信できることを確認しております。
4. 会員情報連携連携（ファイル連携）手順
オプション「会員情報連携」の契約が必要です。
- 基本タグの設置方法で行う「タグHTML」に入力する基本タグを以下に変更します。
api-topken=★★★部分には、貴社専用のトークンが入ります。
<script language="javascript" charset="UTF-8" type="text/javascript">
//改行文字が必ず入るのでtirmする
var userId = document.getElementById('flipdeskDataSyncUserId').innerHTML.trim();
var script = document.createElement('script');
script.type = 'text/javascript';
script.language = 'javascript';
script.src ='https://api.flipdesk.jp/chat_clients/flipdesk_chat.js?api_token=★★★';
script.setAttribute('data-sync-user-id', userId);
script.defer = true;
document.body.appendChild(script);
</script>※基本タグの出力個所は必ず「下部」にしてください
- 「コンテンツ管理 ＞ テンプレート管理」より、共通ヘッダーにあたる「header.xhtml」に会員IDを出力する記述を追記します。
<!-- userId -->
<div id="flipdeskDataSyncUserId" style="display:none;">
<span m:id='common.MEMBER_ID_HERE'></span>
</div>
<!-- / userId -->
- カートページ配下の共通ヘッダーにあたる「header_cart.xhtml」ファイルにも会員IDを出力する記述を追記します。
<!-- userId -->
<div id="flipdeskDataSyncUserId" style="display:none;">
<span m:id='common.MEMBER_ID_HERE'></span>
</div>
<!-- / userId -->
- 商品詳細ページのテンプレートにあたる「item_detail.xhtml」ファイルに共通ヘッダーを読み込む記述をします。
<iframe m:id='common.IMPORT_HERE' src="common/header.xhtml" frameborder="0" scrolling="no" width="100%"></iframe>
タグ内で使用する変数について
- 本マニュアルにてタグ設置後、正常に発火しない場合はタグで使用している
カートシステム専用の変数が影響している可能性があります。 - 最新の変数は弊社側ではお調べすることができかねますため、カートシステムのお問合せ窓口へご連絡をお願いいたします。