Hiển thị quảng cáo

Khi phiên đấu giá sử dụng Protected Audience API trả về một đề xuất quảng cáo, lựa chọn đó có thể là trả về dưới dạng một URN mờ dùng để hiển thị một quảng cáo trong iframe hoặc FencedFrameConfig dùng để hiển thị quảng cáo trong một khung bảo vệ.

Hướng dẫn này sẽ giải thích khái niệm khung bảo vệ 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 pháp. Để tìm hiểu sâu hơn về hàng rào hãy tìm thêm thông tin trong hướng dẫn này hoặc trong đề xuất.

Khung bảo vệ là gì?

Khung hàng rào (<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 bảo vệ hạn chế hoạt động 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 khi 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 không thể chia sẻ ngữ cảnh nhúng với khung được bảo vệ.

Ví dụ: giả sử news.example (bối cảnh nhúng) nhúng một quảng cáo từ shoes.example trong khung bảo vệ. 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 bảo vệ hoạt động như thế nào?

Khung bảo vệ sử dụng đối tượng FencedFrameConfig để điều hướng. Đối tượng này có thể được trả về từ phiên đấu giá sử dụng Protected Audience API. Sau đó, đối tượng config được đặt thành thuộc tính config trên phần tử khung bảo vệ. Tính năng này khác với iframe trong đó một URL hoặc URN mờ được gán cho thuộc tính src. Chiến lược phát hành đĩa đơn Đối tượng FencedFrameConfig có thuộc tính url chỉ có thể đọ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ộ, thuộc tính này trả về chuỗi mờ khi đọc.

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

Khung bảo vệ 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ó hàng rào và khung hàng rào không thể truy cập 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 thì sẽ không nằm trong hàng rào khung hình.

Khung bảo vệ hoạt động giống như bối cảnh duyệt web cấp cao nhất (chẳng hạn như trình duyệt ). Mặc dù khung bảo vệ 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 đối tượng có cùng mối quan tâm Protected Audience API), khung không thể truy cập cookie hoặc bộ nhớ chưa được phân vùng. opaque-ads có hàng rào có thể truy cập vào phân vùng bộ nhớ và cookie duy nhất dựa trên số chỉ dùng một lần.

Thông tin chi tiết về đặc điểm của khung bảo vệ trong phần giải thích.

Hiển thị quảng cáo trong khung có hàng rào

FencedFrameConfig được trả về từ một phiên đấu giá sử dụng Protected Audience API, với điều kiện là rằng tham số resolveToConfig của AuctionConfig đã được đặt thành true:

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

Sau khi có được cấu hình này, bạn có thể chỉ định cấu hình đó cho config của một khung bảo vệ để điều hướng khung đến tài nguyên mà 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 đã được giải quyết cho FencedFrameConfig trước thời điểm đó điều hướng:

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

Hiển thị quảng cáo trong iframe

Nếu AuctionConfig không đặt resolveToConfig một cách rõ ràng hoặc nếu thuộc tính này được đặt thành false, runAdAuction() sẽ trả về một URN mờ. URN này có thể được đặt làm src của iframe để hiển thị quảng cáo.