创建自定义像素代码
此页面包含为第三方像素代码创建自定义像素代码的说明,目的是让您可以跟踪特定的客户事件。为自定义像素代码创建代码后,您可以将该像素代码添加到 Shopify 商店。
准备创建自定义像素代码
在创建自定义像素代码之前,请查看以下信息,确保您了解如何配置像素代码:
添加自定义像素代码时,请指定以下信息:
- 第三方 JavaScript 像素代码
- 您要跟踪的行为活动
为自定义像素代码创建代码
为自定义像素代码创建代码涉及以下步骤:
- 准备第三方 JavaScript SDK
- 配置像素代码以跟踪客户事件。
准备第三方 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);
您可能会遇到使用 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", 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 开发者文档。
自定义像素代码示例
以下是一个完整像素代码的代码示例。像素代码将因第三方服务提供方以及您想要跟踪的事件而异。
自定义元像素代码
!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", 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,
});
});
analytics.subscribe("search_submitted", async (event) => {
fbq('track', 'Search', {
search_string: event.searchResult.query
});
});
analytics.subscribe("product_added_to_cart", async (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", async (event) => {
fbq('track', 'AddPaymentInfo');
});
analytics.subscribe("checkout_started", async (event) => {
fbq('track', 'InitiateCheckout');
});
analytics.subscribe("checkout_completed", async (event) => {
fbq('track', 'Purchase', {
currency: event.checkout.currencyCode,
value: event.checkout.totalPrice.amount,
});
});