GTM + Customer Events API
Shopify GTM & Web Pixel 追踪代码生成器
利用 Shopify 现代 Customer Events API，分钟级部署 Google Tag Manager 与 GA4 电商会话事件追踪。
11. 配置基本信息
22. 选择需要追踪的电商事件
33. 生成的代码片段
请复制此脚本，并粘贴至 Shopify 后台 ->「设置」->「客户事件 (Customer Events)」->「添加自定义 Pixel」。此沙盒安全 Pixel 能在结账及全站页面触发时，将标准电商事件推送至 GTM dataLayer。
// Shopify Custom Web Pixel (Checkout and Sandbox Compatible)
// Generated by Shopify Marketing & Analytics Hub
(function() {
// Initialize the sandboxed GTM DataLayer
window.dataLayer = window.dataLayer || [];
// Load GTM library inside sandboxed environment
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');
// Event Analytics Subscriptions
analytics.subscribe("page_viewed", (event) => {
window.dataLayer.push({
event: "shopify_page_viewed",
id: event.id,
clientId: event.clientId,
timestamp: event.timestamp,
url: event.context.document.location.href,
referrer: event.context.document.referrer
});
});
analytics.subscribe("product_viewed", (event) => {
const customData = event.data?.productVariant;
window.dataLayer.push({
event: "view_item",
timestamp: event.timestamp,
ecommerce: {
currency: customData?.price?.currencyCode || "USD",
value: parseFloat(customData?.price?.amount || "0"),
items: [{
item_id: customData?.id,
item_name: customData?.title,
price: parseFloat(customData?.price?.amount || "0"),
quantity: 1
}]
}
});
});
analytics.subscribe("collection_viewed", (event) => {
const customData = event.data?.collection;
window.dataLayer.push({
event: "view_item_list",
timestamp: event.timestamp,
ecommerce: {
item_list_id: customData?.id,
item_list_name: customData?.title,
items: []
}
});
});
analytics.subscribe("product_added_to_cart", (event) => {
const customData = event.data?.cartLine?.merchandise;
window.dataLayer.push({
event: "add_to_cart",
timestamp: event.timestamp,
ecommerce: {
currency: customData?.price?.currencyCode || "USD",
value: parseFloat(customData?.price?.amount || "0") * (event.data?.cartLine?.quantity || 1),
items: [{
item_id: customData?.id,
item_name: customData?.product?.title,
item_variant: customData?.title,
price: parseFloat(customData?.price?.amount || "0"),
quantity: event.data?.cartLine?.quantity || 1
}]
}
});
});
analytics.subscribe("checkout_started", (event) => {
const customData = event.data?.checkout;
window.dataLayer.push({
event: "begin_checkout",
timestamp: event.timestamp,
ecommerce: {
currency: customData?.currencyCode || "USD",
value: parseFloat(customData?.totalPrice?.amount || "0"),
items: customData?.lineItems?.map(item => ({
item_id: item.variant?.id,
item_name: item.variant?.product?.title,
price: parseFloat(item.variant?.price?.amount || "0"),
quantity: item.quantity
})) || []
}
});
});
analytics.subscribe("checkout_completed", (event) => {
const customData = event.data?.checkout;
window.dataLayer.push({
event: "purchase",
timestamp: event.timestamp,
ecommerce: {
transaction_id: customData?.order?.id || event.id,
currency: customData?.currencyCode || "USD",
value: parseFloat(customData?.totalPrice?.amount || "0"),
tax: parseFloat(customData?.totalTax?.amount || "0"),
shipping: parseFloat(customData?.shippingLine?.price?.amount || "0"),
items: customData?.lineItems?.map(item => ({
item_id: item.variant?.id,
item_name: item.variant?.product?.title,
price: parseFloat(item.variant?.price?.amount || "0"),
quantity: item.quantity
})) || []
}
});
});
analytics.subscribe("search_submitted", (event) => {
window.dataLayer.push({
event: "search",
search_term: event.data?.searchQuery
});
});
})();部署步骤说明：
- 1在上方输入您的 Google Tag Manager 容器 ID（例如 GTM-K17AB12）。
- 2勾选希望在独立站上进行追踪的会话与电商转换事件。
- 3复制生成的「Shopify 结账沙盒 Pixel」代码。登录 Shopify 后台，进入「设置」>「客户事件」，点击「添加自定义 Pixel」，命名后粘贴该代码并保存激活。
- 4复制「GTM 主题加载器」代码，进入 Shopify 商店主题代码编辑器，在 `theme.liquid` 文件的 `<head>` 标签首行粘贴。