w2Commerceへの導入手順

w2Commerceを使用しているECサイトにFlipdeskのタグを設置する手順を説明します。

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

1. 基本タグの設置

1. 「CMS ＞ タグマネージャー」を表示し、「新規登録」を選択します。
   
2. 各項目をそれぞれ設定します。
   
   
   

   項目名	説明
   タグ名	「Flipdesk基本タグ」など、分かりやすい任意の名称を記入
   表示区分	「PC/SP」を選択
   設置個所/出力箇所	「全ページ出力」にチェックを入れ、「body下部」を選択
   表示順	「2」を選択
   有効フラグ	「有効」にチェックを入れる

3. 続いてタグ設定を行います。

   項目名	説明
   タグ設定	Flipdeskの管理画面「タグ管理 ＞ 基本タグ」から貴社専用の基本タグをコピーしてタグ設定の入力フォームに貼り付ける ※キャプチャ内のapi_token=★★★★★の「★」部分は貴社専用のトークンが入ります。
   商品タグ内容	「商品タグを利用しない」を選択
   広告媒体区分(アクセス時) 表示条件	「条件指定なし」を選択
   広告コード(アクセス時) 表示条件	「条件指定なし」を選択
   商品ID(カート内または注文内) 表示条件	「条件指定なし」を選択

4. 「登録する」をクリックして、基本タグの設置は完了です。

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

1. 「CMS ＞ タグマネージャー」を表示し、新規登録を選択します。
2. 各項目を以下のように設定します。
   
   
   

   項目名	説明
   タグ名	「FlipdeskCVタグ」など、分かりやすい任意の名称を記入
   表示区分	「PC/SP」を選択
   設置個所/出力箇所	「注文完了」にチェックを入れ、「body下部」を選択
   表示順	「1」を選択
   有効フラグ	「有効」にチェックを入れる

    

3. 続いてタグ設定を行います。
   

4. タグ設定の入力フォームに以下のコードを貼り付けます。
   下記のコンバージョンタグをコピーし貼り付けてください。
   tid: ★★★;の「★」の部分はコンバージョンタグごとにIDが異なります。
   管理画面よりタグIDをコピーし、必ず置き換えてください。

<script id="fd_conversion">
    window.fdData = window.fdData || [];
    function fdtag(){window.fdData.push(arguments);}
    
    const fd_cv_datas = [
        @@ORDER_LOOP_START@@
        {
            q: @@ORDER_ITEM_QUANTITY@@,
            p: @@ORDER_PRICE_SUB_TOTAL@@,
            oid: @@ORDER_ID@@,
            skus: [@@PRODUCT@@],
        },
        @@ORDER_LOOP_END@@
    ]

    let formatted_cv_data = {
        tid: ★★★,
        q: 0,
        p: 0,
        oid: '',
        skus: []
    }

    for(const value of fd_cv_datas){
        formatted_cv_data.p += value.p
        formatted_cv_data.q += value.q
        formatted_cv_data.oid = String(value.oid)
        for(const sku of value.skus){
            formatted_cv_data.skus.push(sku)
        }
    }

    fdtag('track', 'conversion', formatted_cv_data)
</script>

5. 続いて商品タグの登録を行います。
　「商品タグの登録 ＞ 商品タグ設定の追加」に以下のように登録します。

{
    q: @@QUANTITY@@,
    sku: '@@PRODUCT_ID@@',
    t: '@@PRODUCT_NAME@@',
    p: @@PRODUCT_PRICE@@,
    c: '@@VARIATION_ID@@'
}

6. 入力完了後、「追加」を行ってください。

7. 商品タグの登録が完了したら、「商品タグ内容」を設定します。

8. 「登録する」をクリックして、CVタグの設置は完了です。

3. カート情報取得タグの設置

1. 「CMS ＞ タグマネージャー」を表示し、「新規登録」を選択します。
2. 各項目を以下のように設定します。
   
   
   

   項目名	説明
   タグ名	「Flipdeskカートタグ」など、分かりやすい任意の名称を記入
   表示区分	「PC/SP」を選択
   設置個所/出力箇所	「カートリスト」にチェックを入れ、「body下部」を選択
   表示順	「1」を選択
   有効フラグ	「有効」にチェックを入れる

    

3. 続いてタグ設定をします。タグ設定の入力フォームに以下のコードを貼り付けます。

<script id="fd_cart">
    window.fdData = window.fdData || [];
    function fdtag(){window.fdData.push(arguments);}
    
    fdtag('track', 'cart', {
        'skus': [
            @@CART_LOOP_START@@
            @@PRODUCT@@,
            @@CART_LOOP_END@@
        ]
    });
</script>

4. 続いて商品タグの登録をします。
　「商品タグの登録 ＞ 商品タグ設定の追加」に以下のように登録します。

{
    q: @@QUANTITY@@,
    sku: '@@PRODUCT_ID@@',
    t: '@@PRODUCT_NAME@@',
    p: @@PRODUCT_PRICE@@,
    c: '@@VARIATION_ID@@'
}

5. 入力完了後、「追加」をクリックします。

6. 商品タグの登録が完了したら、商品タグ内容を設定します。

7. 「登録する」をクリックして、カート情報取得タグの設置は完了です。

4. 各タグの動作確認方法

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