Meta Pixel

Nâng cao

Bí quyết thực hiện cách triển khai thay thế, sử dụng Pixel với các ứng dụng web một trang và theo dõi chuyển đổi với số lượt click vào nút và cuộn trang.

Quy định chung về bảo vệ dữ liệu

Nếu bạn tiến hành kinh doanh ở các quốc gia áp dụng Quy định chung về bảo vệ dữ liệu (GDPR), vui lòng tham khảo tài liệu về GDPR của chúng tôi để tìm hiểu cách tuân thủ.

Cài đặt Pixel bằng thẻ IMG

Mặc dù có thể dùng thẻ IMG để cài đặt Pixel, nhưng bạn nên tham khảo Hướng dẫn triển khai của chúng tôi để biết giải pháp thay thế.

Nếu cần cài đặt Pixel bằng cách triển khai mà không tiêu tốn nhiều dung lượng, bạn có thể cài đặt bằng một thẻ <img>. Để thực hiện việc này, hãy thêm mã dưới đây vào giữa thẻ <noscript> mở và đóng trong phần tiêu đề hoặc nội dung của trang web, sau đó thay {pixel-id} bằng ID pixel của bạn và thay {standard-event} bằng một Sự kiện tiêu chuẩn.

<img src="https://www.facebook.com/tr?id=&#123;pixel-id&#125;&amp;ev=&#123;standard-event&#125;" height="1" width="1" style="display:none"/>

Các pixel được cài đặt bằng thẻ <img> cũng hỗ trợ các thông số mà bạn có thể đưa vào chuỗi truy vấn của mình. Ví dụ:

<img src="https://www.facebook.com/tr?id=12345
  &amp;ev=ViewContent
  &amp;cd[content_name]=ABC%20Leather%20Sandal
  &amp;cd[content_category]=Shoes
  &amp;cd[content_type]=product
  &amp;cd[content_ids]=1234
  &amp;cd[value]=0.50
  &amp;cd[currency]=USD" height="1" width="1" style="display:none"/>

Giới hạn

  • Không thể kích hoạt nhiều lần trong mỗi lần tải trang
  • Không thể theo dõi các sự kiện tiêu chuẩn hoặc sự kiện tùy chỉnh được kích hoạt bằng hoạt động tương tác với giao diện người dùng (ví dụ: lượt click vào nút)
  • Tuân theo giới hạn HTTP GET khi gửi dữ liệu tùy chỉnh hoặc URL dài
  • Không thể tải không đồng bộ

Ví dụ về trường hợp cài đặt bằng thẻ IMG

Dưới đây là ví dụ về trường hợp dùng thẻ IMG để cài đặt Meta Pixel trên các trang chính của trang web giả định bằng ID Pixel (12345) và thông số tùy chỉnh giả định (ví dụ: cd[currency]=USD).

Trên trang sản phẩm, một Pixel để theo dõi sự kiện PageView, còn một pixel khác để theo dõi sự kiện ViewContent:

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/> 
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=ViewContent"/>

Trên trang thêm vào giỏ hàng, một Pixel để theo dõi sự kiện PageView, còn một pixel khác để theo dõi sự kiện AddToCard có dữ liệu tùy chỉnh:

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/> 
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=AddToCart&cd[currency]=USD&cd[value]=0.00"/>

Trên trang mua hàng, một Pixel để theo dõi sự kiện PageView, còn một pixel khác để theo dõi sự kiện Purchase có dữ liệu về giao dịch mua:

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/> 
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=Purchase&cd[currency]=USD&cd[value]=0.00"/>

Pixel IMG đo lường sự kiện tổng hợp dành cho iOS 14.5 trở lên

Đo lường sự kiện tổng hợp của Meta là giao thức có chức năng đo lường sự kiện trên web và sự kiện trong ứng dụng từ những người dùng thiết bị iOS 14.5 trở lên. Bạn có thể sử dụng phương pháp mô hình hóa thống kê. Phương pháp này được thiết kế nhằm mang đến cái nhìn toàn diện hơn về kết quả khi dữ liệu bị thiếu hoặc chỉ có một phần.

