Shopify电商埋码指南 #

以下提供的脚本方便Shopify电商客户进行快速埋码设置

1. 代码中找到theme.liquid模板，设置基础埋码

Tips:
xxxxx位置具体参考

<!-- Ptengine Tag -->
<script src="https://js.ptengine.com/xxxxxxxx().js"></script>
<!-- End Ptengine Tag -->

2. 基础事件product_home、product_detail、product_list埋码，在模板theme.liquid的body结构底部设置以下脚本

<!-- Ptengine Tag -->
{% if template contains "index" %}
  <script>
      window.ptengine && window.ptengine.track("product_home",{},{transport:'beacon'});
  </script>
{% elsif template contains "product" %}
  <script>
      window.ptengine && window.ptengine.track("product_detail",{},{transport:'beacon'});
  </script>
{% elsif template contains "collection" %}
  <script>
      window.ptengine && window.ptengine.track("product_list",{},{transport:'beacon'});
  </script>
{% endif %}

3. 如果需要采集登录用户信息需要在expirence功能中应用，需要获取shopify中的customer信息，调用window.ptengine.identify函数发送访客数据，将以下脚本设置在模板theme.liquid的body结构底部

{% if customer %}
  <script>
    window.ptengine && window.ptengine.identify('{{ customer.id }}', {
        email: '{{ customer.email }}',
        name: '{{ customer.name }}',
        has_account: '{{ customer.has_account }}',
        last_order: '{{ customer.last_order }}',
        orders_count: '{{ customer.orders_count }}',
        total_spent: '{{ customer.total_spent }}',
        accepts_marketing: '{{ customer.accepts_marketing }}'
    });
  </script>
{% endif %}

4.设置add_cart 、checkout事件里需要用户根据自己的页面上加购、结算按钮的元素选择器进行设置，才能正常采集相关事件。设置在模板theme.liquid的body结构底部

<!--方法一，如果用户页面加购、结算按钮元素是非动态加载的，使用以下方法-->
<script>
    try{
      document.getElementById("AddToCart") && document.getElementById("AddToCart").addEventListener('click',() => {
        window.ptengine && window.ptengine.track("add_cart",{},{transport:'beacon'});
      });
    }catch(e){}
</script>
<script>
    try{
      document.getElementById("Checkout") && document.getElementById("Checkout").addEventListener('click',() => {
        window.ptengine && window.ptengine.track("checkout",{},{transport:'beacon'});
      });
    }catch(e){}
</script>
<!--方法二，如果用户页面加购、结算按钮元素是动态加载的，使用事件代理监听点击发送事件，参考以下脚本-->
<script>
  document.querySelector("body").addEventListener("click",function(e){
      var targetEle = e.srcElement||e.target;
      if(targetEle.nodeName == "BUTTON" && (targetEle.className.includes("add-to-cart") || targetEle.className.includes("ca-button"))){
           window.ptengine && window.ptengine.track("add_cart",{},{transport:'beacon'});
      }else if(targetEle.nodeName == "BUTTON" && targetEle.className.includes("btn--checkout")){
          window.ptengine && window.ptengine.track("checkout",{},{transport:'beacon'});
      }
  })
</script>

5. 操作shopify后台，进入设置-结账和账户里找到订单状态页面，在textarea里部署基础代码和purchase事件代码

<!-- Ptengine Tag -->
<script src="https://js.ptengine.com/xxxxxxxx.js"></script>

{% if first_time_accessed %}
    <script>
        window.ptengine && window.ptengine.track('purchase',{},{transport:'beacon'});
    </script>
{% endif %}
<!-- End Ptengine Tag -->