えびすマートへの導入手順

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

えびすマート　Flipdeskタグ埋め込み方法

1. 基本タグの設置

1. データ解析　＞タグマネージャー　＞タグルール新規登録／一覧を選択　＞新規登録を選択
   ▼基本タグの設置ルールを設定します▼
   
   

   項目名	説明
   タグルール名	任意の名前を記入（Flipdesk基本タグ等分かりやすいもの）
   出力ページ	全画面を選択
   表示区分	表示を選択（サイト本番環境への反映）
   開始日	任意で設定日などを選択してください

   
   
   

2. データ解析　＞タグマネージャー　＞タグ新規登録／一覧を選択

   ▼基本タグの設置を設定します▼

   

   項目名	説明
   タグコード	本システムでタグを管理するためのタグコードを設定します。 タグコードは半角の英数字・ハイフン・アンダーバーのみ入力可能です。 （例）flipdesk_kihon 、flipdesk_common など
   タグ名	タグコードに紐付くタグ名を入力します。 店舗様で分かりやすい名称にしていただくことを推奨しております。 （例）Flipdesk基本タグなど
   タグタイプ	HTMLカスタムを選択
   タグHTML	Flipdesk管理画面内の基本タグをコピーして貼り付けてください。
   タグ出力個所	下部を選択
   タグ表示ルール	Flipdesk基本タグを選択
   タグ非表示ルール	選択なしで大丈夫です

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

1. データ解析　＞タグルール新規登録／一覧を選択　＞新規登録を選択
   ▼CV計測タグの設置ルールを設定します▼
   
   
   

   項目名	説明
   タグルール名	任意の名前を記入（FlipdeskCV計測タグ等分かりやすいもの）
   出力ページ	全画面を選択
   表示区分	表示を選択（サイト本番環境への反映）
   開始日	任意で設定日などを選択してください

   
   
   
2. データ解析　＞タグマネージャー　＞タグ新規登録／一覧を選択
   ▼コンバージョンタグの設置を設定します▼
   
   
   

   項目名	説明
   タグコード	本システムでタグを管理するためのタグコードを設定します。 タグコードは半角の英数字・ハイフン・アンダーバーのみ入力可能です。 （例）flipdesk_cv など
   タグ名	タグコードに紐付くタグ名を入力します。 店舗様で分かりやすい名称にしていただくことを推奨しております。 （例）FlipdeskCV計測タグなど
   タグタイプ	HTMLカスタムを選択
   タグHTML	下方に記載しているものをコピーし貼り付けてください。 （※各クライアント様毎にご用意させて頂いておりますCVタグID部分はFlipdeskの管理画面からご確認ください）
   タグ出力個所	下部を選択
   タグ表示ルール	FlipdeskCV計測タグを選択
   タグ非表示ルール	選択なしで大丈夫です

   
   タグHTML部分の記載について
   ★部分のタグIDは、各クライアント様/各タグ内容により異なります。
   Flipdeskの管理画面内に記載されておりますものとなるので、Flipdeskの管理画面にログインしていただき、タグ管理　→コンバージョンタグより、ご確認くださいませ。

   <script id="fd_conversion">
     window.fdData = window.fdData || [];
     function fdtag() {window.fdData.push(arguments);}
   
     const p = document.HIDDEN_DATA_FORM.GOKEI.value;
     const oid = document.HIDDEN_DATA_FORM.ORDER_DISP_NO.value;
    
     let q = 0;
   
     let elementList = document.getElementsByName("HIDDEN_DATA_FORM")[0]
       .childNodes;
     const elements = [].slice.call(elementList);
     const data = elements.map((e) => {
       return {
         tag: e.name,
         value: e.value
       }
     })
   
   const skusList = [];
   
   for (let i = 0; i < data.length; i++) {
   
     if (data[i].tag === 'ITEM_CD') {
       const skus = {
         q: '',
         sku: '',
         t: '',
         p: '',
         c: ''
       }
   
       for (let j = i; j < data.length; j++) {
         const { tag, value } = data[j];
         if(tag === "ITEM_CD_ONLY"){
           skus.sku = value
         }
         if( tag === 'ITEM_AMOUNT'){
           const quantity = parseInt(value)
           skus.q = quantity
           q += quantity
         }
         if (tag === "ITEM_NAME"){
           skus.t = value
         } 
         if (tag === "ITEM_TEIKA"){
           skus.p = parseInt(value)
         }
         if (tag === 'ITEM_CATEGORY') {
           skus.c = value
           break;
         }
       }
       skusList.push(skus);
     }
   }
   
     fdtag("track", "conversion", {
       tid: ★★★,
       q,
       p,
       oid,
       skus: skusList
     });
   </script>

    

3. カートタグの設置

