添加自定义像素代码

如果没有应用可跟踪您要收集数据的特定客户活动,则您可以添加在宽松沙盒环境中运行的自定义像素代码。

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

  • 第三方 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);

您可能会遇到使用 script src= 加载的像素代码。Shopify 的像素代码中不支持 HTML,因此您需要将其替换为 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');

订阅标准活动

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

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

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

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

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

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

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
  });
});

添加自定义像素代码

在添加自定义像素代码之前,请删除任何现有像素代码,以确保不会将客户活动计算两次。应在存在现有像素代码的任何位置删除这些像素代码,例如 theme.liquidcheckout.liquid(仅适用于 Plus 商家)和其他结账脚本。

  1. 在 Shopify 后台中,转到设置 > 客户活动
  2. 为像素代码提供唯一的名称。如果您输入已存在的自定义像素代码的名称,系统会提示您为像素代码提供其他名称。
  3. 点击添加像素代码以打开活动编辑器。
  4. 将第三方 JavaScript 像素代码粘贴到代码窗口中。
  5. 相应架构中添加要跟踪的活动
  6. 可选:点击更多操作以编辑您的像素代码名称,或查看有关聘请 Shopify 专家的信息以获取自定义像素代码方面的帮助。
  7. 点击保存以保存自定义像素代码。如果您现在已准备好连接自定义像素代码,则可以点击连接像素代码来开始跟踪活动。

连接自定义像素代码

添加自定义像素后,您需要将像素代码连接到您的商店。

  1. 在 Shopify 后台的“客户活动”页面中,点击自定义像素代码
  2. 当前未连接的自定义像素代码会显示在断开连接的像素代码标题下。在相应的自定义像素代码行上点击连接
  3. 查看 Shopify 服务条款。如果您的像素代码满足服务要求,请点击连接

自定义像素代码示例

自定义元像素代码

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

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

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

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

analytics.subscribe("product_added_to_cart", event => {
  fbq('track', 'AddToCart', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

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

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

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

将自定义像素代码断开连接

如果您想停止跟踪添加了自定义像素代码的活动,则需要手动将像素代码与您的在线商店断开连接。

步骤:

  1. 在 Shopify 后台的“客户活动”页面中,点击自定义像素代码
  2. 当前连接的自定义像素代码会显示在自定义像素代码列表的顶部。在相应的自定义像素代码行上点击断开连接。断开像素代码连接不会删除像素代码。

删除自定义像素代码

您可以删除不再需要的自定义像素代码。

步骤:

  1. 在 Shopify 后台的“客户活动”页面中,点击自定义像素代码
  2. 在相应的自定义像素代码行上点击 ... 按钮。
  3. 点击删除。确认删除,自定义像素代码将从像素代码管理器中删除。

删除自定义像素代码的操作无法撤销,因此请确保删除相应的像素代码。

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

免费试用