Shopify Liteへの導入手順（新フォーマット）

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

基本タグの設置
コンバージョンタグの設置
カート情報取得タグの設置
会員情報連携タグの設置

1.基本タグの設置

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

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

基本タグはFlipdesk管理画面からご確認下さい。タグ管理＞基本タグ

記載例）

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

・購入完了ページについて

theme.liquidに設置しただけでは購入完了ページに基本タグが配信されません。購入完了ページに基本タグを配信する場合は下記のコンバージョンタグの設置の項をご参照下さい。

・チェクアウトページ（決済処理中ページ）について

theme.liquidに設置しただけではチェックアウトページに基本タグが配信されません。チェックアウトページを編集する為にはShopify Plusに加入している必要があります。詳細はカートASPにお問い合わせくださいませ。

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

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

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

・購入完了ページに基本タグを配信する

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

追加スクリプト内に基本タグを貼り付けてください。★の部分は管理画面内で確認し変更してください。

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

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

上記の自動収集はデフォルトで設定されているtidでコンバージョンデータを収集します。

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

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

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

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

＊2024-06-14更新

<script id="fd_conversion">
  window.fdData = window.fdData || [];
  function fdtag(){window.fdData.push(arguments);}

window.addEventListener("DOMContentLoaded", function(event)  {
  fdtag('track', 'conversion', {
    // コンバージョンタグID(★は使用するCVタグのものに変更してください)
    tid: ★★★,
    // 合計購買点数(※必須)
    q: {{ checkout.line_items | map: 'quantity' | join: '+' }},
    // 合計購買金額(※任意)
    p: {{ checkout.total_price | divided_by: 100 }},
    // 受注番号など、コンバージョンを識別する文字列(※任意)
    oid: '{{ checkout.order_id }}',
    // 購買した商品の内訳(※任意)
    skus: [
      {% for item in checkout.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-drawer.liquid

cart-drawer.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>