Thêm pixel tùy chỉnh

Nếu không có ứng dụng để theo dõi các sự kiện khách hàng cụ thể mà bạn muốn thu thập dữ liệu, bạn có thể thêm pixel tùy chỉnh chạy trong môi trường sandbox lax.

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

Chuẩn bị mã pixel của 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 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. Lưu ý rằng pixel của công ty này sẽ hơi khác so với pixel của công ty 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);

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ế 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 sau. 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');

Theo dõi sự kiện tiêu chuẩn

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", 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", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
  });
});

Thêm pixel tùy chỉnh

Trước khi thêm pixel tùy chỉnh, hãy xóa mọi pixel hiện có để đảm bảo sự kiện khách hàng không bị tính hai lần. Cần xóa mã pixel hiện có theo cách thủ công khỏi bất kỳ nơi nào mã tồn tại, ví dụ như theme.liquid, checkout.liquid (Chỉ dành cho thương nhân Plus) và trong các tập lệnh thanh toán khác.

  1. Trong trang quản trị Shopify, vào mục Cài đặt > Sự kiện khách hàng.
  2. Đặt tên duy nhất cho pixel. Nếu nhập tên pixel tùy chỉnh đã tồn tại, bạn sẽ được nhắc đặt tên khác cho pixel.
  3. Nhấp vào Thêm pixel để mở trình chỉnh sửa sự kiện.
  4. Dán pixel JavaScript của bên thứ ba vào cửa sổ .
  5. Thêm sự kiện bạn muốn theo dõi vào lược đồ phù hợp.
  6. Không bắt buộc: Nhấp vào Thao tác khác để chỉnh sửa tên pixel hoặc xem thông tin về việc thuê chuyên gia Shopify để được hỗ trợ với pixel tùy chỉnh.
  7. Nhấp vào Lưu để lưu pixel tùy chỉnh. Nếu bạn đã sẵn sàng kết nối pixel tùy chỉnh ngay, bạn có thể nhấp vào Kết nối pixel để bắt đầu theo dõi sự kiện.

Kết nối pixel tùy chỉnh

Sau khi thêm pixel tùy chỉnh, bạn cần kết nối pixel với cửa hàng.

  1. Trong trang Sự kiện khách hàng của trang quản trị Shopify, nhấp vào Pixel tùy chỉnh.
  2. Pixel tùy chỉnh hiện chưa được kết nối sẽ hiển thị dưới tiêu đề Pixel đã ngắt kết nối. Nhấp vào Kết nối trên dòng pixel tùy chỉnh phù hợp.
  3. Xem lại Điều khoản dịch vụ của Shopify. Nếu pixel đáp ứng các yêu cầu dịch vụ, nhấp vào Kết nối.

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

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

Ngắt kết nối pixel tùy chỉnh

Nếu muốn ngừng theo dõi sự kiện bạn đã thêm pixel tùy chỉnh vào, bạn cần ngắt kết nối pixel theo cách thủ công khỏi cửa hàng trực tuyến.

Các bước thực hiện:

  1. Trong trang Sự kiện khách hàng của trang quản trị Shopify, nhấp vào Pixel tùy chỉnh.
  2. Pixel tùy chỉnh hiện đang kết nối sẽ hiển thị ở đầu danh sách pixel tùy chỉnh. Nhấp vào Ngắt kết nối trên dòng pixel tùy chỉnh phù hợp. Nếu ngắt kết nối pixel, pixel không bị xóa.

Xóa pixel tùy chỉnh

Bạn có thể xóa pixel tùy chỉnh mà bạn không cần nữa.

Các bước thực hiện:

  1. Trong trang Sự kiện khách hàng của trang quản trị Shopify, nhấp vào Pixel tùy chỉnh.
  2. Nhấp vào nút ... trên dòng pixel tùy chỉnh phù hợp.
  3. Nhấp vào Xóa. Xác nhận thao tác xóa và pixel tùy chỉnh sẽ bị xóa khỏi trình quản lý pixel.

Không thể hoàn tác thao tác xóa pixel tùy chỉnh, vì vậy hãy đảm bảo bạn xóa đúng pixel.

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

Dùng thử miễn phí