Hiển thị quảng cáo

Khi một phiên đấu giá Protected Audience trả về một quảng cáo đề xuất, quảng cáo đó có thể được trả về dưới dạng một URN không rõ ràng, được dùng để hiển thị quảng cáo trong iframe hoặc một FencedFrameConfig được dùng để hiển thị quảng cáo trong một khung được phân vùng.

Hướng dẫn này sẽ giải thích về khung được giới hạn và lý do cần có khung này, cũng như cách hiển thị quảng cáo bằng một trong hai phương thức. Để tìm hiểu kỹ hơn về fenced frame, hãy xem thêm thông tin trong hướng dẫn này hoặc trong đề xuất.

Khung bảo vệ là gì?

Khung được phân vùng (<fencedframe>) là một phần tử HTML cho nội dung được nhúng, tương tự như iframe. Không giống như iframe, khung được phân vùng hạn chế giao tiếp với ngữ cảnh nhúng để cho phép khung truy cập vào dữ liệu trên nhiều trang web mà không cần chia sẻ dữ liệu đó với ngữ cảnh nhúng. Tương tự, mọi dữ liệu của bên thứ nhất trong bối cảnh nhúng đều không thể chia sẻ với khung được giới hạn.

Ví dụ: giả sử news.example (ngữ cảnh nhúng) nhúng một quảng cáo từ shoes.example trong một khung được giới hạn. news.example không thể trích xuất dữ liệu từ quảng cáo shoes.example và shoes.example không thể tìm hiểu dữ liệu của bên thứ nhất từ news.example.

Khung được giới hạn hoạt động như thế nào?

Khung được rào sử dụng đối tượng FencedFrameConfig để điều hướng. Đối tượng này có thể được trả về từ một phiên đấu giá Protected Audience. Sau đó, đối tượng cấu hình được đặt làm thuộc tính config trên phần tử khung được rào chắn. Điều này khác với iframe, trong đó một URL hoặc URN không rõ ràng được chỉ định cho thuộc tính src. Đối tượng FencedFrameConfig có thuộc tính url chỉ đọc; tuy nhiên, vì các trường hợp sử dụng hiện tại yêu cầu ẩn URL thực tế của tài nguyên nội bộ, nên thuộc tính này sẽ trả về chuỗi mờ khi được đọc.

Khung được phân vùng không thể dùng postMessage để giao tiếp với trình nhúng. Tuy nhiên, khung được phân vùng có thể sử dụng postMessage với iframe bên trong khung được phân vùng.

Khung được phân vùng sẽ được tách biệt với nhà xuất bản theo những cách khác. Nhà xuất bản sẽ không có quyền truy cập vào DOM bên trong khung được rào và khung được rào không thể truy cập vào DOM của nhà xuất bản. Ngoài ra, các thuộc tính như name (có thể được đặt thành bất kỳ giá trị nào và được nhà xuất bản quan sát) không có trong khung được giới hạn.

Khung được rào chắn hoạt động như một bối cảnh duyệt web cấp cao nhất (chẳng hạn như thẻ trình duyệt). Mặc dù khung được phân vùng trong một số trường hợp sử dụng nhất định (chẳng hạn như opaque-ads) có thể chứa dữ liệu trên nhiều trang web (chẳng hạn như nhóm quan tâm Protected Audience API), nhưng khung này không thể truy cập vào bộ nhớ hoặc cookie chưa được phân vùng. Khung được phân vùng opaque-ads có thể truy cập vào một cookie và phân vùng lưu trữ duy nhất dựa trên số chỉ dùng một lần.

Đặc điểm của khung được phân vùng được trình bày chi tiết hơn trong phần giải thích.

Kết xuất quảng cáo trong khung được phân vùng

FencedFrameConfig được trả về từ một phiên đấu giá Protected Audience, miễn là bạn đã đặt tham số resolveToConfig của AuctionConfig thành true:

const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true
});

Sau khi nhận được cấu hình, bạn có thể chỉ định cấu hình đó cho thuộc tính config của khung được phân vùng để điều hướng khung đến tài nguyên do cấu hình đó đại diện. Các phiên bản Chrome cũ hơn không hỗ trợ thuộc tính resolveToConfig, vì vậy, bạn vẫn phải xác nhận rằng lời hứa đã phân giải thành FencedFrameConfig trước khi điều hướng:

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
  const frame = document.createElement('fencedframe');
  frame.config = frameConfig;
}