Nếu dùng thẻ Pixel IMG, bạn nên làm theo phần Cài đặt Pixel bằng thẻ IMG trong tài liệu này. Nếu không, hãy làm theo Hướng dẫn về cách triển khai của chúng tôi.

Thiếu dữ liệu về Pixel IMG

JavaScript thời gian chạy

Nếu bạn thiết lập Pixel IMG bằng JavaScript thời gian chạy để tạo lớp hình ảnh JavaScript mà không thêm lớp Hình ảnh đó vào cây DOM của trang web, chẳng hạn như khi sử dụng thư viện JavaScript của bên thứ ba để gửi Pixel IMG, bạn sẽ phải thêm mã sau đây thì Meta mới nhận được dữ liệu về Pixel IMG của bạn.

var nativeBridge = window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.receiveImgPixel;
if (nativeBridge) {
    const postObj = {
        id: {pixel-id},
        ev: {standard-event},
        cd: {stringified-custom-data},
        dpo: {data-processing-options},          // Optional CCPA param
        dpoco: {data-processing-option-country}, // Optional CCPA param
        dpost: {data-processing-option-state},   // Optional CCPA param
    };
    nativeBridge.postMessage(JSON.stringify(postObj));
}

Thuộc tính hộp cát

Nếu đặt Pixel IMG vào trong iframe có thuộc tính sandbox, bạn phải thêm giá trị allow-scripts thì Facebook mới nhận được dữ liệu về Pixel IMG của bạn.

Bật AEM cho các tình huống tự động chuyển hướng

Chúng tôi đã mở rộng chức năng AEM để xem xét những lượt chuyển đổi từ mọi trang web liên kết với nhà quảng cáo, tại đó các sự kiện Pixel được tối ưu hóa của nhà quảng cáo được kích hoạt (như trong những tình huống cụ thể mà nhà quảng cáo có thể dùng công cụ rút gọn URL hoặc lệnh chuyển hướng dựa trên vị trí địa lý, có thể phục vụ nhiều ngành kinh doanh hoặc sử dụng agency để chạy quảng cáo). Nếu bạn không thuộc một trong các tình huống trên và muốn bật AEM, bạn nên thực hiện như sau:

  • Sử dụng cùng một Meta Pixel (tức là cùng ID Pixel và cặp tên sự kiện Pixel) trên các miền phù hợp mà nhà quảng cáo muốn nhận lượt chuyển đổi
  • Đảm bảo rằng các sự kiện AEM bạn muốn nhận lượt chuyển đổi được ưu tiên trên các miền này

Theo dõi số lần nhấp vào nút

Sau khi khách truy cập nhấp vào một nút, mã JavaScript của Meta Pixel sẽ tự động dò tìm và chuyển các trường liên quan trong mẫu cho Meta.

Giả sử bạn có một trang web thương mại điện tử và nút "Thêm vào giỏ hàng" không chuyển hướng đến một trang mới. Vậy thì, bạn nên kích hoạt một sự kiện khi nút này được nhấp.

Trong ví dụ này, chúng tôi sẽ kích hoạt sự kiện tiêu chuẩn ViewContent khi tải trang. Khi một ai đó nhấp vào nút "Thêm vào giỏ hàng", chúng tôi sẽ kích hoạt sự kiện tiêu chuẩn AddToCart.

Để thực hiện việc này, trước tiên, hãy tải mã Meta Pixel mà bạn muốn kích hoạt khi tải trang:

<!-- Facebook Pixel Code --> <script> fbq('track', 'ViewContent', { content_name: 'Really Fast Running Shoes', content_category: 'Apparel & Accessories > Shoes', content_ids: ['1234'], content_type: 'product', value: 0.50, currency: 'USD' }); </script> <!-- End Facebook Pixel Code -->

