FutureShop2の環境でLEEEPをご利用いただくためのマニュアルページです。
FutureShop2をご利用の場合はこのマニュアルに記載ある内容を全て対応いただくことで、計測タグの導入対応が完了となります。
※2023年2月時点でのFutreShop管理画面でのマニュアルとなります。実際の管理画面と異なる場合があります。
※以下の記事はFutureShop2の「コマースクリエイター運用中」をご利用中のお客様向けのマニュアルとなります。
計測タグについての詳細はFutureShop2の公式ドキュメントを御覧ください。
以下のイベントを計測するタグの設置方法についてご案内いたします。
共通タグ
ページ閲覧
商品の閲覧
注文
コンテンツ表示タグ
①サイドメニューの「設定」 > 「プロモーション管理」 > 「計測タグ一覧」 > 「計測タグを追加する」をクリック。
②「利用設定」の「利用する」にチェック。名称を「LEEEP」と入力。
③「置換文字設定」の「アカウント名」にサイトIDを入力。（サイトIDの確認はこちらから）
④「共通出力」の「出力設定」を「<head>タグ内に出力する」にチェックし、「出力内容」に以下のタグを入力する。
<script src="https://tracking.leeep.jp/v1/tracking/js"></script>
<script src="https://cite.leeep.jp/v2/embed/js" defer></script>
<script defer>
const site_id = "{% analytics.account_id %}"
const uid = "{@ member.id @}"
ParteTracking.viewPage({
site_id: site_id,
product_id: window['product_id'],
uid: uid,
});
document.addEventListener('DOMContentLoaded', _ => {
LeeepCite.init({site_id: site_id, product_id: window['product_id'], uid: uid});
});
</script>⑤「商品詳細」の「出力設定」を「<head>タグ内に出力する」にチェックし、「出力内容」に以下のタグを入力する。
<script>
window['product_id'] = "{% analytics.product_no %}"
ParteTracking.viewItem({
site_id: site_id,
product_id: window['product_id'],
uid: uid,
});
</script>⑥「注文完了ページ」の「出力設定」を「<body>タグ内（</bodyタグの前>）に出力する」にチェックする。
・ 「出力内容」に以下のタグを入力する
<script>
var products = [{% analytics.item_info %}];
ParteTracking.order({
site_id: site_id,
order_id: '{% analytics.order_no %}',
discount_amount: 0,
products: products,
user: {
id: uid,
orders_count: Number({% analytics.member.times_purchased %}),
}
});
</script>・ 「商品情報置換文字の設定」の「出力内容」以下のタグを入力する
{
product_id: '{% analytics.product_no %}',
sku_code: '{% analytics.product.sku %}',
sales_price: Number({% analytics.product.price_with_options_including_tax %}),
quantity: Number({% analytics.quantity %}),
name: '{% analytics.product_name %}',
}・ 「商品情報置換文字の設定」の「区切り文字」に , を入力する
⑦最下部の「保存する」をクリックする。
以上で計測タグ、共通タグの設置は完了です。
LEEEP管理画面の「タグ一覧画面」にて発行いただいたタグの設置ガイドです。
トップページなど、タグ編集にて商品マクロを指定しないタグを設置する方法には、以下の2通りがあります。
タグの掲載の箇所の「コードで埋め込む」にて発行されるHTMLコードをコピーし、ECサイト内のコンテンツを表示したい場所にあたるHTMLに貼り付けてください。
タグの掲載の箇所の「URLと位置を指定して掲載する」から、掲載したい場所のURLとCSSセレクターを指定してください。
※最新のLEEEP共通タグがページに埋め込まれている必要があります。
商品詳細ページなど、タグ編集にて商品マクロを指定したタグを設置する方法には、以下の2通りがあります。
タグの掲載の箇所の「コードで埋め込む」にて発行されるHTMLコードをコピーし、ECサイト内のコンテンツを表示したい場所にあたるHTMLに貼り付けてください。
重要：futureshopをご利用の場合、product_id: '__商品IDを指定__',の箇所をproduct_id: product_id,に書き換える必要があります。
また、このコードは"共通の商品詳細ページ"にあたるHTML内に1つ設置してください。
実装サンプル
<!-- LEEEP tag start -->
<script src="https://cite.leeep.jp/v2/embed/js" defer></script>
<div id="leeep-tag-xxxxxxxxxxxxxxxx"></div>
<script>
document.addEventListener('DOMContentLoaded', _ => {
LeeepCite.init({
tag_id: 'xxxxxxxxxxxxxxxx',
product_id: product_id,
});
});
</script>
<!-- LEEEP tag end -->タグの掲載の箇所の「URLと位置を指定して掲載する」から、商品ページ共通のURLとCSSセレクターを指定してください。
※最新のLEEEP共通タグがページに埋め込まれている必要があります。