创建自定义像素代码

已于 Apr 18, 2024 打印了此页面。若要查看当前版本，请访问 https://help.shopify.com/zh-CN/manual/promoting-marketing/pixels/custom-pixels/code。

此页面包含为第三方像素代码创建自定义像素代码的说明，目的是让您可以跟踪特定的客户事件。为自定义像素代码创建代码后，您可以将该像素代码添加到 Shopify 商店。

本页相关主题

准备创建自定义像素代码

在创建自定义像素代码之前，请查看以下信息，确保您了解如何配置像素代码：

添加自定义像素代码时，请指定以下信息：

  • 第三方 JavaScript 像素代码
  • 您要跟踪的行为活动

为自定义像素代码创建代码

为自定义像素代码创建代码涉及以下步骤：

  1. 准备第三方 JavaScript SDK
  2. 配置像素代码以跟踪客户事件。

准备第三方 Javascript SDK

您使用的第三方服务可为您提供与像素代码集成的代码。像素代码通常有两个组成部分，一个 Javascript SDK 和一个跟踪代码。您需要移除第三方服务代码中的任何 HTML，因为 Shopify 像素代码沙盒仅支持 JavaScript。

以下是一个元像素代码的示例。不同第三方提供的像素代码会略有不同。

​​<!-- Meta Pixel Code -->
​​<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=618182112209280&ev=PageView&noscript=1"/></noscript>
<!-- End Meta Pixel Code -->

从元代码中删除 HTML 后，您将获得元像素代码 SDK 和对其进行初始化的代码。PageView 活动跟踪代码也已删除，因为将在下一步中添加该代码。

​​!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);

Meta's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

您可能会遇到使用 script src= 加载的像素代码。Shopify 的像素代码中不支持 HTML，因此您需要将 script src= 替换为 JavaScript 等效项。

下方是 Google Analytics 像素代码的示例：

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', ''YOUR_PIXEL_ID'');
</script>

可将 script src= 部分替换为 JavaScript 等效项。请始终确保您的 src 属性与 HTML 版本匹配：

const script = document.createElement('script');
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID');
script.setAttribute('async', '');
document.head.appendChild(script);

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR_PIXEL_ID');

Google's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

跟踪客户活动

加载并初始化像素代码 SDK 后，您需要向其传递活动以进行跟踪。要实现此操作，您需要订阅活动，然后将活动数据传递到像素代码的 SDK 以供第三方服务进行处理。

订阅标准活动

Shopify 提供了标准活动集，以便轻松确保您的像素代码能收集所需的数据。

您可以使用 Shopify 像素代码扩展 API 订阅活动。您需要在订阅的活动中放置第三方像素代码。

下方是元像素代码的 PageView 活动的示例。请注意，fbq("track") 是元代码的一部分，并且每个公司都有其自己的版本，您需要参考公司文档获取此内容。

analytics.subscribe("page_viewed", async (event) => {
  fbq('track', 'PageView');
});

某些活动具有您可以传递到像素代码的元数据。下方是将一些产品详细信息传递到 ViewContent 元活动的示例：

analytics.subscribe("product_viewed", async (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price?.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

订阅自定义客户活动

如果您想跟踪其他客户事件，例如有人点击按钮的操作，您可以添加自定义客户事件。自定义事件的订阅方式与标准事件相同。声明想要订阅的事件的名称，然后将信息传递到第三方服务提供商的像素代码。

此示例显示了已发布的自定义事件在模板的 liquid 文件中可能如何显示：

<script>Shopify.analytics.publish("special_email_signup", { email_campaign_id: 123});</script>

此示例演示了您可以如何配置像素代码来订阅该自定义事件：

analytics.subscribe("special_email_signup", event => {
  window.dataLayer.push({event: emailSignUp, emailCampaignId: event.customData.email_campaign_id});
});

有关自定义事件的信息，请参阅 Shopify 开发者文档。

在您已配置为需要同意的市场中，只有当访客已针对营销和分析目的提供同意时，Web 像素代码才能运行。每个像素代码可能因不同目的而具有不同名称。您应参阅像素代码文档，了解它如何映射到 Shopify 的定义。

例如，下方显示了营销和分析目的如何映射到 Google 的同意模式：

gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

自定义像素示例

下方是 Meta 像素代码的代码示例。像素代码将因第三方服务提供方以及您想跟踪的活动而异。有关可用活动的列表，请参阅客户活动参考。

自定义元像素

!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');

// replace YOUR_PIXEL_ID with the pixel ID provided by third-party
fbq('init', YOUR_PIXEL_ID);

// integrate third-party pixel tracking
analytics.subscribe("page_viewed", (event) => {
  fbq('track', 'PageView');
});

analytics.subscribe("product_viewed", (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

analytics.subscribe("search_submitted", (event) => {
  fbq('track', 'Search', {
    search_string: event.searchResult.query
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  fbq('track', 'AddToCart', {
    content_ids: [event.data?.cartLine?.merchandise?.productVariant?.id],
    content_name: event.data?.cartLine?.merchandise?.productVariant?.title,
    currency: event.data?.cartLine?.merchandise?.productVariant?.price?.currencyCode,
    value: event.data?.cartLine?.merchandise?.productVariant?.price.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  fbq('track', 'AddPaymentInfo');
});

analytics.subscribe("checkout_started", (event) => {
  fbq('track', 'InitiateCheckout');
});

analytics.subscribe("checkout_completed", (event) => {
  fbq('track', 'Purchase', {
    currency: event.data?.checkout?.currencyCode,
    value: event.data?.checkout?.totalPrice?.amount,
  });
});

准备好开始使用 Shopify 进行销售了吗？

免费试用