帮助
登录

创建自定义像素代码

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

在本页

准备创建自定义像素代码

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

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

  • 第三方 JavaScript 像素代码。
  • 您要跟踪的行为事件。
  • 客户隐私同意设置。

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

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

  1. 准备第三方 JavaScript SDK。
  2. 配置您的像素代码以跟踪客户事件。
  3. 为您的像素代码配置客户隐私的同意设置。

准备第三方 JavaScript SDK

您正在使用的第三方服务会为您提供与像素代码集成的代码。像素代码通常包含两个部分：一个 JavaScript SDK 和跟踪代码。由于 Shopify 像素代码沙盒仅支持 JavaScript，因此需要删除第三方服务代码中的任何 HTML。

以下是 Meta 像素代码的示例。不同第三方的像素代码会略有不同。

​​<!-- 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 -->

从 Meta 的代码中删除 HTML 后，您将剩下 Meta 的像素代码 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 的像素代码 SDK 不会自动从 Shopify 自定义像素代码传输数据。若要传输数据，您需要订阅事件。

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

以下是使用 script src= 加载的 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 的像素代码 SDK 不会自动从 Shopify 自定义像素代码传输数据。要传输数据，您需要订阅事件。

跟踪客户事件

加载并初始化像素代码的 SDK 后，您需要将事件传递给它以进行跟踪。这可以通过订阅事件，然后将事件数据传递到像素代码的 SDK 中，以供第三方服务处理来完成。

订阅标准事件

Shopify 提供一组标准事件，可让您轻松确保像素代码正在收集所需的数据。

您可以使用 Shopify Pixels Extension API 订阅事件。您需要将第三方像素代码与您要订阅的事件放在一起。

这是 Meta 像素代码的 PageView 事件示例。请注意，fbq("track") 是 Meta 代码的一部分，每家公司都有自己的版本，您需要参考其文档。

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

某些事件包含可传递到像素代码中的元数据。以下是将一些产品详细信息传递到 Meta 的 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 开发人员文档。

在配置为需要同意声明的市场（例如欧洲经济区 (EEA) 和英国），只有在网站访客提供了像素代码配置中要求的权限后，网页像素代码才会运行。

默认情况下，新的自定义像素代码需要营销和分析权限。您可以在自定义像素代码详细信息的客户隐私 > 权限部分自定义所需权限。

同样，对于已选择不出售或共享数据的客户，配置为数据销售的像素代码将不会运行，除非该像素代码支持有限数据使用。默认情况下，新的自定义像素代码符合数据销售的条件。您可以在自定义像素代码详细信息的客户隐私 > 数据销售部分中自定义收集的数据是否符合数据销售的条件。

自定义像素代码的开发人员可以详细了解如何收集和登记同意声明。

每个像素代码对于每种用途的名称可能不同。您应查阅第三方像素代码的文档，以了解它如何映射到 Shopify 的定义。

例如，以下是营销和分析用途映射到 Google 的“用户意见征求模式”的方式：

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

自定义像素代码示例

下方是 Meta 像素代码的代码示例。像素代码因第三方服务提供商和您要跟踪的事件而异。有关可用事件的列表，请参阅客户事件参考。

自定义 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,
  });
});