跳转到主要内容

Shopify Pixel Web SDK

作者:Daria Mamchenkova

当用户从结账页面跳转到感谢页面时,订单 ID 有时会丢失,无法通过回传像素发送至 Affise。由于广告商需要订单 ID 来批准交易或转化,ID 的缺失将导致收入损失。当 Shopify 商店使用第三方支付网关时,就会出现此问题。在这种情况下,订单 ID 可能无法传递到感谢页面。

针对这种情况,您可以使用 Shopify Pixel。本指南将向您详细介绍使用 Affise Web SDK 将您的 Shopify 商店与 Affise 平台集成的最新且最可靠的方法。通过连接这两者,您将能够精确追踪转化、将销售额归因于正确的联盟渠道,并优化广告活动效果——这一切都无需依赖过时的追踪方法。

Shopify 已更改了跟踪机制

Shopify 已弃用将代码注入 theme.liquid 文件,或使用结账设置中的“附加脚本”部分等旧式跟踪配置。目前唯一受支持且具有前瞻性的方法是通过 Shopify 客户事件,它允许您使用安全且结构化的事件流来跟踪商店活动。

本指南遵循 Shopify 推荐的官方方法。

使用此集成的主要优势:

  • 精准的转化追踪:在 Affise 报告中直接获取由联盟营销驱动的销售精准归因。

  • 完全合规且安全:专为满足 Shopify 在性能、隐私和安全方面的最新标准而设计。

  • 易于管理:所有跟踪逻辑均集中于 Shopify 管理面板中。

开始前,请确保您已具备

  • 一个有效的 Affise 管理员账户。

  • 一个具有管理员权限的 Shopify 商店。

集成步骤(通过客户事件)

使用 Shopify 的“自定义像素”功能来设置集成。这使您能够监听“加入购物车”或“结账完成”等事件,并通过 Web SDK 将转化数据传递给 Affise。

步骤 1. 获取 SDK 跟踪代码

  1. 在您的 Affise 仪表盘中,前往“优惠”>“回调”>“Web SDK”

  2. 复制您的脚本模板。

    该代码将通过“客户事件”功能适配您的 Shopify 商店。

🔎 在本指南中,我们使用了一个自定义脚本,用于监听 product_added_to_cart 事件。

步骤 2. 在 Shopify 中添加自定义像素

  1. 在您的 Shopify 后台,前往“设置>“客户事件”。

  2. 点击“添加自定义像素”。

第 3 步:粘贴集成代码

  1. 为像素命名(例如:Affise 转化追踪器)。

  2. 点击“添加像素”以打开代码编辑器。

  3. 将默认代码替换为以下脚本:

// Step 1: Load the Affise Web SDK
// This should be placed in your Shopify Customer Events pixel configuration.
const script = document.createElement('script');
// Important: Replace YOUR_DOMAIN with your actual Affise tracking domain.
script.src = 'https://YOUR_DOMAIN/websdk.js';
script.async = true;
document.head.appendChild(script);

// Step 2: Once the SDK is loaded, set up the event listeners
script.onload = () => {

// A. Track the initial click and store the Offer ID
// This event fires on page loads where URL parameters from affiliates are present.
analytics.subscribe('page_viewed', (event) => {
const url = new URL(event.context.document.location.href);
const offerId = url.searchParams.get('offer_id');
const affiliateId = url.searchParams.get('pid'); // 'pid' is the standard parameter for affiliate_id

// Only generate a click if the required params from the tracking link are present.
if (offerId && affiliateId) {
ASDK.click({
offer_id: offerId,
affiliate_id: affiliateId
})
.then(() => {
// Store the offerId so we can retrieve it on subsequent events
sessionStorage.setItem('affise_offer_id_for_conversion', offerId);
})
.catch(error => {
console.error('Affise SDK: Error tracking click:', error);
});
}
});

// B. Track a conversion when a product is added to the cart
// NOTE: This is an example. For sales tracking, use the 'checkout_completed' event.
analytics.subscribe('product_added_to_cart', (event) => {
const cartLine = event.data.cartLine;

// Retrieve the Offer ID that we stored when the click was tracked
const offerId = sessionStorage.getItem('affise_offer_id_for_conversion');

if (!offerId) {
// If there's no offerId, we can't track the conversion.
// This is expected if the user started their session without an affiliate link.
return;
}

// Get the click_id associated with this offer
const clickId = ASDK.clickId(offerId);

if (!clickId) {
// No clickId found for this offer, so we can't attribute the conversion.
return;
}

// When a product is added to the cart, send the conversion data to Affise
ASDK.conversion({
click_id: clickId,
offer_id: offerId,
status: '1', // 1 = confirmed
sum: cartLine.cost.totalAmount.amount,
order_currency: cartLine.cost.totalAmount.currencyCode,
comment: `Product Added to Cart: ${cartLine.merchandise.title}`
})
.catch(error => {
console.error('Affise SDK: Error tracking conversion:', error);
});
});
};

工作原理:

  • 跟踪点击与转化:该脚本监听两个独立事件。它首先捕获 offer_idpid(联盟ID),以此生成点击事件。随后,当 product_added_to_cart 事件触发时,将转化归因于此点击。为确保脚本正常运行, offer_idpid 必须存在于通往 Shopify 商店的跟踪 URL 中。这确保了即使在不支持第三方 Cookie 的浏览器(如 Safari)中,跟踪也能持续进行。

  • 动态优惠 ID:脚本会自动从 URL 中查找 offer_id ,将其存储在用户的会话中,并利用它触发转化,因此您无需硬编码任何 ID。

  • 基于事件的跟踪:此示例使用 product_added_to_cart。若要追踪实际销售收入,只需将此事件更改为 checkout_completed ,并调整参数以匹配该事件的数据结构。

🔎 Shopify 支持多种事件。您可在此处查看支持事件的完整列表。您还可以通过 SKU、货币和产品 ID 等自定义值来丰富您的跟踪数据。

第 4 步:保存并激活像素

  1. 在像素编辑器的右上角点击“保存”

  2. 前往“设置” > “客户事件”

  3. 点击新创建的像素旁边的“连接”

测试集成

在正式上线前,务必验证一切是否正常运行。为此,请执行以下操作:

  1. 在 Affise 控制台的优惠预览页面生成一个跟踪链接。

  2. 使用该链接访问您的 Shopify 商店(这将设置点击 ID)。

  3. 触发测试事件(例如:将商品加入购物车)。

  4. 在您的 Affise 账户中查看“统计数据 > 转化”以确认是否记录了转化。如果因某种原因未显示转化,您可以查看“统计数据 > 服务器回传”部分以排查问题。

若在 Affise 中看到该转化记录,则说明一切就绪。

🔎 故障排除提示:

  • 请确保已正确插入您的跟踪域名优惠 ID。

  • 使用浏览器控制台检查 event.data 是否结构正确。

  • 请在无插件的隐身窗口中进行测试。

  • 如需帮助,请联系 [email protected]


如有任何疑问,请通过电子邮件 [email protected] 联系 Affise 客户支持团队。

这是否解答了您的问题?