ショップサーブ（Eストアー）

このマニュアルでは、ショップサーブ環境でLEEEPをご利用いただくための設定手順を説明します。

ショップサーブをご利用の場合、本マニュアルに記載されているすべての内容に対応いただくことで、共通タグおよび注文タグの導入が完了します。

注意事項

本マニュアルは2025年7月時点のショップサーブ管理画面に基づいていますが、実際の管理画面とは異なる場合がありますので、あらかじめご了承ください。
FTPサーバーを利用してトップページなどを個別に編集されている場合は、別途共通タグの設定が必要です。

1．共通タグ

PCページの共通タグ設置方法

PCページの共通タグは、以下の手順で設置してください。

1．デザイン設定 > テーマ「HTMLのカスタマイズ」へ進みます。

2．headタグへの追記 > HTMLを編集をクリックします。

3．表示されたHTML編集画面に、以下の共通タグを貼り付けてください。

重要：共通タグ内の「site_id」はLEEEP管理画面の「設定」から確認し、「xxxxxxxxxxxxxxxx」の部分を書き換えてください。

Plaintext

<!--共通タグ-->
<script src="https://tracking.leeep.jp/v1/tracking/js"></script>
<script src="https://cite.leeep.jp/v2/embed/js" defer></script>
<script>
    const leeepProductId = (window.location.href.match(/(?:SHOP|item)\/([^/?]+)\.html/) || [])[1];
    const interval = window.setInterval(_ => {
        const uid = document.getElementById('leeep_uid')?.textContent?.trim();
        if (uid !== '__MEMBER_ID__' && window['LeeepCite']) {
            ParteTracking.viewPage({
                site_id: 'xxxxxxxxxxxxxx'
            });

            const memberId = uid === 'guest' ? '' : uid;
            LeeepCite.init({
                site_id: 'xxxxxxxxxxxxxx',
                product_id: leeepProductId,
                uid: memberId
            });
            window.clearInterval(interval);
        }
    }, 100);
</script>

4．お店ページ、商品ページ、フリーページ、カートページ、すべてのHTMLを編集の箇所に以下を貼り付ける

Plaintext

<div class="member_info_cart_info">
  <div id="leeep_uid" style="display: none;">__MEMBER_ID__</div>
</div>

5．デザイン設定 > HTMLのカスタマイズ > フッタ > お店ページ, カートページ > HTMLを編集に以下のタグを貼り付けてください。

Plaintext

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cart{$setNumber}.shopserve.jp/js/membercart-api.js"></script>

【補足】

PCページの設定のみでスマートフォンページにも反映されます。詳細はショップサーブ公式ドキュメントの「会員情報とカート内情報を表示する」をご確認ください。

ご注意： FTPサーバーを利用してトップページなどを個別に編集されている場合は、別途共通タグの設定が必要です。

スマートフォンページの共通タグ設置方法

スマートフォンページの共通タグは、以下の手順で設置してください。

1．スマートフォンサイト設定 > 各種設定へ進みます。

2．フッタ設定 > 共通フッタ > 編集から以下のコードを設定してください。

Plaintext

<div class="member_info_cart_info">
  <div id="leeep_uid" style="display: none;">__MEMBER_ID__</div>
</div>

3．表示されたheadタグ設定画面に、以下の共通タグを貼り付けてください。

重要：共通タグ内の「site_id」はLEEEP管理画面の「設定」から確認し、「xxxxxxxxxxxxxxxx」の部分を書き換えてください。

Plaintext

<!--共通タグ-->
<script src="https://tracking.leeep.jp/v1/tracking/js"></script>
<script src="https://cite.leeep.jp/v2/embed/js" defer></script>
<script>
    const leeepProductId = (window.location.href.match(/(?:SHOP|item)\/([^/?]+)\.html/) || [])[1];
    const interval = window.setInterval(_ => {
        const uid = document.getElementById('leeep_uid')?.textContent?.trim();
        if (uid !== '__MEMBER_ID__' && window['LeeepCite']) {
            ParteTracking.viewPage({
                site_id: 'xxxxxxxxxxxxxx'
            });

            const memberId = uid === 'guest' ? '' : uid;
            LeeepCite.init({
                site_id: 'xxxxxxxxxxxxxx',
                product_id: leeepProductId,
                uid: memberId
            });
            window.clearInterval(interval);
        }
    }, 100);
</script>

2．注文タグ