Sau đó, hãy kích hoạt AddToCart khi tải trang mới hoặc khi nhấp vào nút Thêm vào giỏ hàng. Có nhiều cách để xử lý số lần nhấp vào nút. Dưới đây là ví dụ về cách thêm eventListener vào một nút.

<!-- Somewhere there is a button that performs Add to Cart --> <button id="addToCartButton">Add To Cart</button> <!-- Add Pixel Events to the button's click handler --> <script type="text/javascript"> var button = document.getElementById('addToCartButton'); button.addEventListener( 'click', function() { fbq('track', 'AddToCart', { content_name: 'Really Fast Running Shoes', content_category: 'Apparel & Accessories > Shoes', content_ids: ['1234'], content_type: 'product', value: 4.99, currency: 'USD' }); }, false ); </script>

Có nhiều cách để xử lý các sự kiện click. Hãy đảm bảo bạn luôn gọi hàm fbq sau khi nhấp.

Tùy vào cách bạn triển khai Pixel, Trình trợ giúp pixel có thể hiển thị lỗi trước khi bạn nhấp vào nút. Bạn có thể nhấp vào nút để xác minh rằng Pixel của mình đang kích hoạt đúng cách. Khi đó, trình trợ giúp sẽ không bị lỗi.

Kích hoạt sự kiện dựa trên chế độ hiển thị

Đối với ví dụ này, giả sử bạn có blog và muốn theo dõi những người đã đọc toàn bộ bài viết nào đó. Họ không thực hiện hành động nào ngoài việc cuộn đến cuối trang.

Dưới đây là HTML mẫu của một trang tải Pixel:

<!DOCTYPE html> <html> <head> <!-- Facebook 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', '<FB_PIXEL_ID>'); fbq('track', "PageView"); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=<FB_PIXEL_ID>&ev=PageView&noscript=1" /></noscript> <!-- End Facebook Pixel Code --> </head> <body> <h1>Scroll Page until the Lead event is fired</h1> <div style="height: 120vh; width: 100vw; background-color: #00f;"></div> <h1 id="fb-fire-pixel">Lead event will fire when this phrase enters the screen</h1> <div style="height: 120vh; width: 100vw; background-color: #000;"></div> </body> </html>

Khi thành phần h1 có id=fb-fire-pixel hiển thị, chúng tôi sẽ kích hoạt sự kiện tiêu chuẩn Lead. Để xác minh một thành phần hiển thị trên màn hình, chúng tôi thêm mã sau đây vào trang:

// This code should be loaded together with Meta Pixel

var executeWhenElementIsVisible = function(dom_element, callback) {

  if (!(dom_element instanceof HTMLElement)) {
    console.error('dom_element must be a valid HTMLElement');
  }

  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }

  function isOnViewport(elem) {
    var rect = elem.getBoundingClientRect();
    var docElem = document.documentElement;
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || docElem.clientHeight) &&
      rect.right <= (window.innerWidth || docElem.clientWidth)
    );
  }

  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && isOnViewport(dom_element)) {
        wasExecuted = true;
        callback();
      }
    };
  })();

  window.addEventListener('scroll', executeCallback, false);
};

Sau đó, chúng tôi cần xác định cách kích hoạt Pixel khi thành phần đó hiển thị trên màn hình:

// Get the element that should be visible to trigger the pixel fire
var element = document.getElementById('fb-fire-pixel');

// Then, set the event to be tracked when element is visible
// Note that second parameter is a function, not a function call
executeWhenElementIsVisible(element, function() {
  fbq('track', 'Lead');
});

Kích hoạt sự kiện dựa trên độ dài hoặc phần trăm trang

Đối với ví dụ này, giả sử bạn muốn theo dõi những người đã đọc tới một độ dài hoặc phần trăm trang nào đó. Họ không thực hiện hành động nào ngoài việc cuộn đến độ dài hoặc phần trăm trang mong muốn.

