Trang này được dịch bởi Cloud Translation API.

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 trong vùng đó. 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 sẽ hiển thị, cũng như kích thước và tính linh hoạt của 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. Truy cập trung tâm trợ giúp để tìm hiểu thêm.

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

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ỉ các mẫu quảng cáo có kích thước 300x250 mới được phân phát.

Lưu ý quan trọng: 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ị. Vì mẫu quảng cáo thường hiển thị không đồng bộ, nên có thể khiến các phần tử khác trên trang thay đổi nếu không đủ không gian 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],
    ],
    "multi-size-ad",
  )
  .addService(googletag.pubads());

Trong ví dụ này, hệ thống có thể phân phát các mẫu quảng cáo có kích thước 300x250, 728x90 và 750x200. Ad Manager chỉ xem xét các mẫu quảng cáo khớp với các kích thước này trong quá trình 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 sẽ tự động đặt kích thước bằng chiều cao ngắn nhất đã khai báo và chiều rộng rộng nhất đã khai báo trên 1 px khi display() được gọi. Trong trường hợp này, đó sẽ là 750x90. Tuy nhiên, việc thay đổi kích thước có thể xảy ra sau khi các nội dung khác trên trang đã tải, khiến nội dung đó thay đổi. Để tránh thay đổi bố cục, hãy đặt trước không gian bằng cách sử dụng CSS như 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 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 mẫu quảng cáo vô tình bị cắ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à chúng hiển thị. Quảng cáo gốc hiện là loại 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 của vùng chứa để phù hợp với nội dung của mẫu quảng cáo. GPT thực hiện các bước để đổi kích thước vùng quảng cáo như sau:

Đã nhận phản hồi quảng cáo.
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%.
Sau khi tất cả tài nguyên trong iframe tải xong, mẫu quảng cáo sẽ 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 thích ứng giúp 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 mẫu quảng cáo cần phân phát dựa trên kích thước của khung nhìn của trình duyệt đưa ra yêu cầu. Bạn có thể dùng chức năng này để kiểm soát kích thước của các mẫu quảng cáo được phân phát cho các loại thiết bị khác nhau (máy tính, máy tính bảng, thiết bị di động, v.v.).

Bạn có thể thực hiện việc này bằng cách xác định mối liên kết 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, mụ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, kích thước quảng cáo 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 đưa ra yêu cầu và sử dụng mục ánh xạ lớn nhất phù hợp. Để xác định GPT ánh xạ lớn nhất, trước tiên, hãy xem xét chiều rộng, sau đó mới đến chiều cao (tức là [100, 10] > [10, 100]). Trong trường hợp xảy ra lỗi khi ánh xạ hoặc nếu không thể xác định kích thước khung nhìn, thì kích thước đượ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ạ có đị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ự của kích thước khung nhìn trong mảng này xác định mức độ ưu tiên của chúng. SizeMappingBuilder dùng trong ví dụ ở trên là một cách thuận tiện để tạo một mảng của định dạng này, với kích thước được tự động sắp xếp theo thứ tự từ lớn nhất đến nhỏ nhất. Trong ví dụ đó, kết quả của SizeMappingBuilder.build() là:

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