Shopifyを使用しているECサイトにFlipdeskのタグを設置する手順を説明します。
Shopifyを使用しているECサイトに、Flipdeskの基本タグやコンバージョンタグ、その他オプションタグを設置する際は、Shopifyの管理画面から設定していきます。
1. 基本タグの設置
- 「オンラインストア ＞ テーマ」を開き、「現在のテーマ」三点リーダーから「コードを編集」を選択
- 「theme.liquid」ファイルに基本タグを設置する
2. コンバージョンタグの設置
基本タグを設置するだけで購入情報も自動的に収集を開始します。
注文完了ページに基本タグを配信するため、追加スクリプトに記述します。
- 「設定 ＞ チェックアウト ＞ 追加スクリプト」を開く
- 追加スクリプト内に基本タグを設置してください。
基本タグ設置後はテストコンバージョンを行い、コンバージョン情報を取得できているか確認してください。
複数のコンバージョンタグを扱いたい場合
shopifyご利用で複数のコンバージョンタグを扱いたい場合は弊社担当窓口までご連絡くださいませ。
- 「追加スクリプト」内に下記コードを貼り付ける
※tid: ☆☆☆☆;の「☆」の部分はコンバージョンタグごとにIDが異なります。
管理画面よりタグIDをコピーし、必ず置き換えてください。
<!-- body内に埋める -->
<script id="fd_conversion">
window.fdData = window.fdData || [];
function fdtag(){window.fdData.push(arguments);}
window.addEventListener("load", function(event) {
fdtag('track', 'conversion', {
// コンバージョンタグID(★は使用するCVタグのものに変更してください)
tid: ☆☆☆☆,
// 合計購買点数(※必須)
q: {{ order.line_items | map: 'quantity' | join: '+' }},
// 合計購買金額(※任意)
p: {{ order.total_price | divided_by: 100 }},
// 受注番号など、コンバージョンを識別する文字列(※任意)
oid: '{{ order.order_number }}',
// 購買した商品の内訳(※任意)
skus: [
{% for item in order.line_items %}
{
q: {{ item.quantity }}, // 購買点数(※必須。固定の場合は「1」を設定してください。)
sku: '{{ item.sku }}', // 商品番号など、商品を識別する文字列(※任意)
t: '{{ item.title }}', // 商品名(※任意)
p: {{ item.price | divided_by: 100 }}, // 商品の単価(※任意)
c: '{{ item.product_type }}' // 商品カテゴリ(※任意)
}
{% unless forloop.last %},
{% endunless %}
{% endfor %}
]
});
});
</script>
▼ 基本タグとコンバージョンタグを設置した例
<script language="javascript" charset="UTF-8" type="text/javascript" src="https://api.flipdesk.jp/chat_clients/flipdesk_chat.js?api_token=★★★&enc=UNICODE" defer></script>
<!-- body内に埋める -->
<script id="fd_conversion">
window.fdData = window.fdData || [];
function fdtag(){window.fdData.push(arguments);}
window.addEventListener("load", function(event) {
fdtag('track', 'conversion', {
// コンバージョンタグID(★は使用するCVタグのものに変更してください)
tid: ☆☆☆☆,
// 合計購買点数(※必須)
q: {{ order.line_items | map: 'quantity' | join: '+' }},
// 合計購買金額(※任意)
p: {{ order.total_price | divided_by: 100 }},
// 受注番号など、コンバージョンを識別する文字列(※任意)
oid: '{{ order.order_number }}',
// 購買した商品の内訳(※任意)
skus: [
{% for item in order.line_items %}
{
q: {{ item.quantity }}, // 購買点数(※必須。固定の場合は「1」を設定してください。)
sku: '{{ item.sku }}', // 商品番号など、商品を識別する文字列(※任意)
t: '{{ item.title }}', // 商品名(※任意)
p: {{ item.price | divided_by: 100 }}, // 商品の単価(※任意)
c: '{{ item.product_type }}' // 商品カテゴリ(※任意)
}
{% unless forloop.last %},
{% endunless %}
{% endfor %}
]
});
});
</script>
3. カート情報取得タグの設置
- 「アプリと販売チャネル ＞ オンラインストア」を開く
- テーマメニューの画面に遷移後、「現在のテーマ」の三点リーダーをクリックし、「コードを編集」を選択
- 「snippets ＞ cart-drawer.liquid」を開き、末尾にカート情報取得タグを設置して右上の「保存する」ボタンをクリック
▼ 記載例
<!-- body内に埋める -->
<script id="fd_cart">
window.fdData = window.fdData || [];
function fdtag(){window.fdData.push(arguments);}
fdtag('track', 'cart', {
'skus': [{% for item in cart.items %}
{
q: '{{ item.quantity }}', // 点数(※必須)
sku: '{{ item.sku }}', // 商品SKU(※任意)
t: '{{ item.title }}', // 商品名(※任意)
p: '{{ item.final_price | money_without_trailing_zeros | remove: "¥" | remove: ","}}', // 単価(※任意)
c: '{{ item.product.tags }}' // カテゴリ(※任意)
},
{% endfor %}
]
});
</script>
4. 会員情報連携：ファイル連携
「theme.liquid」ファイルに設置している基本タグを下記に差し替える
※{{ customer.id }}が会員IDを表します。
<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="{{ customer.id }}" defer></script>
※api_token=★★★★★の「★」部分は貴社専用のトークンが入ります。
5. 2025年8月（予定）「追加スクリプト」の廃止について
2025年8月（予定）に追加スクリプト機能の使用はshopifyより非推奨となりました
- 追加スクリプトを使って基本タグ、コンバージョンタグ設置をしているお客様は設置方法の見直しをお願いいたします。
- カスタムピクセルで基本タグを配信したページではシナリオを表示することができなくなります。
基本タグの設置
- Shopifyの管理画面に入り、 「設定 ＞ お客様のイベント」メニューに入り「カスタムピクセル」をクリック
- 任意のピクセル名を入力し、「ピクセルを追加」をクリック
※ピクセル名は管理しやすい名前を設定してください。
例）Flipdesk基本タグ/CVタグ など
- コードの欄に以下を貼り付ける
※api_token=★★★★★の「★」部分は貴社専用のトークンが入ります。
(function() {
var script = document.createElement('script');
script.language = 'javascript';
script.charset = 'UTF-8';
script.type = 'text/javascript';
script.src = 'https://api.flipdesk.jp/chat_clients/flipdesk_chat.js?api_token=★★★★★&enc=UNICODE';
script.defer = true;
document.body.appendChild(script);
})();
4. タグ設置後、「保存」ボタンをクリックして「連携」ボタンをクリック
5. これで基本タグの設置は完了
コンバージョンタグの設置
基本タグを設置するだけで購入情報も自動的に収集を開始します。
基本タグ設置後はテスト購入を行い、コンバージョン情報が取得できているかご確認ください。
複数のコンバージョンタグを扱いたい場合
上記の自動収集はデフォルトで設定されているtid（コンバージョンタグのID）でコンバージョンデータを収集します。
コンバージョンポイントが複数ある（購入完了・会員登録）など、複数のコンバージョンタグを扱いたい場合は下記手順でコンバージョンタグを設置してください。
- 「設定 ＞ お客様のイベント」メニューを開き、基本タグを設置しているカスタムピクセルに設置したいコンバージョンタグを追記する
- 上記赤枠に以下のコードを貼り付ける
※tid: ☆☆☆☆;の「☆」の部分はコンバージョンタグごとにIDが異なります。
管理画面よりタグIDをコピーし、必ず置き換えてください。
analytics.subscribe("checkout_completed", event => {
window.fdData = window.fdData || [];
function fdtag(){window.fdData.push(arguments);}
const checkout = event.data.checkout;
const lineItems = checkout.lineItems && checkout.lineItems.map(item => ({
q: item.quantity, // 購買点数(※必須。固定の場合は「1」を設定してください。)
sku: item.variant.sku, // 商品番号など、商品を識別する文字列(※任意)
t: item.title, // 商品名(※任意)
p: item.variant.price.amount, // 商品の単価(※任意)
c: item.variant.product.type // 商品カテゴリ(※任意)
}));
const totalQuantity = lineItems.reduce((acc, item) => acc + item.q, 0);
const totalPrice = checkout.totalPrice.amount ;
fdtag('track', 'conversion', {
// コンバージョンタグID(★は使用するCVタグのものに変更してください)
tid: '☆☆☆☆',
// 合計購買点数(※必須)
q: totalQuantity,
// 合計購買金額(※任意)
p: totalPrice,
// 受注番号など、コンバージョンを識別する文字列(※任意)
oid: checkout.order.id,
// 購買した商品の内訳(※任意)
skus: lineItems
});
});
3. タグ設置後、保存
4. 以上でコンバージョンタグの設置は完了
会員情報連携：ファイル連携
- 「販売チャネル ＞ オンラインストア ＞ テーマ」を開き、「現在のテーマ」の三点リーダーをクリックして「コードを編集」を選択
- 「theme.liquid」ファイルに下記を追記して「保存」をクリック
<script>
document.addEventListener("DOMContentLoaded", function() {
var customerId = {{ customer.id | default: 'null' }};
if (customerId !== 'null') {
localStorage.setItem('customerId', customerId);
} else {
localStorage.removeItem('customerId');
}
});
</script>
3. 「設定 ＞ お客様のイベント」を開き、「1.基本タグの設置」にて設置した基本タグを以下に
差し替える
※api_token=★★★★★の「★」部分は貴社専用のトークンが入ります。
(function() {
var script = document.createElement('script');
var customerId = localStorage.getItem('customerId');
script.charset = 'UTF-8';
script.type = 'text/javascript';
script.src = 'https://apitest.flipdesk.jp/chat_clients/flipdesk_chat.js?api_token=★★★&enc=UNICODE';
script.defer = true;
script.setAttribute('data-sync-user-id', customerId);
document.body.appendChild(script);
})();
4. 設置後、「保存」ボタンをクリックして保存する
5. 実際にブラウザのコンソールに会員IDが出力されていれば、連携成功
 |