1. データ解析　＞タグルール新規登録／一覧を選択　＞新規登録を選択
   ▼カートタグの設置ルールを設定します▼
   
   

   項目名	説明
   タグルール名	Flipdeskカートタグなどにしてください
   出力ページ	全画面を選択
   表示区分	表示を選択（サイト本番環境への反映）
   開始日	任意で設定日などを選択してください

2. データ解析　＞タグマネージャー　＞タグ新規登録／一覧を選択
   ▼カートタグの設置を設定します▼
   
   

   項目名	説明
   タグコード	本システムでタグを管理するためのタグコードを設定します。 タグコードは半角の英数字・ハイフン・アンダーバーのみ入力可能です。 （例）flipdesk_cart など
   タグ名	タグコードに紐付くタグ名を入力します。 店舗様で分かりやすい名称にしていただくことを推奨しております。 （例）Flipdeskカートタグなど
   タグタイプ	HTMLカスタムを選択
   タグHTML	下方に記載しているものをコピーし貼り付けてください。
   タグ出力個所	下部を選択
   タグ表示ルール	FlipdeskCカートタグを選択
   タグ非表示ルール	選択なしで大丈夫です

   
   
   タグHTML部分の記載について

   <!-- body内に埋める -->
   <script id="fd_cart">
     window.fdData = window.fdData || [];
     function fdtag() {window.fdData.push(arguments);}
   
   // domに出力されたカート商品
    const cartItems = document.getElementById("flipdeskCartTagRefItem");
   
   //  ['\n    q\n    sku\n    t\n    p\n']
    const innerTexts = Array.from(cartItems.children).map(item => item.innerText)
   
   // ['q,sku,t,p']
   const formatTexts = innerTexts.map((text) => text.trim().replace(/ /g, '').split('\n'))
   
   //skusの形式にフォーマット
    const skus = formatTexts.map((formatText) => {
     return {
       q: parseInt(formatText[0].replace(/,/g, ''), 10),
       sku: formatText[1],
       t: formatText[2],
       p: parseInt(formatText[3].replace(/,|[^0-9]$/g, ''),10),
       c: ''
   }
   })
   
      fdtag('track', 'cart', {
       'skus': skus
      });
   </script>

3. コンテンツ管理→テンプレート管理より、共通ヘッダーにあたるheader_cart.xhtmlというファイルを用意
   カート情報を出力する記述を追記します。
   
   

   <!-- outputItem -->
   <div id="flipdeskCartTagRefItem" style="display:none;">
     <span m:id='common.LOOP_CART_ITEM'>
       <span m:id='common.CART_ITEM_AMOUNT_HERE'></span>
       <span m:id='common.CART_ITEM_CODE_HERE'></span>
       <span m:id='common.CART_ITEM_NAME_HERE'></span>
       <span m:id='common.CART_ITEM_SYOKEI_ZEIKOMI_HERE'></span>
     </span>
   </div>
   <!-- / outputItem -->

4. 会員情報連携連携(ファイル連携)手順

1. 手順１の方法で行う「タグHTML」に入力する基本タグを以下にします。
   ★★★部分には、基本タグ内のapiトークンを記述します。
   

   <script language="javascript" charset="UTF-8" type="text/javascript">
   　　//改行文字が必ず入るのでtirmする
     var userId = document.getElementById('flipdeskDataSyncUserId').innerHTML.trim();
     var script = document.createElement('script');
     script.type = 'text/javascript';
     script.language = 'javascript';
     script.src =
     'https://api.flipdesk.jp/chat_clients/flipdesk_chat.js?api_token=★★★';
     script.setAttribute('data-sync-user-id', userId);
     script.defer = true;
     document.body.appendChild(script);
   </script>

   ※基本タグの出力個所は必ず「下部」にしてください

2. コンテンツ管理→テンプレート管理より、共通ヘッダーにあたるheader.xhtmlというファイルを用意
   userIDを出力する記述を追記します。
   

   <!-- userId -->
   <div id="flipdeskDataSyncUserId" style="display:none;">
   <span m:id='common.MEMBER_ID_HERE'></span>
   </div>
   <!-- / userId -->

3. カートページ配下の共通ヘッダーにあたるheader_cart.xhtmlというファイルを用意
   userIDを出力する記述を追記します。
   

   <!-- userId -->
   <div id="flipdeskDataSyncUserId" style="display:none;">
   <span m:id='common.MEMBER_ID_HERE'></span>
   </div>
   <!-- / userId -->

4. 商品詳細ページのテンプレートにあたるitem_detail.xhtmlというファイルを用意
   中に共通ヘッダーを読み込む記述します。

   <iframe m:id='common.IMPORT_HERE' src="common/header.xhtml" frameborder="0" scrolling="no" width="100%"></iframe>