Tạo mã pixel tùy chỉnh

Thận trọng

Pixel tùy chỉnh là tính năng nâng cao yêu cầu kiến thức về JavaScript. Bạn chịu trách nhiệm về việc tuân thủ luật pháp hiện hành, sự đồng ý, bảo mật mã, khắc phục sự cố và cập nhật. Các pixel phải tuân thủ Điều khoản dịch vụ của Shopify.

Shopify không hỗ trợ thêm và sử dụng pixel tùy chỉnh. Nếu cần trợ giúp thêm hoặc sử dụng pixel tùy chỉnh, bạn có thể thuê Đối tác của Shopify.

Trang này bao gồm hướng dẫn tạo mã pixel tùy chỉnh cho pixel của bên thứ ba, nhờ đó có thể theo dõi các sự kiện cụ thể của khách hàng. Sau khi tạo mã cho pixel tùy chỉnh, bạn có thể thêm pixel vào cửa hàng Shopify.

Lưu ý

Trước khi tạo pixel tùy chỉnh, bạn nên xem xét các ứng dụng có sẵn để cải thiện độ ổn định, bảo mật và hiệu suất. Tuy nhiên, nếu không có ứng dụng nào đáp ứng nhu cầu, bạn có thể tạo pixel tùy chỉnh.

Chuẩn bị tạo pixel tùy chỉnh

Trước khi tạo pixel tùy chỉnh, hãy xem lại thông tin sau để đảm bảo đã hiểu cách cấu hình pixel:

• Rủi ro liên quan đến pixel.
• Hạn chế của sandbox pixel Shopify.
• Sử dụng API sandbox pixel Shopify.
• Lược đồ theo dõi sự kiện của khách hàng.

Khi thêm pixel tùy chỉnh, bạn cần chỉ định các thông tin sau:

• Pixel JavaScript của bên thứ ba.
• Các sự kiện hành vi muốn theo dõi.
• Cài đặt đồng ý về quyền riêng tư của khách hàng.

Tạo mã cho pixel tùy chỉnh

Phát triển doanh nghiệp

Đây là hướng dẫn nâng cao và không được Shopify hỗ trợ. Nếu cần trợ giúp thêm pixel tùy chỉnh, bạn có thể thuê Đối tác của Shopify.

Việc tạo mã cho pixel tùy chỉnh bao gồm các bước sau:

1. Chuẩn bị SDK Javascript của bên thứ ba.
2. Cấu hình pixel để theo dõi sự kiện của khách hàng.
3. Cấu hình cài đặt đồng ý về quyền riêng tư của khách hàng cho pixel.

Chuẩn bị SDK Javascript của bên thứ ba

Dịch vụ của bên thứ ba cung cấp mã được tích hợp với pixel. Một pixel thường có 2 thành phần: SDK Javascript và mã theo dõi. Cần xóa mọi HTML trong mã dịch vụ của bên thứ ba vì sandbox pixel Shopify chỉ hỗ trợ JavaScript.

Đây là ví dụ về Meta pixel. Các pixel sẽ hơi khác nhau tùy thuộc vào bên thứ ba.

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

Sau khi xóa HTML khỏi mã của Meta, bạn sẽ còn lại SDK pixel của Meta và mã để khởi tạo. Mã theo dõi sự kiện PageView cũng đã bị xóa vì mã này sẽ được thêm ở bước tiếp theo.

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

SDK pixel của Meta không tự động truyền dữ liệu từ pixel tùy chỉnh Shopify. Để truyền dữ liệu, bạn cần đăng ký sự kiện.

Bạn có thể gặp các pixel được tải bằng script src=. HTML không được hỗ trợ trong pixel của Shopify, do đó bạn cần thay thế script src= bằng mã JavaScript tương đương.

Sau đây là mẫu pixel Google Analytics tải bằng script src=:

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

Có thể thay thế phần script src= bằng mã JavaScript tương đương. Luôn đảm bảo thuộc tính src khớp với phiên bản 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 pixel của Google không tự động truyền dữ liệu từ pixel tùy chỉnh Shopify. Để truyền dữ liệu, bạn cần đăng ký sự kiện.

Theo dõi sự kiện của khách hàng

Sau khi tải và khởi tạo SDK của pixel, bạn cần truyền các sự kiện vào đó để theo dõi. Việc này được thực hiện bằng cách đăng ký sự kiện, sau đó truyền dữ liệu sự kiện vào SDK của pixel để dịch vụ bên thứ ba xử lý.

Đăng ký sự kiện tiêu chuẩn

