---
title: futureshop（コマースクリエイター）への導入手順
description: futureshopのコマースクリエイターを使用しているECサイトにFlipdeskのタグを設置する手順を説明します。
---

[コンテンツまでスキップ](https://support.materialdigital.jp/manual/install-futureshop-commercecreator#main-content)

日本語

翻訳のサブメニューを表示

[お問い合わせ](https://support.materialdigital.jp/manual/kb-tickets/new?hsLang=ja)

![typeA-1.png\]](https://support.materialdigital.jp/hs-fs/hubfs/typeA-1.png?height=40&name=typeA-1.png)

メインナビゲーションを開く

メインナビゲーションを閉じる

- 日本語
  
  翻訳のサブメニューを表示
- [お問い合わせ](https://support.materialdigital.jp/manual/kb-tickets/new)
- [サービスサイトへ](https://materialdigital.jp/)

[サービスサイトへ](https://materialdigital.jp/)

 お困りのことは何でしょうか？

- 検索フィールドが空なので、候補はありません。

1. [Flipdeskサポートセンター](https://support.materialdigital.jp/manual?hsLang=ja)
2. [Flipdeskスタートガイド](https://support.materialdigital.jp/manual/flipdesk%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%AC%E3%82%A4%E3%83%89?hsLang=ja)
3. [初期設定（タグ設置）](https://support.materialdigital.jp/manual/flipdesk%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%AC%E3%82%A4%E3%83%89?hsLang=ja#%E5%88%9D%E6%9C%9F%E8%A8%AD%E5%AE%9A%E3%82%BF%E3%82%B0%E8%A8%AD%E7%BD%AE)

# futureshop（コマースクリエイター）への導入手順

## futureshopのコマースクリエイターを使用しているECサイトにFlipdeskのタグを設置する手順を説明します。

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

1. [タグの設置箇所](https://support.materialdigital.jp/manual/install-futureshop-commercecreator#tag)
2. [基本タグの設置](https://support.materialdigital.jp/manual/install-futureshop-commercecreator#common-tag)  
   ※会員情報連携のタグ設置もこちらを参照ください。
3. [コンバージョンタグの設置](https://support.materialdigital.jp/manual/install-futureshop-commercecreator#conversion-tag)
4. [カートタグの設置](https://support.materialdigital.jp/manual/install-futureshop-commercecreator#cart-tag)

### 1. タグの設置箇所

1. コマースクリエイターの管理画面にログインします。
2. ログイン後、「設定画面 ＞ プロモーション管理 ＞ 測定タグ一覧」を開きます。  
   ![プロモーション管理メニューの計測タグ一覧](https://support.materialdigital.jp/hs-fs/hubfs/image-png-Jul-30-2024-08-01-34-2600-AM.png?width=580&height=529&name=image-png-Jul-30-2024-08-01-34-2600-AM.png)
3. 画面下部にある「＋測定タグを追加する」をクリックします。  
   ![計測タグを追加する](https://support.materialdigital.jp/hs-fs/hubfs/image-png-Jul-30-2024-08-04-20-3150-AM.png?width=670&height=354&name=image-png-Jul-30-2024-08-04-20-3150-AM.png)
4. 開いた「計測タグ設定」画面でタグを設置していきます。

### **2. 基本タグの設置**

1. 「利用設定」と「名称設定」項目をそれぞれ設定していきます。  
   ![利用設定と名称設定](https://support.materialdigital.jp/hs-fs/hubfs/image-png-Jul-30-2024-08-21-42-2925-AM.png?width=670&height=197&name=image-png-Jul-30-2024-08-21-42-2925-AM.png)
   
   | **項目名** | **説明** |
   | --- | --- |
   | 利用設定 | 「利用する」にチェックを入れる |
   | 名称設定 | 設定名に「Flipdesk」など、分かりやすい任意の名称を記入 |
2. 画面を下にスクロールして、「共通出力」項目で基本タグの設置ルールを設定します。  
   ![共通出力](https://support.materialdigital.jp/hs-fs/hubfs/image-png-Jul-30-2024-08-15-56-4465-AM.png?width=670&height=272&name=image-png-Jul-30-2024-08-15-56-4465-AM.png)
   
   | **項目名** | **説明** |
   | --- | --- |
   | 出力設定 | 「\<body\>タグ内（\</body\>タグ前）に出力する」を選択します。 ※出力設定の1番下を選択 |
   | 出力内容 | 出力内容部分に、Flipdeskの基本タグを入れます。 貴社専用の基本タグが管理画面にありますので、コピーの上貼り付けてください。 基本タグについては、[基本タグの仕様](https://support.materialdigital.jp/manual/fd_common_tag?hsLang=ja)のマニュアルをご確認ください。 ※キャプチャ内の`api_token=★★★★★`の「★」部分は貴社専用のトークンが入ります。 |
3. 次に、コンバージョンタグを設置していきます。  
   「[3. コンバージョンタグの設置](https://support.materialdigital.jp/manual/install-futureshop-commercecreator#conversion-tag)」をご確認ください。  
   基本タグのみの設置で問題ないお客様は画面右下にある「保存する」ボタンをクリックしてください。

**会員情報連携（ファイル連携）を使用する場合**

 会員情報連携用の属性が付与された基本タグを設置してください。

- 基本タグ設置がまだの場合 
    - 基本タグを入力する「出力内容」に**data-sync-user-id属性**を含んだ基本タグを入力してください。  
      ※data-sync-user-id属性を含んだ基本タグのマニュアルは[こちら](https://support.materialdigital.jp/manual/customer_profile_file_v2?hsLang=ja#section2)
- 基本タグ設置が済んでいる場合 
    - 基本タグの末尾にdata-sync-user-id属性を入力してください。

**▼ data-sync-user-id属性**

```
data-sync-user-id='{@ member.id @}'
```

**▼ data-sync-user-id属性が含まれたFlipdesk基本タグの例**

```
<script language="javascript" charset="UTF-8" type="text/javascript" src="https://api.flipdesk.jp/chat_clients/flipdesk_chat.js?api_token=★★★★★&enc=UNICODE" data-sync-user-id='{@ member.id @}' defer></script>
```

※`api_token=★★★★★`の「★」部分は貴社専用のトークンが入ります。

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

画面を下にスクロールしていき、「注文完了ページ」項目で設定していきます。

1. 基本タグの設置手順同様に「出力設定」と「出力内容」を設定します。  
   ![注文完了ページ](https://support.materialdigital.jp/hs-fs/hubfs/image-png-Jul-30-2024-08-43-23-1606-AM.png?width=670&height=321&name=image-png-Jul-30-2024-08-43-23-1606-AM.png)
   
   | **項目名** | **説明** |
   | --- | --- |
   | 出力設定 | 「\<body\>タグ内（\</body\>タグ前）に出力する」を選択します。 ※出力設定の1番下を選択 |
   | 出力内容 | 下記のコンバージョンタグをコピーし貼り付けてください。 **`tid: ☆☆☆☆;`の「☆」の部分はコンバージョンタグごとにIDが異なります。 管理画面よりタグIDをコピーし、必ず置き換えてください。** ``` <script id="fd_conversion">  window.fdData = window.fdData \|\| [];  function fdtag(){window.fdData.push(arguments);}  fdtag('track', 'conversion', {    // コンバージョンタグID(※変更しないでください)    tid: ☆☆☆☆,    // 合計購買点数(※必須)    q: '{% analytics.total_quantity %}',    // 合計購買金額(※任意)    p: '{% analytics.purchase_price_including_tax %}',    // 受注番号など、コンバージョンを識別する文字列(※任意)    oid: '{% analytics.order_no %}',    // 購買した商品の内訳(※任意)    skus: [      {% analytics.item_info %}    ]  });</script> ``` コンバージョンタグについては、[コンバージョンタグの仕様](https://support.materialdigital.jp/manual/conversion_tag?hsLang=ja)のマニュアルをご確認ください。 |
2. 次に「商品情報置換文字の設定」を設定していきます。  
   ![商品情報置換文字の設定](https://support.materialdigital.jp/hs-fs/hubfs/image-png-Jul-31-2024-12-58-59-9708-AM.png?width=670&height=156&name=image-png-Jul-31-2024-12-58-59-9708-AM.png)
   
   | **項目名** | **説明** |
   | --- | --- |
   | 出力内容 | 以下をコピーして入力エリアに貼り付けてください。 > {q: {% analytics.quantity %}, sku: "{% analytics.product\_no %}", t: "{% analytics.product\_name %}", p: {% analytics.product.price\_excluding\_tax %} } |
   | 区切り文字 | ,　（カンマを入れてください） |

**会員登録をCVとして計測する場合**

「会員登録完了」項目で設定していきます。

```
<script id="fd_conversion">  window.fdData = window.fdData || [];  function fdtag(){window.fdData.push(arguments);}  fdtag('track', 'conversion', {  // コンバージョンタグID(※変更しないでください)  tid: ☆☆☆☆,  // 合計購買点数(※必須)  q: 1,  });</script>
```

置き換え文字はないため、「\</body\>タグの前に出力する」を選択し、  
上記タグを出力内容に貼り付けて完了です。  
※タグIDは必ず会員登録専用のタグIDに変更してください。

### **4. カート情報取得タグ**

カート内情報取得タグを使用する場合は、基本タグ・コンバージョンタグ同様の画面をさらに  
下にスクロールしていき、「ショッピングカートページ」項目で設定していきます。

1. ショッピングカートページ項目の「出力設定」と「出力内容」を設定します。  
   ![ショッピングカートページ](https://support.materialdigital.jp/hs-fs/hubfs/image-png-Jul-31-2024-01-06-22-4037-AM.png?width=670&height=279&name=image-png-Jul-31-2024-01-06-22-4037-AM.png)
   
   | **項目名** | **説明** |
   | --- | --- |
   | 出力設定 | 「\<body\>タグ内（\</body\>タグ前）に出力する」を選択します。 ※出力設定の1番下を選択 |
   | 出力内容 | 下記のカート情報取得タグをコピーし貼り付けてください。 ``` <script id="fd_cart">  window.fdData = window.fdData \|\| [];  function fdtag(){window.fdData.push(arguments);}  fdtag('track', 'cart', {    skus: [      {% analytics.item_info %}    ]  });</script> ``` |
2. 次に「商品情報置換文字の設定」を設定していきます。  
   ![ショッピングカートページの商品情報置換文字の設定](https://support.materialdigital.jp/hs-fs/hubfs/image-png-Jul-31-2024-01-09-34-3897-AM.png?width=670&height=153&name=image-png-Jul-31-2024-01-09-34-3897-AM.png)
   
   | **項目名** | **説明** |
   | --- | --- |
   | 出力内容 | 以下をコピーして入力エリアに貼り付けてください。 > {q: {% analytics.quantity %}, sku: "{% analytics.product\_no %}", t: "{% analytics.product\_name %}", p: {% analytics.product.price\_excluding\_tax %} } |
   | 区切り文字 | ,　（カンマを入れてください） |

**タグ内で使用する変数について**

- 本マニュアルにてタグ設置後、正常に発火しない場合はタグで使用している  
  カートシステム専用の変数が影響している可能性があります。
- 最新の変数は弊社側ではお調べすることができかねますため、カートシステムのお問合せ窓口へご連絡をお願いいたします。

 

- [Flipdeskスタートガイド](https://support.materialdigital.jp/manual/flipdesk%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%AC%E3%82%A4%E3%83%89?hsLang=ja#main-content)

    - [初めての方はこちら](https://support.materialdigital.jp/manual/flipdesk%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%AC%E3%82%A4%E3%83%89?hsLang=ja#%E5%88%9D%E3%82%81%E3%81%A6%E3%81%AE%E6%96%B9%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89)
    - [初期設定（タグ設置）](https://support.materialdigital.jp/manual/flipdesk%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%AC%E3%82%A4%E3%83%89?hsLang=ja#%E5%88%9D%E6%9C%9F%E8%A8%AD%E5%AE%9A%E3%82%BF%E3%82%B0%E8%A8%AD%E7%BD%AE)
- [Flipdeskマニュアル](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#main-content)

    - [シナリオ](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E3%82%B7%E3%83%8A%E3%83%AA%E3%82%AA)
    - [配信ターゲットの設定](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E9%85%8D%E4%BF%A1%E3%82%BF%E3%83%BC%E3%82%B2%E3%83%83%E3%83%88%E3%81%AE%E8%A8%AD%E5%AE%9A)
    - [各種タグの仕様](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E5%90%84%E7%A8%AE%E3%82%BF%E3%82%B0%E3%81%AE%E4%BB%95%E6%A7%98)
    - [レポート管理](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E3%83%AC%E3%83%9D%E3%83%BC%E3%83%88%E7%AE%A1%E7%90%86)
    - [各種設定](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E5%90%84%E7%A8%AE%E8%A8%AD%E5%AE%9A)
    - [アラート機能](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E3%82%A2%E3%83%A9%E3%83%BC%E3%83%88%E6%A9%9F%E8%83%BD)
    - [AI機能](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#ai%E6%A9%9F%E8%83%BD)
- [Flipdeskオプション](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#main-content)

    - [有人チャット](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#%E6%9C%89%E4%BA%BA%E3%83%81%E3%83%A3%E3%83%83%E3%83%88)
    - [WEBプッシュ](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#web%E3%83%97%E3%83%83%E3%82%B7%E3%83%A5)
    - [会員情報連携](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#%E4%BC%9A%E5%93%A1%E6%83%85%E5%A0%B1%E9%80%A3%E6%90%BA)
    - [ヒートマップ](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#%E3%83%92%E3%83%BC%E3%83%88%E3%83%9E%E3%83%83%E3%83%97)
- [Cross Talk](https://support.materialdigital.jp/manual/cross-talk?hsLang=ja#main-content)

    - [スタートガイド](https://support.materialdigital.jp/manual/cross-talk?hsLang=ja#%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%AC%E3%82%A4%E3%83%89)
- [技術的なマニュアル](https://support.materialdigital.jp/manual/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja)
- [よくある質問](https://support.materialdigital.jp/manual/%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F?hsLang=ja#main-content)

    - [技術的な情報](https://support.materialdigital.jp/manual/%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F?hsLang=ja#%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E6%83%85%E5%A0%B1)
    - [契約・請求関連](https://support.materialdigital.jp/manual/%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F?hsLang=ja#%E5%A5%91%E7%B4%84-%E8%AB%8B%E6%B1%82%E9%96%A2%E9%80%A3)

[![Chill listening crop-3](https://support.materialdigital.jp/hs-fs/hubfs/typeA-1.png?width=99&height=31&name=typeA-1.png "Chill listening crop-3")](https://materialdigital.jp/)

Copyright © Flipdesk Inc.

Copyright © 2026, 株式会社マテリアルデジタル