EC-CUBEへの導入手順

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

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

基本タグの設置
コンバージョンタグの設置

※ご利用のEC-CUBEのバージョンにより、ページ名に若干の違いがございます。

1. 基本タグの設置

EC-CUBE管理画面

Googleタグマネージャーを使用して設置する

EC-CUBE管理画面にログイン後、「コンテンツ管理＞ブロック管理」を開きます。
「新規作成」をクリックします。
ブロック設定画面で、以下2つのブロックを作成します。
- Google Tag Manager (head内)
- Google Tag Manager (body内)
ブロック名やファイル名は管理しやすい名前を設定します。
Googleタグマネージャーから取得したコードをコピーし、各ブロックに設定します。
ブロックが作成できたら、「コンテンツ管理＞レイアウト管理」を開きます。
「トップページ用レイアウト」と「下層ページ用レイアウト」それぞれの設定画面内に、
作成したブロックを配置します。

項目名 説明

<head></head>内「Google Tag Manager (head) 」を設置

<body>タグ直後「Google Tag Manager (body) 」を設置
設定後、画面右下の「登録」画面をクリックして保存します。
登録完了後、Googleタグマネージャーから基本タグを設置します。
タグの設置手順はGoogleタグマネージャーを使用したタグ設置手順のマニュアルをご確認ください。

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

コンバージョンタグはEC-CUBE管理画面の「コンテンツ管理＞ブロック管理」から設定していきます。

「新規作成」をクリックします。

ブロック設定画面で以下を設定します。

項目名	説明
ブロック名	「FlipdeskCV計測タグ」など、分かりやすい任意の名称を記入
ファイル名	任意のファイル名を付ける
コード	ご利用中のバージョンに沿って、当てはまるコンバージョンタグをコピーし貼り付けてください。 `tid: ☆☆☆☆;`の「☆」の部分はコンバージョンタグごとにIDが異なります。管理画面よりタグIDをコピーし、必ず置き換えてください。コンバージョンタグについては、コンバージョンタグの仕様のマニュアルをご確認ください。

▼ EC-CUBE 2系

<script id="fd_conversion">
  window.fdData = window.fdData || [];
  function fdtag(){window.fdData.push(arguments);}
  fdtag('track', 'conversion', {
    // コンバージョンタグID(※変更しないでください)
    tid: ☆☆☆☆,
    // 合計購買点数(※必須)
    q: '{{ OrderItem.quantity }}',
    // 合計購買金額(※任意)
    p: '{{ OrderItem.price }}',
    // 受注番号など、コンバージョンを識別する文字列(※任意)
    oid: '{{ Order.id }}', 
    // 購買した商品の内訳(※任意)
    skus: [
      {
        // 購買点数(※必須)
        q: '{{ OrderItem.quantity }}',
        // 商品番号など、商品を識別する文字列(※任意)
        sku: '{{ OrderItem.product.id }}',
        // 商品名(※任意)
        t: '{{ OrderItem.product_name }}',
        // 商品の単価(※任意)
        p: '{{ OrderItem.price }}',
        // 商品カテゴリ(※任意)
        c: '{{ OrderItem.class_category_name1 }}'
      }
    ]
  });
</script>

▼ EC-CUBE 3系

3系をご利用のお客様は下記のCVタグを使用してください。
コンバージョンタグを設置するページでorderエンティティの使用が許可されている必要があります。

<script id="fd_conversion">
  window.fdData = window.fdData || [];
  function fdtag(){window.fdData.push(arguments);}
  
  var transaction_products = {
    tid: ☆☆☆☆,
    q: 0,
    p: 0,
    oid: '{{Order.id}}',
    skus: []
  };
  {% for OrderItem in Order.OrderDetails %}
  transaction_products.q += {{OrderItem.quantity}}
  transaction_products.p += {{OrderItem.price_inc_tax}}
    var productId ='{{ OrderItem.product_code ? OrderItem.product_code : OrderItem.product.id }}'
    var sku = {
      q: {{OrderItem.quantity}},
      sku: productId,
      t: '{{OrderItem.product_name}}',
      p: {{OrderItem.price_inc_tax}},
      c: '{{OrderItem.class_category_name1}}',
    }
    transaction_products.skus.push(sku);
    {% endfor %}
  
  fdtag('track', 'conversion', transaction_products);
</script>

▼ EC-CUBE 4系

4系をご利用のお客様は下記のCVタグを使用してください。

<script id="fd_conversion">
  window.fdData = window.fdData || [];
  function fdtag(){window.fdData.push(arguments);}
  
  var transaction_products = {
    tid: ☆☆☆☆,
    q: 0,
    p: 0,
    oid: '{{Order.id}}',
    skus: []
  };

  {% for OrderItem in Order.MergedProductOrderItems %}
  transaction_products.q += {{OrderItem.quantity}}
  transaction_products.p += {{OrderItem.price_inc_tax}}
  var productId ='{{ OrderItem.product_code ? OrderItem.product_code : OrderItem.product.id }}'
  var sku = {
    q: {{OrderItem.quantity}},
    sku: productId,
    t: '{{OrderItem.product_name}}',
    p: {{OrderItem.price_inc_tax}},
    c: '{{OrderItem.class_category_name1}}',
  }
  transaction_products.skus.push(sku);
  {% endfor %}

  fdtag('track', 'conversion', transaction_products);
</script>

作成したブロックを画面右下の「登録」をクリックして保存します。
「コンテンツ管理＞レイアウト管理」を開き、「注文完了ページ」に作成したブロックを設置して完了です。

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

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

項目名	説明
<head></head>内	「Google Tag Manager (head) 」を設置
<body>タグ直後	「Google Tag Manager (body) 」を設置