集成

平台

面向代码管理器、WooCommerce、Shopify、VTEX、Nuvemshop 和单页应用的现成示例。

Google Tag Manager#

全局代码#

自定义 HTML 代码，触发器选 All Pages：

HTMLGTM · All Pages

<script src="https://bridge.moclick.com.br/moclick-YOUR-SLUG.js" defer></script>

转化代码#

自定义 HTML 代码，由购买事件触发：

HTMLGTM · purchase

<script>
  window.MoclickConversion = {
    value: {{DLV - ecommerce.value}},
    transaction_id: "{{DLV - ecommerce.transaction_id}}"
  };
</script>

引用数据层变量之前请先创建它们。在 GA4 中路径是 ecommerce.value 和 ecommerce.transaction_id。请在 GTM 的 Preview 中确认变量能取到值—— 这里转化缺失的头号原因就是变量为空。

WooCommerce#

通过子主题的 functions.php，或使用代码片段插件：

PHPfunctions.php

// 所有页面上的全局代码
add_action('wp_head', function () {
    echo '<script src="https://bridge.moclick.com.br/moclick-YOUR-SLUG.js" defer></script>';
});

// 感谢页上的转化
add_action('woocommerce_thankyou', function ($order_id) {
    $order = wc_get_order($order_id);
    if (!$order) { return; }

    $value = number_format((float) $order->get_total(), 2, '.', '');
    $txid  = $order->get_order_number();

    printf(
        '<script>window.MoclickConversion={value:%s,transaction_id:%s};</script>',
        wp_json_encode((float) $value),
        wp_json_encode((string) $txid)
    );
});

两个值都要用 wp_json_encode。直接拼接进字符串，一旦订单号里含有单引号、斜杠或在 Woo 中配置的前缀，就会把 JavaScript 弄坏。

Shopify#

全局代码#

在 Online Store → Themes → Edit code → theme.liquid 中，放进 <head> 里：

Liquidtheme.liquid

<script src="https://bridge.moclick.com.br/moclick-YOUR-SLUG.js" defer></script>

转化#

在 Settings → Checkout → Order status page 中，或作为 Custom Pixel：

LiquidOrder status page

<script src="https://bridge.moclick.com.br/moclick-YOUR-SLUG.js" defer></script>
<script>
  window.MoclickConversion = {
    value: {{ checkout.total_price | divided_by: 100.0 }},
    transaction_id: "{{ checkout.order_number }}"
  };
</script>

Shopify 以分为单位

checkout.total_price 返回的是分：一笔 150.00 雷亚尔的订单会以 15000 的形式到达。少了 divided_by: 100.0，你的收入就会高出一百倍。请在 Order status page 上重复放置全局代码—— 该页面在主题之外提供，不会继承 theme.liquid。

VTEX#

全局代码放在 Storefront → 设置 → Scripts。转化写在订单完成页的模板里：

JavaScriptorderPlaced

<script>
  window.addEventListener("message", function (e) {
    if (!e.data || e.data.eventName !== "vtex:orderPlaced") return;
    var o = e.data;
    window.MoclickConversion = {
      value: o.transactionTotal,
      transaction_id: String(o.transactionId)
    };
  });
</script>

Nuvemshop / Tiendanube#

全局代码放在我的商店 → 设置 → 外部代码中，并勾选对所有页面生效。转化写在购买确认代码中：

HTML购买确认

<script>
  window.MoclickConversion = {
    value: {{ order.total | raw }},
    transaction_id: "{{ order.number }}"
  };
</script>

单页应用#

在单页应用中页面不会重新加载，因此全局代码只加载一次，转化监听保持活跃 120 秒。如果从加载到确认之间的间隔可能超过这个时长，请在确认路由上重新加载代码：

JavaScript确认路由

function trackMoclickConversion(order) {
  window.MoclickConversion = {
    value: order.total,
    transaction_id: String(order.id)
  };

  // 重新加载代码以重启监听窗口。
  // 5 分钟缓存可避免重新传输；去重可避免重复记录。
  var s = document.createElement("script");
  s.src = "https://bridge.moclick.com.br/moclick-YOUR-SLUG.js";
  s.defer = true;
  document.head.appendChild(s);
}

重新加载代码是安全的：按 transaction_id 去重可防止重复转化，而防重复记录的保护可防止重复访问记录。

其他平台#

任何允许在所有页面插入 JavaScript、并能在确认页暴露订单及其金额的平台都兼容。要求仅此而已：

全局代码在所有页面上加载，包括确认页
确认页上定义 window.MoclickConversion，金额使用点号小数点，订单标识符稳定

如果金额或标识符只存在于后端，请使用 S2S 回传。