ショップサーブにLEEEPの注文タグを設置することで、注文完了時のイベントをLEEEPに送信し、レビュー依頼メールの送信やコンバージョン計測が可能になります。

設置手順

1. 管理画面へのアクセス

ショップサーブの管理画面にログインし、以下の順番でメニューを選択してください。

PPC・アフィリエイト広告 > リマーケティングタグ設定

2. 設置場所の確認

リマーケティングタグ設定画面で、「購入完了ページのbodyタグ」の入力欄を確認してください。

3. 注文タグの設置

以下のコードを「購入完了ページのbodyタグ」欄に貼り付けてください。

重要：コードは必ず <trackingtag_global></trackingtag_global> タグで囲んで設置してください。

Plaintext

<trackingtag_global>
<script>
function decodeWithEncoding(str, encoding = 'utf-8') {
  // %xx形式を実際のバイト配列に変換
  const bytes = str.match(/%[0-9A-F]{2}|./gi).map(part => {
    if (part.startsWith('%')) {
      return parseInt(part.substring(1), 16);
    }
    return part.charCodeAt(0);
  });
  try {
    const decoder = new TextDecoder(encoding);
    return decoder.decode(new Uint8Array(bytes));
  } catch (e) {
    console.error('デコードエラー:', e);
    return str;
  }
}

// CST_ITMS文字列
const cstString = "__CST_ITMS products= [ITM_NO]_split_[ITM_CNT]_split_[ITM_PRC]_split_[ITM_NAME]_split_[ITM_VAR1]_split_[ITM_VAR2] __";

function parseCST_ITMS(cstItmsString) {
  // 商品情報を格納する配列
  const products = [];
  
  // products=で分割して商品情報を取得
  const parts = cstItmsString.split('products=').filter(part => part.trim());
  
  // 各商品情報を処理
  parts.forEach(part => {
    // 次のproducts=までの内容を取得（複数商品の場合）
    const productData = part.replace(/products=.*$/, '').trim();
    
    // 区切り文字「_split_」で分割
    const values = productData.split('_split_');
    
    // 商品情報オブジェクトを作成（4つの変数のみ）
    const product = {
      product_id: values[0] || '',           // [ITM_NO] 商品番号
      quantity: parseInt(values[1]) || 0,    // [ITM_CNT] 数量
      price: parseInt(values[2]) || 0,       // [ITM_PRC] 商品単価
      name: values[3] || '',                 // [ITM_NAME] 商品名
      sku_code: (values[0] || '') + (values[4] || '') + (values[5] || '') // SKUコード
    };
    
    products.push(product);
  });
  
  return products;
}

// getProductsFromCST関数の定義
function getProductsFromCST(cstItmsString) {
  const products = parseCST_ITMS(cstItmsString);
  
  // 配列フォーマットに変換
  return products.map(product => ({
    product_id: product.product_id,
    sku_code: decodeWithEncoding(product.sku_code, 'euc-jp'),
    sales_price: Number(product.price),
    quantity: Number(product.quantity),
    name: decodeWithEncoding(product.name, 'euc-jp')
  }));
}

const handler = window.setInterval(_ => {
  if (!window['ParteTracking']) return;
  ParteTracking.order({
    site_id: 'YOUR_SITE_ID',  // ※ここにLEEEP管理画面で確認したサイトIDを設定してください
    order_id: __ORD_NUM__,
    user: {
      id: '__MEM_ID__',
      orders_count: __NEW_CUST__ ? 0 : 1,
      email: '__MEM_EMAIL__'
    },
    discount_amount: Math.abs(__GTS_ORDER_DISCOUNTS__),
    products: getProductsFromCST(cstString),
  });
  window.clearInterval(handler);
}, 100);
</script>
</trackingtag_global>

4. サイトIDの設定

上記コードの site_id: 'YOUR_SITE_ID' の部分を、LEEEP管理画面で確認したご自身のサイトIDに変更してください。

サイトIDはLEEEP管理画面の「設定」から確認できます。

5. ショップサーブの変数について

このコードでは、ショップサーブが提供する以下の変数を使用しています。

変数名	説明
__ORD_NUM__	注文番号
__MEM_ID__	会員ID
__MEM_EMAIL__	会員メールアドレス
__NEW_CUST__	新規顧客フラグ（新規の場合true）
__GTS_ORDER_DISCOUNTS__	注文全体の割引額
__CST_ITMS	商品情報（商品番号、数量、価格、商品名など）