Shopify 手动安装 Pixel 指南

本指南将帮助您在 Shopify 中手动安装 CyberTargeter Pixel，实现全站用户行为追踪。

步骤 1：创建 Pixel 脚本文件

1.1 进入代码编辑页面

1. 登录 Shopify 后台
2. 依次点击：销售渠道 → 在线商店 → 模板 → 编辑代码

📸 操作示意图：

1.2 创建 mkq_script.liquid 文件

1. 在左侧文件列表中，点击 "Snippets" 文件夹
2. 点击 "Add a new snippet"
3. 文件名输入：mkq_script
4. 点击 "完成"

📸 操作示意图：

1.3 复制下面代码到 mkq_script 文件

⚠️ 重要：请将代码中的 MKQ_PIXEL_ID 替换为您专属的 Pixel ID

<script type="text/javascript">
  !function(w,o,s,r,p,k,e){if(w.mkq){return}p=w.mkq=function(){p.invokeFunc?p.invokeFunc.apply(p,arguments):p.qu.push(arguments)};if(!w._mkq){w._mkq=p}p.push=p;p.qu=[];k=o.createElement(s);k.async=!0;k.src=r;e=o.getElementsByTagName(s)[0];e.parentNode.insertBefore(k,e)}(window,document,"script","//pixeltrack.clientgear.com/mkq.min.js");
  mkq('init', 'MKQ_PIXEL_ID'); // 替换为您的实际 Pixel ID
  mkq('track', "PageView", {
    title: document.title
  });
</script>

{% if template.name == 'collection' %}
    <script type="text/javascript">
       mkq('track', 'ViewCategory', {
          content_name: '{{ collection.title | escape }}',
          content_category: '{{ collection.title }}',
          content_ids: [{% for line in collection.products %}'{{ line.id }}'{% unless forloop.last == true %}, {% endunless %}{% endfor %}]
      });
    </script>
  {% endif %}

  {% if template.name == 'product' && product %}
    <script type="text/javascript">
      mkq('track', 'ViewContent', {
          value: '{{ product.price | money_without_currency | remove: '.' | remove: ','  | divided_by: 100.0 }}',
          currency: '{{ shop.currency }}',
          content_name: '{{ product.title | escape }}',
          content_ids: ['{{ product.id }}'],
          image_link:'{{product.featured_image | product_img_url: "large" | replace: "//", "https://"}}'
      });
      
      <!-- AddToCart 事件追踪 -->
      var intervalId = setInterval(function() {
        var addToCartBtn = document.querySelector('.add-to-cart');
        if (addToCartBtn) {
          clearInterval(intervalId);
          addToCartBtn.addEventListener('click', function(event) {
            mkq('track', 'AddToCart', {
              value: '{{ product.price | money_without_currency | remove: '.' | remove: ','  | divided_by: 100.0 }}',
              currency: '{{ shop.currency }}',
              content_name: '{{ product.title | escape }}',
              content_ids: ['{{ product.id }}']
            });
          });
        }
      }, 500);
      <!-- 如果 AddToCart 事件不触发，请联系技术支持获取最新代码 -->

    </script>
  {% endif %}

  {% if template.name == 'cart' && cart && cart.items %}
    <script type="text/javascript">
      mkq('track', 'ViewCart', {
        value: '{{ cart.total_price | money_without_currency | remove: '.' | remove: ','  | divided_by: 100.0}}',
        currency:'{{ shop.currency }}',
        content_ids: [{% for line in cart.items %}'{{ line.product_id }}'{% unless forloop.last == true %}, {% endunless %}{% endfor %}]
      });
    </script>
  {% endif %}

  {% if template.name == 'index' %}
    <script type="text/javascript">
      mkq('track', 'Home');
    </script>
  {% endif %}

  {% if template.name == 'page' %}
    <script type="text/javascript">
      mkq('track', 'Page', {
        title: '{{ page.title }}',
        url: '{{ page.url }}',
        author: '{{ page.author }}',
        handle: '{{ page.handle }}',
        id: '{{ page.id }}'
      });
    </script>
  {% endif %}

  {% if template.name == 'register' %}
    <script type="text/javascript">
      mkq('track', 'Register');
    </script>
  {% endif %}

  {% if template.name == 'login' %}
    <script type="text/javascript">
      mkq('track', 'Login');
    </script>
  {% endif %}

  {% if search.performed %}
  <script type="text/javascript">
     mkq('track', 'Search', {
       search_string: "{{ search.terms }}"
    });
  </script>
  {% endif %}

步骤 2：在主题中引入脚本

2.1 编辑 theme.liquid 文件

1. 在左侧文件列表中，点击 "Layout" 文件夹
2. 找到并点击 theme.liquid 文件
3. 在 </body> 标签前添加以下代码并保存：

<!-- mkq pixel code -->
{% include 'mkq_script' %}
<!-- end mkq pixel code -->

📸 操作示意图：

步骤 3：配置Purchase购买事件追踪

3.1 设置 Customer Events

1. Shopify 后台 → "设置" → "Customer Events"
2. 点击 "Add Custom Pixel Code"
3. 创建事件：Mkq-Purchase
4. 添加以下代码，保存并开启连接（将 MKQ_PIXEL_ID 替换为您的Pixel ID）：

<script>
!function (w, o, s, r, p, k, e) {
  if (w.mkq) return;
  p = w.mkq = function () {
    p.invokeFunc ? p.invokeFunc.apply(p, arguments) : p.qu.push(arguments)
  };
  if (!w._mkq) w._mkq = p;
  p.push = p; p.qu = [];
  k = o.createElement(s); k.async = !0; k.src = r;
  e = o.getElementsByTagName(s)[0]; e.parentNode.insertBefore(k, e)
}(window, document, "script", "https://pixeltrack.clientgear.com/mkq.min.js");

mkq('init', 'MKQ_PIXEL_ID'); // 替换为真实 Pixel ID

analytics.subscribe("checkout_completed", (event) => {
  var ids = [];
  var orderId = event.data.checkout.order.id;
  var currency = event.data.checkout.currencyCode;
  var total = event.data.checkout.totalPrice.amount;

  try {
    var lineItems = event.data.checkout.lineItems;
    for (var i = 0; i < lineItems.length; i++) {
      ids.push(lineItems[i].variant.product.id);
    }
  } catch (e) {
    console.log(e);
  }

  mkq('track', 'Purchase', {
    currency: currency,
    value: total,
    order_id: orderId,
    content_ids: ids
  });
});

// 开始结算
analytics.subscribe("checkout_started", (event) => {
  mkq('track', 'InitiateCheckout', {
    value: event.data?.checkout?.totalPrice?.amount,
    currency: event.data?.checkout?.totalPrice?.currencyCode,
    content_name: "Checkout"
  });
});

// 填写支付信息
analytics.subscribe("payment_info_submitted", (event) => {
  mkq('track', 'AddPaymentInfo', {
    value: event.data?.checkout?.totalPrice?.amount,
    currency: event.data?.checkout?.totalPrice?.currencyCode
  });
});
</script>