Kích thước quảng cáo

Mỗi vùng quảng cáo mà bạn xác định phải chỉ định(các) kích thước quảng cáo đủ điều kiện để phân phát ở vùng đó vị trí. Cách chỉ định kích thước quảng cáo sẽ khác nhau tuỳ thuộc vào loại quảng cáo cần chỉ định được hiển thị, cũng như kích thước và tính linh hoạt của chính vùng quảng cáo.

Trong một số trường hợp, kích thước quảng cáo có thể bị ghi đè ở cấp mục hàng trong Google Ad Manager. Hãy truy cập vào trung tâm trợ giúp để tìm hiểu khác.

Bạn có thể tìm thấy mã đầy đủ cho các ví dụ trong hướng dẫn này trên quảng cáo kích thước.

Quảng cáo có kích thước cố định

Bạn có thể xác định vùng quảng cáo có một kích thước cố định.

googletag
  .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "fixed-size-ad")
  .addService(googletag.pubads());

Trong ví dụ này, chỉ những mẫu quảng cáo có kích thước 300x250 mới được phân phát.

Điểm chính: Khi làm việc với quảng cáo có kích thước cố định, bạn nên xác định kích thước của phần tử <div> nơi mẫu quảng cáo sẽ hiển thị. Từ quảng cáo thường được hiển thị không đồng bộ, chúng có thể khiến các phần tử khác trang cần di chuyển nếu không có đủ không gian được dành riêng cho chúng.

Quảng cáo nhiều kích thước

Nếu quảng cáo hỗ trợ nhiều kích thước, hãy cung cấp danh sách các kích thước được hỗ trợ khi xác định vùng quảng cáo.

googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [[300, 250], [728, 90], [750, 200], "fluid"],
    "multi-size-ad",
  )
  .addService(googletag.pubads());

Trong ví dụ này, mẫu quảng cáo có kích thước 300x250, 728x90 và 750x200 có thể là phân phát. Ad Manager chỉ xem xét các quảng cáo khớp với các kích thước này trong quá trình lựa chọn quảng cáo.

Nếu kích thước không được chỉ định cho vùng quảng cáo <div> trong CSS, GPT tự động đặt kích thước bằng kích thước ngắn nhất chiều cao đã khai báo và chiều rộng đã khai báo rộng nhất trên 1px khi display() được gọi. Trong trường hợp này, giá trị đó sẽ là 750x90. Tuy nhiên, kích thước này có thể xảy ra sau nội dung khác trên trang đã tải, khiến nội dung đó thay đổi. Cần tránh thay đổi bố cục, đặt trước không gian bằng cách sử dụng CSS như được hiển thị trong hướng dẫn giảm thiểu việc thay đổi bố cục.

Khi làm việc với quảng cáo nhiều kích thước, hãy đảm bảo rằng bố cục của bạn đủ linh hoạt để hỗ trợ quảng cáo có kích thước lớn nhất được chỉ định. Điều này sẽ giúp quảng cáo không bị vô tình bị cắt bớt.

Quảng cáo linh hoạt

Quảng cáo linh hoạt không có kích thước cố định mà có thể tự điều chỉnh cho phù hợp với nội dung mẫu quảng cáo màn hình. Quảng cáo gốc hiện là quảng cáo linh hoạt duy nhất được Ad Manager hỗ trợ.

Khi làm việc với quảng cáo linh hoạt, bạn có thể chỉ định kích thước fluid tùy chỉnh.

googletag
  .defineSlot("/6355419/Travel", ["fluid"], "native-ad")
  .addService(googletag.pubads());

Trong ví dụ này, vùng quảng cáo sẽ có chiều rộng của vùng chứa gốc và đổi kích thước chiều cao cho phù hợp với nội dung mẫu quảng cáo. Các bước GPT sẽ thực hiện để thay đổi kích thước vùng quảng cáo như sau:

  1. Đã nhận được phản hồi quảng cáo.
  2. Nội dung mẫu quảng cáo được ghi vào iframe, với chiều cao ban đầu được đặt thành 0px và chiều rộng được đặt thành 100%.
  3. Sau khi tất cả tài nguyên trong iframe đã tải xong, mẫu quảng cáo sẽ được tạo hiển thị bằng cách đặt chiều cao của iframe bằng với chiều cao của phần tử <body> của iframe.

Quảng cáo thích ứng

Quảng cáo đáp ứng mở rộng quảng cáo nhiều kích thước và cho phép bạn chỉ định kích thước của phân phát dựa trên kích thước khung nhìn của trình duyệt giúp của bạn. Bạn có thể sử dụng chức năng này để kiểm soát kích thước của mẫu quảng cáo được phân phát cho nhiều loại thiết bị (máy tính, máy tính bảng, thiết bị di động, v.v.).

Điều này được thực hiện bằng cách xác định ánh xạ giữa kích thước khung nhìn và kích thước quảng cáo, sau đó liên kết mối liên kết đó với một vùng quảng cáo.

const responsiveAdSlot = googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [
      [300, 250],
      [728, 90],
      [750, 200],
    ],
    "responsive-ad",
  )
  .addService(googletag.pubads());

const mapping = googletag
  .sizeMapping()
  .addSize(
    [1024, 768],
    [
      [750, 200],
      [728, 90],
    ],
  )
  .addSize([640, 480], [300, 250])
  .addSize([0, 0], [])
  .build();

responsiveAdSlot.defineSizeMapping(mapping);

Trong ví dụ này, việc ánh xạ chỉ định:

  • Khi khung nhìn >= 1024x768, quảng cáo có kích thước 750x200 hoặc 728x90 có thể phân phát.
  • Khi 1024x768 > khung nhìn >= 640x480, quảng cáo có kích thước 300x250 có thể phân phát.
  • Khi khung nhìn < 640x480, không có quảng cáo nào có thể phân phát.

GPT sẽ phát hiện kích thước khung nhìn của trình duyệt đang tạo yêu cầu và sử dụng ánh xạ lớn nhất phù hợp. Để xác định giá trị lớn nhất trước tiên, việc ánh xạ GPT sẽ xem xét chiều rộng rồi mới đến chiều cao (ví dụ: [100, 10] > [10, 100]). Trong trường hợp xảy ra lỗi trong quá trình liên kết hoặc nếu khung nhìn không xác định được kích thước, các kích thước đã chỉ định trong defineSlot() sẽ được sử dụng.

Sau đó, mối liên kết này được liên kết với một vùng quảng cáo bằng cách gọi phương thức Slot.defineSizeMapping(). Phương thức này chấp nhận một mảng ánh xạ theo định dạng sau:

[
  [
    [viewport-width-1, viewport-height-1],
    [[ad-width-1, ad-height-1], [ad-width-2, ad-height-2], ...]
  ],
  [
    [viewport-width-2, viewport-height-2],
    [[ad-width-3, ad-height-3], [ad-width-4, ad-height-4], ...]
  ],
  ...
]

Thứ tự kích thước khung nhìn trong mảng này xác định mức độ ưu tiên của các kích thước đó. Chiến lược phát hành đĩa đơn SizeMappingBuilder được dùng trong ví dụ ở trên là một cách thuận tiện để tạo một mảng định dạng này, với các kích thước được sắp xếp tự động từ lớn nhất đến nhỏ nhất. Trong đó ví dụ: dữ liệu đầu ra của SizeMappingBuilder.build() là:

[
  [[1024, 768], [[750, 200], [728, 90]]],
  [[640, 480], [[300, 250]]],
  [[0, 0], []]
]