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.コンバージョンタグの設置

設定　➡チェックアウト　➡注文処理

➡追加スクリプト 内に以下のパラメータを貼り付け
※注文状況ページのスクリプト ではなく、その下の「スクリプト」に貼り付けをお願いします

{% if Shopify.Checkout.page == "thank_you" %}
<div style="display: none">
{% assign flip_skus = "" %}
{% assign flip_quantity = 0 %}
{% assign flip_price = 0 %}
{% for line_item in line_items%}
{% assign correct_line_price = line_item.final_line_price | divided_by:100 %}
{% assign correct_price = line_item.final_price | divided_by:100 %}
{% assign flip_quantity = flip_quantity | plus: line_item.quantity %}
{% assign flip_price = flip_price | plus: correct_line_price %}
{% endfor %}
</div>

➡続いてFlipdesk管理画面　➡タグ管理　➡コンバージョンタグにて注文完了ページに設定するコンバージョンタグをコピーし、末尾に貼り付け

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

  fdtag('track', 'conversion', {
    // コンバージョンタグID(※変更しないでください)
    tid: ★★★,
    // 合計購買点数(※必須)
    q: '{{ flip_quantity }}',
    // 合計購買金額(※任意)
    p: '{{ flip_price | remove: ","}}',
    // 受注番号など、コンバージョンを識別する文字列(※任意)
    oid: '{{ order_number }}',
    // 購買した商品の内訳(※任意)
    skus: [
      {
        {% assign flip_skus = flip_skus | append: "
        q: " | append: line_item.sku | append: ",
        sku: " | append: line_item.sku | append: ",
        t: " | append: line_item.title | append: ",
        p: " | append: correct_line_price  | append: ",
        c: " | append: correct_price | append: "
        ," %}
        }
    ]
   });
</script>
{% endif %}

➡最後にFlipdesk管理画面　➡タグ管理　➡基本タグにて基本タグをコピーし、末尾に貼り付け

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

 

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

{% if Shopify.Checkout.page == "thank_you" %}
<div style="display: none">
{% assign flip_skus = "" %}
{% assign flip_quantity = 0 %}
{% assign flip_price = 0 %}
{% for line_item in line_items%}
{% assign correct_line_price = line_item.final_line_price | divided_by:100 %}
{% assign correct_price = line_item.final_price | divided_by:100 %}
{% assign flip_quantity = flip_quantity | plus: line_item.quantity %}
{% assign flip_price = flip_price | plus: correct_line_price %}
{% endfor %}
</div>
<!-- body内に埋める -->
<script id="fd_conversion">
  window.fdData = window.fdData || [];
  function fdtag(){window.fdData.push(arguments);}

  fdtag('track', 'conversion', {
    // コンバージョンタグID(※変更しないでください)
  tid: ★★★,
    // 合計購買点数(※必須)
    q: '{{ flip_quantity }}',
    // 合計購買金額(※任意)
    p: '{{ flip_price | remove: ","}}',
    // 受注番号など、コンバージョンを識別する文字列(※任意)
    oid: '{{ order_number }}',
    // 購買した商品の内訳(※任意)
    skus: [
      {
        {% assign flip_skus = flip_skus | append: "
        q: " | append: line_item.sku | append: ",
        sku: " | append: line_item.sku | append: ",
        t: " | append: line_item.title | append: ",
        p: " | append: correct_line_price  | append: ",
        c: " | append: correct_price | append: "
        ," %}
        }
    ]
   });
</script>
{% endif %}
<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>