Ví dụ đầu tiên này là để theo dõi độ dài trang mà người dùng đã đọc. Trong ví dụ này, chúng tôi sẽ kích hoạt Pixel khách hàng tiềm năng khi người dùng đã đọc đến 500px độ dài trang.

var executeWhenReachedPageLength = function(length, callback) {
  if (typeof length !== 'number') {
    console.error(
      'First parameter must be a number, got',
      typeof length,
      'instead',
    );
  }

  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }

  function getWindowLength() {
    return window.innerHeight || 
      (document.documentElement || document.body).clientHeight;
  }

  function getCurrentScrolledLengthPosition() {
   return window.pageYOffset || 
     (document.documentElement || document.body.parentNode || document.body).scrollTop;
  }

  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && getCurrentScrolledLengthPosition() > length) {
        wasExecuted = true;
        callback();
      }
    };
  })();

  if (getWindowLength() >= length) {
    callback();
  } else {
    window.addEventListener('scroll', executeCallback, false);
  }
};

executeWhenReachedPageLength(10, function() {
  fbq('track', 'Lead');
});

Ví dụ thứ hai này là để theo dõi phần trăm trang mà người dùng đã đọc. Trong ví dụ này, chúng tôi sẽ kích hoạt Pixel khách hàng tiềm năng khi người dùng đã đọc 75% trang.

var executeWhenReachedPagePercentage = function(percentage, callback) {
  if (typeof percentage !== 'number') {
    console.error(
      'First parameter must be a number, got',
      typeof percentage,
      'instead',
    );
  }

  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }

  function getDocumentLength() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    )
  }

  function getWindowLength() {
    return window.innerHeight || 
      (document.documentElement || document.body).clientHeight;
  }

  function getScrollableLength() {
    if (getDocumentLength() > getWindowLength()) {
      return getDocumentLength() - getWindowLength();
    } else {
      return 0;
    }
  }

  var scrollableLength = getScrollableLength();

  window.addEventListener("resize", function(){
    scrollableLength = getScrollableLength();
  }, false)

  function getCurrentScrolledLengthPosition() {
   return window.pageYOffset || 
     (document.documentElement || document.body.parentNode || document.body).scrollTop;
  }

  function getPercentageScrolled() {
    if (scrollableLength == 0) {
      return 100;
    } else {
      return getCurrentScrolledLengthPosition() / scrollableLength * 100;
    }
  }

  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && getPercentageScrolled() > percentage) {
        wasExecuted = true;
        callback();
      }
    };
  })();

  if (getDocumentLength() == 0 ||
    (getWindowLength()/getDocumentLength() * 100 >= percentage)) {
    callback();
  } else {
    window.addEventListener('scroll', executeCallback, false);
  }
};

executeWhenReachedPagePercentage(75, function() {
  fbq('track', 'Lead');
});

Trì hoãn kích hoạt Pixel

Giả sử bạn muốn theo dõi những người dùng tương tác với trang web của mình một vài giây trước khi kích hoạt một sự kiện Pixel. Bạn có thể thực hiện việc này bằng hàm setTimeout.

// Delay pixel fire by 3 seconds
var seconds = 3;
setTimeout(function() {
  fbq('track', 'Lead');
}, seconds * 1000);

Bạn có thể sử dụng hàm này để theo dõi những lượt truy cập trang và “có tương tác” – Đây là những người không rời đi quá nhanh mà thực sự đã đọc nội dung.

Kích hoạt sự kiện dựa trên các bài viết được xem mỗi phiên

Nếu muốn biết những ai đã xem một số bài viết nhất định trong trang web của mình, bạn có thể dùng bộ đếm phiên và tải mã Meta Pixel khi sự kiện này xảy ra.

Phiên là một nhóm các hoạt động mà người dùng tương tác với trang web của bạn, trong một khung thời gian nhất định vào mỗi lần truy cập. Bạn có thể tăng số lượt xem trang nếu biết được khung thời gian diễn ra các hoạt động của người dùng.

