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

Trang này được in vào Apr 20, 2024. Để lấy phiên bản hiện tại, vui lòng truy cập https://help.shopify.com/vi/manual/promoting-marketing/pixels/custom-pixels/code.

Trang này cung cấp hướng dẫn tạo mã pixel tùy chỉnh cho pixel bên thứ ba để bạn có thể theo dõi sự kiện khách hàng cụ thể. 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.

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 các thông tin sau để đảm bảo bạn hiểu cách định cấu hình pixel:

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

Pixel JavaScript của bên thứ ba
sự kiện hành vi bạn muốn theo dõi

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

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

Chuẩn bị SDK Javascript của bên thứ ba.
Định cấu hình pixel để theo dõi sự kiện khách hàng.

Chuẩn bị Javascript SDK bên thứ ba

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

Đây là ví dụ về Meta pixel. Pixel của bên thứ ba này sẽ hơi khác so với pixel của bên thứ ba khác.

<!-- 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ã Meta, bạn sẽ có mã và pixel SDK của Meta để khởi tạo. Mã theo dõi sự kiện PageView cũng đã bị xóa vì sẽ được thêm trong 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);

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

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

Đây là pixel Google Analytics mẫu:

<!-- 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ế script src= bằng 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');

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

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

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

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

Bạn có thể theo dõi sự kiện bằng API phần mở rộng Pixel của Shopify. Bạn cần đặt mã pixel của bên thứ ba vào sự kiện bạn đang theo dõi.

Đây là ví dụ về sự kiện PageView dành cho pixel của Meta. Lưu ý rằng fbq("track") là một phần của mã Meta và mỗi công ty sẽ có phiên bản riêng của mã này mà bạn cần tham khảo tài liệu về 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ề 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,
  });
});

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

Đây là ví dụ về cách hiển thị một sự kiện tùy chỉnh đã đăng trong các 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 định 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, tham khảo tài liệu dành cho nhà phát triển của Shopify.

Pixel web chỉ chạy sau khi khách truy cập đưa ra sự chấp thuận đối với mục đích Tiếp thị và Phân tích tại các thị trường mà bạn yêu cầu phải có sự chấp thuận được định cấu hình. 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 để tìm hiểu cách pixel ánh xạ đến định nghĩa của Shopify.

Ví dụ: Sau đây là cách mục đích Tiếp thị và Phân tích ánh xạ đến 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ã cho pixel Meta. Mã pixel sẽ thay đổi tùy theo nhà cung cấp dịch vụ bên thứ ba và sự kiện mà bạn muốn theo dõi. Xem tài liệu tham khảo về sự kiện dành cho khách hàng để biết danh sách sự kiện có sẵn.

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

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

Trên trang này

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

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

Chuẩn bị Javascript SDK bên thứ ba

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

Đăng ký theo dõi sự kiện tiêu chuẩn

Đăng ký theo dõi sự kiện khách hàng tùy chỉnh

Định cấu hình sự chấp thuận

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

Pixel Meta tùy chỉnh

Bạn đã sẵn sàng bán hàng với Shopify?