Shopify CyberTargeter 插件安装指南

本指南将帮助您在 Shopify 中安装 CyberTargeter 插件，实现 Pixel 追踪和事件监控。

步骤 1：安装插件

1.1 搜索并安装插件

1. 登录 Shopify 后台
2. 进入 "应用" → "应用市场"
3. 搜索 "CyberTargeter" 并安装

📸 操作示意图：

⚠️ 重要：必须使用开户表中填写的管理员邮箱账号进行安装

1.2 获取 Pixel ID

1. 进入插件页面
2. 点击 "站点管理"
3. 查看并记录您的专属 Pixel ID

📸 操作示意图：

1.3 触发自动安装 Pixel 代码

1. 进入 "事件追踪" 模块
2. 点击 "创建事件追踪" → "完成"

📸 操作示意图：

步骤 2：配置追踪代码

插件安装完成后，需要完成以下配置：

2.1 在主题中插入公共代码

用途：加载 MKQ Pixel 基础脚本

1. Shopify 后台 → "在线商店" → "模板"
2. 找到当前主题，点击 "自定主题" → "编辑代码"
3. 打开 theme.liquid 文件
4. 在 </body> 标签前插入：

{% include 'mkq_script' %}

📸 操作示意图：

2.2 配置 Customer Events 追踪

用途：追踪购买、结算等关键事件

1. Shopify 后台 → "设置" → "Customer Events"
2. 点击 "Add Custom Pixel Code"
3. 创建事件：Mkq-Purchase
4. 添加以下代码（将 MKQ_PIXEL_ID 替换为您的实际 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>

📸 操作示意图：

步骤 3：生成产品目录 Feed

用途：为广告投放提供产品数据

1. 打开 CyberTargeter 插件
2. 点击 "创建产品目录"
3. 系统将自动生成 feed 数据

📸 操作示意图：

步骤 4：解决 AddToCart 事件不触发问题

4.1 问题说明

有些网站的加入购物车按钮结构（DOM）不一致，导致 AddToCart 事件无法正常触发。

4.2 解决步骤

第一步：进入代码编辑页面

1. 登录 Shopify 后台
2. 依次点击：销售渠道 → 在线商店 → 模板 → 编辑代码
3. 在snippets文件列表中搜索 mkq_script 并点击文件

📸 操作示意图：

第二步：找到插入位置

在 mkq_script.liquid 文件中，找到以下代码（按 Ctrl+F 或 Command+F 搜索）：

{% if template.name == 'product' && product %}

第三步：添加代码

在指定位置插入以下代码（不要改动已有内容），或者联系 Pixel 技术同学要最新的代码：

var intervalId = setInterval(function() {
  var addToCartBtn = document.querySelector('.buy-buttons .product-form__submit');
  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);

📸 操作示意图：

第四步：保存并验证

1. 保存修改
2. 联系 Pixel 技术同学验证功能