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

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

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

1. 事前準備

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

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

2. 基本タグの設置

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

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

3. コンバージョンタグの設置（PCサイト用）

ショップサーブでコンバージョンタグを設置する際は、デバイス毎に設定を行う必要がありますのでご注意ください。

1. ショップサーブ管理画面の「集客・運用 ＞ コンバージョンタグ設定」を開く
2. 「Adwords、Yahoo!プロモーション広告（スポンサードサーチVer.3）の設定」内に、Flipdeskのコンバージョンタグを記載する
   • コンバージョンタグの設定方法は下記の2パターンがあり、いずれかの手順でコンバージョンタグを設置していきます。
     ①「売上額」と「注文ID」のみ取得
     ②「売上額」「売上点数」「内訳」「注文ID」のすべてを取得

コンバージョンタグの設置手順（PCサイト用）

①「売上額」と「注文ID」のみ取得

1. 下記のコンバージョンタグをコピーする

   <!-- Flipdesk start -->
   <script id="fd_conversion">
       window.fdData = window.fdData || [];
       function fdtag() {
           window.fdData.push(arguments);
       }
   
       var totalCnt = 0;
       var orderId = "__ORD_NUM__";
       var totalPrice = "__ITM_TOTAL__";
       fdtag("track", "conversion", {
       tid: ☆☆☆☆,
       q: totalCnt,
       p: totalPrice,
       oid: orderId,
     });
   </script>
   <!-- Flipdesk end -->

   ※tid: ☆☆☆☆;の「☆」の部分はコンバージョンタグごとにIDが異なります。
   管理画面よりタグIDをコピーし、必ず置き換えてください。
2. ショップサーブ管理画面の「集客・運用 ＞ コンバージョンタグ設定」より、「Google広告、Yahoo!プロモーション広告（スポンサードサーチ Ver.3）の設定」内に、[1] でコピーしたコンバージョンタグを貼り付ける
   
3. 「設定を保存する」をクリックし、スマートフォンサイト用へ進む

②「売上額」「売上点数」「内訳」「注文ID」のすべてを取得

1. 下記のコンバージョンタグをコピーする

   <!-- Flipdesk start -->
   <script id="fd_conversion">
       window.fdData = window.fdData || [];
       function fdtag() {
           window.fdData.push(arguments);
       }
       
       var itemStr = "__ITMS__";
       var totalCnt = 0;
       var orderId = "__ORD_NUM__";
       var totalPrice = "__ITM_TOTAL__";
       
       var items = itemStr.split(":");
       var skus = items.map(function (item) {
           var splitItem = item.split("/");
           
           var quantity = parseInt(splitItem[1]);
           var sku = splitItem[0];
           var title = "item" + "_" + sku;
           var price = parseInt(splitItem[2]);
           var category = "";
           totalCnt += quantity;
           
           return {
               q: quantity,
               sku: sku,
               t: title,
               p: price,
               c: category
           };
       });
       
       fdtag("track", "conversion", {
           tid: ☆☆☆☆,
           q: totalCnt,
           p: totalPrice,
           oid: orderId,
           skus: skus
       });
   </script>
   <!-- Flipdesk end -->

   ※tid: ☆☆☆☆;の「☆」の部分はコンバージョンタグごとにIDが異なります。
   管理画面よりタグIDをコピーし、必ず置き換えてください。
   
   

2. ショップサーブ管理画面の「集客・運用 ＞ コンバージョンタグ設定」より、「Google広告、Yahoo!プロモーション広告（スポンサードサーチ Ver.3）の設定」内に、[1] でコピーしたコンバージョンタグを貼り付ける

   

3. 「設定を保存する」をクリックし、スマートフォンサイト用へ進む

4. コンバージョンタグの設置（スマートフォンサイト用）

ショップサーブ管理画面の「スマートフォンサイト設定 ＞ 各種設定 ＞ コンバージョンタグ設定」内に、①「売上額」と「注文ID」のみ取得または②「売上額」「売上点数」「内訳」「注文ID」のすべてを取得にて用意したどちらかのFlipdeskのコンバージョンタグを記載します。

1. PCサイト用に設定したコンバージョンタグをコピーする
2. ショップサーブ管理画面の「スマートフォンサイト設定 ＞ 各種設定＞コンバージョンタグ設定」内に、[1] でコピーしたコンバージョンタグを貼り付ける
   
3. 「設定を保存する」をクリックする

5. カートタグの設置

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

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

6. 設定内容の反映

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

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