在 Shopify 埋設 Omnichat Pixel

開始埋設之前

在開始埋設 Pixel 之前請先按照步驟，安裝網頁對話插件於您的官網上

埋設 Pixel Script

1. Shopify後台 > 網路商店 > 佈景主題，在「動作」中點選「編輯程式碼」

2. 版面配置 > theme.liquid

3. 請在</body>前貼上以下的程式碼

{% if customer %}
  <script type="text/javascript">

  // OMNICHAT TRACKER V1.0
  window.omnichatTracker = window.omnichatTracker || [];

  var member = {
    memberId: "{{ customer.id|json }}",
    memberEmail: {{ customer.email|json }},
    memberPhone: {{ customer.phone|json }},
    memberName: {{ customer.name|json }},
  }

  window.omnichatTracker.push(['init', 'config', member]);

  </script>
{% endif %}

4. 回到網路商店 > 佈景主題，並點選「自訂」

5. 請點選最上方「首頁」欄位，並選擇 產品 > 預設產品

6. 在左側功能選單，點擊「新增區段」

7. 貼上以下的程式碼

請檢查是否需要修改其中的第17行 & 第20行

務必依照您的主題並加入相對應的數量與購物車按鈕

<script type="text/javascript">

// OMNICHAT TRACKER V1.0
window.omnichatTracker = window.omnichatTracker || [];

{% assign categories = product.collections|map:'title' %}
var item = {
  id: "{{ product.id|json}}",
  name: {{ product.title|json}},
  price: parseFloat("{{ product.price|money_without_currency}}".replace(',', '')),
  brand: {{ product.vendor|json}},
  category: {{ categories|first|json}},
}

window.omnichatTracker.push(['event','view_product', item]);

var addToCartEls = document.getElementsByClassName("product-form__submit");

var sendAddToCartEvent = function() {
  var qty = document.getElementsByClassName('quantity__input')[0].value;
  item.quantity = qty;
  window.omnichatTracker.push(['event', 'add_to_cart', { items: [ item ] }]);
};

for (var i = 0; i < addToCartEls.length; i++) {
  addToCartEls[i].addEventListener('click', sendAddToCartEvent, false);
}

</script>

在第17行中確認並更新「加入到購物車」的按鈕名稱

請到您的商品頁面，將游標移到「加入購物車」的按鈕上，點擊右鍵按下檢查

在第20行中確認並更新產品數量

請到您的商品頁面，將游標移到「數量」的按鈕上，點擊右鍵按下檢查，並更新相對應的程式碼

8. 請到設定 > 結帳，在訂單狀態頁面，貼上以下的程式碼

您必須先完成網頁對話插件的安裝，才能讓Pixel順利運作

9. 請在步驟8網頁對話插件的程式碼後面，貼上以下的程式碼

{% if customer %}
<script type="text/javascript">

    // OMNICHAT TRACKER V1.0
    window.omnichatTracker = window.omnichatTracker || [];

    var member = {
    memberId: "{{ customer.id|json }}",
    memberEmail: {{ customer.email|json }},
    memberPhone: {{ customer.phone|json }},
    memberName: {{ customer.name|json }},
    }

    window.omnichatTracker.push(['init', 'config', member]);
</script>
{% endif %}

<script type="text/javascript">
    window.omnichatTracker.push(['event','purchase', {
        "transaction_id": "{{order_number|json}}",
        "amount": parseFloat("{{ total_price|money_without_currency}}".replace(',', '')),
        "currency": {{currency|json}},
        "items": [
            {% for line_item in line_items %}
            {
                "id": "{{ line_item.product_id|json }}",
                "name": {{ line_item.title|json }},
                {% if line_item.variant %}
                "variant": "{{line_item.variant.title}}",
                {% endif %}
                "quantity": {{ line_item.quantity }},
                "price": parseFloat("{{ line_item.line_price|money_without_currency}}".replace(',', ''))
            },
            {% endfor %}
        ]
    }]);
</script>