Shopify Liteへの導入手順(新フォーマット)

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

Shopify Lite Flipdeskタグ埋め込み方法

 

1.基本タグの設置

Shopify ➡販売チャンネル ➡オンラインストア ➡テーマ ➡アクション ➡
コードを編集する ➡Layout  ➡ {/}theme.liquid

➡theme.liquidのソースコード末尾にある</body>タグの直前に基本タグを設置し、
右上の【保存する】を押す

記載例)

<script language="javascript" charset="UTF-8" type="text/javascript" src="https://api.flipdesk.jp/chat_clients/flipdesk_chat.js?api_token=★★★" defer></script>
</body>

 


 

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

shopifyサイトに関しては、基本タグを設置するだけで購入情報も自動的に収集を開始します。

基本タグ設置後はテスト購入を行い、コンバージョン情報が取得できているかご確認ください。

・複数のコンバージョンタグを扱いたい場合

上記の自動収集はデフォルトで設定されているtagIDでCVデータを収集します。

CVポイントが別にあるなど、複数のCVタグを扱いたい場合は下記手順でCVタグを設置してください。

 

設定 ➡ チェックアウト ➡ 注文状況ページの追加スクリプト



➡追加スクリプト 内に以下のコードを貼り付け。★の部分は管理画面内で確認し変更してください。

以下の状態になっていることを確認し、保存する。

<!-- body内に埋める -->
<script id="fd_conversion">
window.fdData = window.fdData || [];
  function fdtag(){window.fdData.push(arguments);}

window.addEventListener("load", function(event)  {
fdtag('track', 'conversion', {
  // コンバージョンタグID(★は使用するCVタグのものに変更してください)
  tid: ★★★,
  // 合計購買点数(※必須)
  q: {{ order.line_items | map: 'quantity' | join: '+' }},
  // 合計購買金額(※任意)
  p: {{ order.total_price | divided_by: 100 }},
  // 受注番号など、コンバージョンを識別する文字列(※任意)
  oid: '{{ order.order_number }}',
  // 購買した商品の内訳(※任意)
  skus: [
     {% for item in order.line_items %}
    {
      q: {{ item.quantity }},   // 購買点数(※必須。固定の場合は「1」を設定してください。)
      sku: '{{ item.sku }}', // 商品番号など、商品を識別する文字列(※任意)
      t: '{{ item.title }}',   // 商品名(※任意)
      p: {{ item.price | divided_by: 100 }},   // 商品の単価(※任意)
      c: '{{ item.product_type }}'    // 商品カテゴリ(※任意)
    }
    {% unless forloop.last %},{% endunless %}
    {% endfor %}
  ]
  });
});
</script>
// 基本タグも一緒に記載します(★は管理画面内で確認してください)
<script language="javascript" charset="UTF-8" type="text/javascript" src="https://api.flipdesk.jp/chat_clients/flipdesk_chat.js?api_token=★★★" defer></script>

*カートシステムのバージョンによっては動作しない場合もございます。設置後は必ずテスト購入を行い、データが取得できるか確認してください。

3.カート情報取得タグ

Shopify ➡販売チャンネル ➡オンラインストア ➡テーマ ➡アクション ➡
コードを編集する ➡Templates  ➡ {/}cart.liquid

➡cart.liquidのソースコード末尾にカートタグを設置し、
右上の【保存する】を押す
記載例)

<!-- body内に埋める -->
<script id="fd_cart">
window.fdData = window.fdData || [];
function fdtag(){window.fdData.push(arguments);}

fdtag('track', 'cart', {
'skus': [{% for item in cart.items %}
{
q: '{{ item.quantity }}', // 点数(※必須)
sku: '{{ item.sku }}', // 商品SKU(※任意)
t: '{{ item.title }}', // 商品名(※任意)
p: '{{ item.final_price | money_without_trailing_zeros | remove: "¥" | remove: ","}}', // 単価(※任意)
c: '{{ item.product.tags }}' // カテゴリ(※任意)
    },{% endfor %}
]
});
</script>

 

4.会員情報連携タグ(ファイル連携)

基本タグの末尾に data-sync-user-id="{{ customer.id }}" と追記します。

記載例)

<script language="javascript" charset="UTF-8" type="text/javascript" src="https://api.flipdesk.jp/chat_clients/flipdesk_chat.js?api_token=★★★" data-sync-user-id="{{ customer.id }}" defer></script>
</body>