Giả sử bạn có biến sessionCountViews trên mỗi site_request, bạn có thể thêm mã Meta Pixel dựa theo số lượt xem trang đã đếm được.

Ví dụ chỉ đếm lượt đã xem đến bài viết thứ 6

if (site_request.sessionCountViews == 6) {
  fbq('track', "ViewContent", {
    sessionCountViews: site_request.sessionCountViews,
  });
}

Theo dõi sự kiện chọn lọc bằng nhiều Pixel

Nếu bạn có nhiều Pixel trên cùng một trang và muốn kích hoạt có chọn lọc các sự kiện trên từng Pixel duy nhất, bạn nên sử dụng chức năng trackSingle và trackSingleCustom.

Việc sử dụng hàm track trên các trang có nhiều Pixel được khởi tạo (bằng nhiều mã cơ sở hay thậm chí là kết hợp trong một mã cơ sở) có thể dẫn đến hành vi kích hoạt quá mức hoặc ngoài dự kiến. Bạn chỉ nên áp dụng hàm này trong những tình huống cụ thể.

Ví dụ về trường hợp chúng tôi kích hoạt sự kiện PageView trên cả hai Pixel đã khởi tạo và kích hoạt có chọn lọc một Sự kiện tiêu chuẩn (Purchase) trên một Pixel và một Sự kiện tùy chỉnh trên Pixel thứ hai.

fbq('init', '<PIXEL_A>');
fbq('init', '<PIXEL_B>');
fbq('track', 'PageView'); //fire PageView for both initialized pixels

// only fire the Purchase event for Pixel A
fbq('trackSingle', '<PIXEL_A>', 'Purchase', {
      value: 4,
      currency: 'GBP',
});

// only fire the custom event Step4 for Pixel B
fbq('trackSingleCustom', '<PIXEL_B>', 'Step4',{
  //optional parameters
});

Theo dõi sự kiện cho các Pixel riêng lẻ

Trong các trường hợp đặc biệt, bạn chỉ nên gửi sự kiện đến một trong các Pixel được cài đặt trên trang web của mình; chẳng hạn như nhằm mục đích hạn chế gửi dữ liệu đến một trong các Pixel trên trang web đó. Các phương thức này sẽ theo dõi số lượt kích hoạt Pixel cho một Pixel đơn lẻ. Sau đây là các lệnh gọi tương ứng:

fbq('trackSingle', 'FB_PIXEL_ID', 'Purchase', customData);
fbq('trackSingleCustom', 'FB_PIXEL_ID', 'CustomEvent', customData);

Cấu hình tự động

Meta Pixel sẽ gửi siêu dữ liệu về số lượt click vào nút và siêu dữ liệu trang (ví dụ: dữ liệu được cấu trúc theo định dạng Opengraph hoặc Schema.org) từ trang web để cải thiện khả năng phân phối cũng như đo lường quảng cáo và để tự động thiết lập Pixel. Để đặt cấu hình sao cho Meta Pixel không gửi thông tin bổ sung này, hãy thêm dòng fbq('set', 'autoConfig', 'false', 'FB_PIXEL_ID') ở phía trên lệnh gọi init trong mã Cơ sở Meta Pixel.

<!-- Facebook 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'); 
// Line to enable Manual Only mode.
fbq('set', 'autoConfig', false, 'FB_PIXEL_ID'); 
//Insert Your Facebook Pixel ID below. 
fbq('init', 'FB_PIXEL_ID'); 
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none"src="https://www.facebook.com/tr?id=FB_PIXEL_ID&amp;ev=PageView&amp;noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

Chính sách bảo mật nội dung

Nếu trang web có Chính sách bảo mật nội dung, bạn nên cho phép JavaScript tải từ https://connect.facebook.net. Lưu ý: Pixel sẽ tải các tập lệnh từ 2 đường dẫn: /en_US/fbevents.js và /signals/config/{pixelID}?v={version}.