Shopify cung cấp bộ sự kiện tiêu chuẩn, giúp dễ dàng đảm bảo pixel đang thu thập đúng dữ liệu cần thiết.

Bạn có thể đăng ký sự kiện bằng Shopify Pixels Extension API. Bạn sẽ cần chèn mã pixel của bên thứ ba vào cùng với sự kiện đang đăng ký.

Đây là ví dụ về sự kiện PageView cho Meta pixel. Lưu ý rằng fbq("track") là một phần trong mã của Meta và mỗi công ty sẽ có phiên bản riêng mà bạn cần tham khảo tài liệu của họ.

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

Một số sự kiện có siêu dữ liệu mà bạn có thể truyền vào pixel. Đây là ví dụ về việc truyền một số chi tiết sản phẩm vào sự kiện ViewContent của Meta:

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

Đăng ký sự kiện tùy chỉnh của khách hàng

Nếu muốn theo dõi các sự kiện bổ sung của khách hàng, chẳng hạn như khi ai đó nhấp vào nút, bạn có thể thêm các sự kiện tùy chỉnh của khách hàng. Có thể đăng ký sự kiện tùy chỉnh theo cách tương tự sự kiện tiêu chuẩn. Hãy khai báo tên sự kiện muốn đăng ký và truyền thông tin đó đến pixel của nhà cung cấp dịch vụ bên thứ ba.

Đây là ví dụ về cách một sự kiện tùy chỉnh đã xuất bản có thể hiển thị trong tệp liquid của chủ đề:

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

Đây là ví dụ về cách bạn có thể cấu hình pixel để đăng ký sự kiện tùy chỉnh đó:

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

Để biết thêm thông tin về sự kiện tùy chỉnh, hãy tham khảo Tài liệu dành cho nhà phát triển Shopify.

Cấu hình cài đặt sự đồng ý và bán dữ liệu

Lưu ý

Bạn chịu trách nhiệm tuân thủ quyền riêng tư của chính mình và nên tham khảo ý kiến cố vấn pháp lý để xác định luật pháp tại khu vực của bạn cũng như khu vực bạn bán hàng có thể ảnh hưởng đến doanh nghiệp như thế nào. Để bán sản phẩm trên nền tảng Shopify, bạn phải tuân thủ luật pháp thuộc phạm vi quyền hạn của doanh nghiệp và khách hàng, Điều khoản dịch vụ của Shopify, Chính sách về việc sử dụng chấp nhận được của Shopify và bất kỳ chính sách áp dụng nào khác. Tìm hiểu thêm về quyền riêng tư của khách hàng.

Ở những thị trường được cấu hình yêu cầu sự đồng ý, chẳng hạn như Khu vực Kinh tế châu Âu (EEA) và Vương quốc Anh, web pixel chỉ chạy khi khách truy cập trang web đã cấp các quyền cần thiết trong cấu hình pixel.

Theo mặc định, pixel tùy chỉnh mới yêu cầu quyền Tiếp thị và Phân tích. Bạn có thể tùy chỉnh các quyền cần thiết trong phần Quyền riêng tư của khách hàng > Quyền ở chi tiết pixel tùy chỉnh.

Tương tự, pixel được cấu hình là bán dữ liệu sẽ không chạy đối với những khách hàng đã chọn không tham gia chia sẻ hoặc bán dữ liệu, trừ khi pixel hỗ trợ việc sử dụng dữ liệu hạn chế. Theo mặc định, pixel tùy chỉnh mới đủ điều kiện là bán dữ liệu. Bạn có thể tùy chỉnh liệu dữ liệu thu thập được có đủ điều kiện là bán dữ liệu hay không trong phần Quyền riêng tư của khách hàng > Bán dữ liệu ở chi tiết pixel tùy chỉnh.

Nhà phát triển pixel tùy chỉnh có thể tìm hiểu thêm về cách thu thập và đăng ký sự đồng ý.

Mỗi pixel có thể có tên khác nhau cho từng mục đích. Bạn nên tham khảo tài liệu về pixel của bên thứ ba để hiểu cách đối chiếu với định nghĩa của Shopify.

Ví dụ: dưới đây là cách đối chiếu mục đích Tiếp thị và Phân tích với Chế độ đồng ý của Google:

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

Ví dụ về pixel tùy chỉnh

Dưới đây là ví dụ về mã của Meta pixel. Mã pixel thay đổi tùy theo nhà cung cấp dịch vụ bên thứ ba và sự kiện bạn muốn theo dõi. Tham khảo tài liệu về sự kiện khách hàng để biết danh sách sự kiện có sẵn.

Ví dụ về Meta pixel tùy chỉnh

!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,
  });
});