ショップサーブへの導入手順

ショップサーブを使用しているECサイトにFlipdeskのタグを設置する手順を説明します。

ショップサーブを使用しているECサイトに、Flipdeskの基本タグやコンバージョンタグ、その他オプションタグを設置する際は、ショップサーブの管理画面から設定していきます。

1. 事前準備

ショップサーブを使用しているECサイトでは、ショップ（トップページから商品ページまで）とカート（カートページから購入完了ページまで）でドメインが異なるため、Flipdesk管理画面で「サイトのドメイン」を設定する必要があります。

Flipdesk管理画面にログイン後、「一般設定 ＞ サイトのドメイン」にショップとカートのドメインを入力して保存します。
※ショップのドメインに独自ドメインを使用している場合も同様です。

2. 基本タグの設置

1. Flipdesk管理画面へログインし、「タグ管理 ＞ 基本タグ」より「基本タグ」をコピーする
   
2. ショップサーブ管理画面の「集客・運用 ＞ PPC・アフィリエイト広告 ＞ リマーケティングタグ設定」より、各タブの「bodyタグ」内に [1] でコピーしたFlipdeskの基本タグを貼り付ける
   

3. 「トップページ」〜「その他のページ」タブの設定画面に基本タグを貼り付け終えたら、
　 「設定を保存する」をクリック

3. コンバージョンタグの設置

1. ショップサーブ管理画面の「集客・運用 ＞ PPC・アフィリエイト広告
    ＞ リマーケティングタグ設定」を開く
2. 購入完了ページのタブを選択
   1. 
3. 「bodyタグ」内に下記コードを添付する
   tid:★★★の部分は管理画面より該当の数字に変更してください

<trackingtag_global>

<script id="fd_conversion">

window.fdData = window.fdData || [];
function fdtag(){window.fdData.push(arguments);}

const orderId = __ORD_NUM__;
const itemName = "__CST_ITMS si=[ITM_NAME_GA4]__";

function safeDecodeURIComponent(str) {
    return str.replace(/(%[0-9A-F]{2})+/gi, function(encoded) {
        try {
            return decodeURIComponent(encoded);
        } catch (e) {
            console.error("デコードに失敗しました:", encoded, e);
            return encoded;
        }
    });
}

const decodedItemName = safeDecodeURIComponent(itemName);
const name = decodedItemName.split('si=').filter(Boolean); // 商品名
const itemCount = "__CST_ITMS si=[ITM_CNT]__";
const Count = itemCount.split('si=').filter(Boolean); // 個数
const itemSku = "__CST_ITMS si=[ITM_NO_GA4]__";
const Sku = itemSku.split('si=').filter(Boolean); // 商品ID
const itemPrice = "__CST_ITMS si=[ITM_PRC]__";
const Price = itemPrice.split('si=').filter(Boolean); // 商品価格
const itemCategory = "__CST_ITMS si=[ITM_CAT_GA4]__";
const Category = itemCategory.split('si=').filter(Boolean); // 商品カテゴリ

  const skus = [];

  for (let i = 0; i < name.length; i++) {
    skus.push({
      t: name[i],        
      q: Count[i] || 1, 
      sku: Sku[i] || '',
      p: Price[i] || 0,
      c: Category[i] || ''
    });
  }
// q: Countの合計（数値化）
const totalQuantity = Count.reduce((sum, val) => sum + (parseInt(val, 10) || 1), 0);

// p: Priceの合計（数値化）
const totalPrice = Price.reduce((sum, val, i) => {
  const unitPrice = parseFloat(val) || 0;
  const quantity = parseInt(Count[i], 10) || 1;
  return sum + (unitPrice * quantity);
}, 0);

  fdtag('track', 'conversion', {
tid: ★★★,
q: totalQuantity,
p: totalPrice,
oid:orderId,
skus: skus
  });

console.log(skus);　// コンソールでの成否確認用

</script>

</trackingtag_global>

4. カートタグの設置

カート内商品情報を取得してターゲティング条件に活用できるように、カートタグをカートページに設置します。

1. ショップサーブ管理画面の「集客・運用 ＞ PPC・アフィリエイト広告 ＞ リマーケティングタグ設定」の”カートページ”のタブを開きます。
   
2. bodyタグの入力フォームに下記コードを貼り付けます。カートページに基本タグを設置している場合は”<trackingtag_global>”内に一緒に格納します。

   <trackingtag_global>
   
   <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>
   // 基本タグを一緒に格納
   
   <script id="fd_cart"> //カートタグ記述
   window.fdData = window.fdData || [];
     function fdtag(){window.fdData.push(arguments);}
   
   const itemName = "__CST_ITMS si=[ITM_NAME_GA4]__";
   function safeDecodeURIComponent(str) {
       return str.replace(/(%[0-9A-F]{2})+/gi, function(encoded) {
           try {
               return decodeURIComponent(encoded); 
           } catch (e) {
               console.error("デコードに失敗しました:", encoded, e);
               return encoded; 
           }
       });
   }
   
   const decodedItemName = safeDecodeURIComponent(itemName);
   const name = decodedItemName.split('si=').filter(Boolean); // 商品名
   
   const itemCount = "__CST_ITMS si=[ITM_CNT]__";
   const Count = itemCount.split('si=').filter(Boolean); // 個数
   
   const itemSku = "__CST_ITMS si=[ITM_NO_GA4]__";
   const Sku = itemSku.split('si=').filter(Boolean); // 商品ID
   
   const itemPrice = "__CST_ITMS si=[ITM_PRC]__";
   const Price = itemPrice.split('si=').filter(Boolean); // 商品価格
   
   const itemCategory = "__CST_ITMS si=[ITM_CAT_GA4]__";
   const Category = itemCategory.split('si=').filter(Boolean); // 商品カテゴリ
   
     const skus = [];
     for (let i = 0; i < name.length; i++) {
       skus.push({
         t: name[i],        
         q: Count[i] || 1,  
         sku: Sku[i] || '', 
         p: Price[i] || 0, 
         c: Category[i] || ''
       });
     }
     fdtag('track', 'cart', {
       'skus': skus
     });
   
   console.log(skus);　// コンソールでの成否確認用
   
   </script>
   
   </trackingtag_global>

   ＊設置イメージ例
   

3. 保存して作業完了です。
   実際のカートページで検証ツールを開き、コンソールに商品情報が出力されていれば成功です。
   

5. 設定内容の反映

ショップサーブ管理画面「お店ページの更新へ」より、「利用中のテーマでお店ページを更新する」をクリックして、各種タグの設定内容を反映します。

タグ設置後の確認方法は、各種タグの動作確認のマニュアルをご確認ください。