Sự thay đổi bố cục xảy ra khi một phần tử hiển thị trên trang thay đổi vị trí hoặc kích thước, ảnh hưởng đến vị trí của nội dung xung quanh phần tử đó. Đôi khi, việc chuyển đổi là cố định, chẳng hạn như khi một vùng chứa mở rộng do một hành động của người dùng. Tuy nhiên, bản chất linh động của quảng cáo có thể dẫn đến sự thay đổi bố cục không mong muốn, ảnh hưởng tiêu cực đến trải nghiệm người dùng và có thể gây ra các vấn đề nghiêm trọng về khả năng hữu dụng.
Hướng dẫn này giải thích cách đo lường và giảm thiểu sự thay đổi bố cục khi làm việc với Thẻ nhà xuất bản của Google (GPT).
Cách quảng cáo gây ra sự thay đổi bố cục
Quảng cáo thường được yêu cầu không đồng bộ và tự động thêm nội dung vào trang của bạn trong hoặc sau khi tải trang. Trong khi quảng cáo đang được tìm nạp, phần còn lại của trang sẽ tiếp tục tải và người dùng có thể thấy nội dung không phải quảng cáo. Nếu bạn không dành đủ không gian cho quảng cáo đang tải, thì quảng cáo có thể thay thế nội dung không phải quảng cáo hiển thị khi quảng cáo được thêm vào trang.
Khi làm việc với Thẻ nhà xuất bản của Google, có một vài thời điểm trong vòng đời của quảng cáo có thể xảy ra việc thay đổi bố cục:
- Khi
display()được gọi. Một khe có thể mở rộng hoặc thu gọn, tuỳ thuộc vào cách định cấu hình khe đó. - Khi nội dung quảng cáo được hiển thị. Bạn có thể đổi kích thước vùng quảng cáo nếu phân phát quảng cáo linh hoạt hoặc nếu không có đủ không gian. Một khe cũng có thể mở rộng hoặc thu gọn tại thời điểm này, tuỳ thuộc vào cách định cấu hình khe.
- Sau khi nội dung quảng cáo hiển thị. Một số loại mẫu quảng cáo được thiết kế để mở rộng sau khi xuất hiện trên trang.
Xin lưu ý rằng càng ở vị trí cao trong khung nhìn, vùng quảng cáo càng có nhiều khả năng thay thế nội dung. Đặc biệt chú ý với các vùng gần đầu khung nhìn ban đầu (trong màn hình đầu tiên). Những vị trí này có thể gây ra sự thay đổi bố cục không cân xứng vì chúng có nhiều khả năng hiển thị khi nội dung quảng cáo được tải.
Đo lường mức thay đổi bố cục
Điểm số tổng hợp về mức thay đổi bố cục (CLS) là một chỉ số Các chỉ số quan trọng chính của trang web mà bạn có thể dùng để định lượng tác động của việc thay đổi bố cục đối với trang web của mình, cả trong phòng thí nghiệm lẫn trên thực địa.
Ở phòng thí nghiệm
Công cụ của phòng thí nghiệm đo lường CLS theo cách tổng hợp. Điều này có nghĩa là các API này không dựa vào hoạt động tương tác thực của người dùng, nhờ đó phù hợp để sử dụng trong quy trình tích hợp liên tục và quy trình phát triển cục bộ. Tuy nhiên, các công cụ này thường chỉ đo lường hiệu suất trong quá trình tải trang và bị giới hạn về các điều kiện mà chúng có thể mô phỏng, vì vậy, các giá trị được báo cáo có thể thấp hơn so với trải nghiệm của người dùng thực.
Công cụ kiểm tra quảng cáo của nhà xuất bản cho Lighthouse là một công cụ có thể dùng để đo lường CLS cụ thể cho quảng cáo GPT. Để biết thông tin chi tiết, hãy xem tài liệu kiểm tra về việc giảm mức thay đổi bố cục liên quan đến quảng cáo.
Bạn cũng có thể định cấu hình Công cụ dành cho nhà phát triển của Chrome để nêu bật các thay đổi về bố cục khi bạn điều hướng trang web. Bạn có thể sử dụng tính năng này để xác định thủ công các thay đổi về bố cục xảy ra gần vùng quảng cáo trên trang.
Trong trường hợp thực tế
Công cụ thực địa đo lường CLS mà người dùng thực tế trải nghiệm khi họ tương tác với trang web của bạn. Quá trình này thường được gọi là giám sát người dùng thực (RUM). RUM cho phép bạn quan sát mức độ ảnh hưởng của các yếu tố thực tế đến CLS, chẳng hạn như chức năng của thiết bị, điều kiện mạng, hoạt động tương tác của người dùng và tính năng cá nhân hoá trang. Những yếu tố này thường khó hoặc không thể mô phỏng bằng các thử nghiệm tổng hợp.
Giảm thiểu sự thay đổi bố cục
Cách duy nhất để tránh việc thay đổi bố cục là dành đủ lượng không gian
cho một vùng quảng cáo nhất định thông qua CSS. Cách hiệu quả nhất để thực hiện việc này là đặt chiều cao và chiều rộng cố định trực tiếp trên khung quảng cáo div. Tuy nhiên, mặc dù cách này hoạt động tốt đối với các khung quảng cáo tĩnh, có kích thước cố định, nhưng các trường hợp phức tạp hơn có thể yêu cầu một phương pháp tinh tế hơn. Một số trường hợp phổ biến được giải thích trong các phần sau.
Vùng quảng cáo nhiều kích thước
Đối với các vùng quảng cáo chấp nhận nhiều kích thước, bạn nên sử dụng một trong các phương pháp sau:
- Dành không gian cho kích thước lớn nhất được định cấu hình để phân phát.
- Dành không gian cho kích thước nhỏ nhất được định cấu hình để phân phát.
- Đặt trước không gian cho kích thước có nhiều khả năng phân phát nhất, được xác định bằng cách kiểm tra dữ liệu về mức độ đáp ứng trước đây trong báo cáo của Google Ad Manager.
Chọn phương pháp phù hợp
Việc đặt trước không gian cho kích thước lớn nhất được định cấu hình để phân phát là cách hiệu quả nhất để loại bỏ sự thay đổi bố cục. Tuy nhiên, phương pháp này có thể tạo ra thêm khoảng trống xung quanh quảng cáo, trong trường hợp một mẫu quảng cáo nhỏ hơn kích thước đặt trước được phân phát. Việc thu nhỏ vùng quảng cáo để khớp với kích thước của mẫu quảng cáo đã phân phát sẽ dẫn đến việc thay đổi bố cục bổ sung, vì vậy, bạn nên tránh làm việc này. Thay vào đó, bạn có thể sử dụng căn giữa theo chiều dọc và chiều ngang để giảm tác động trực quan của không gian trống quá mức.
Mặt khác, việc đặt trước không gian cho kích thước nhỏ nhất được định cấu hình để phân phát sẽ giúp tránh tình trạng có quá nhiều không gian trống xung quanh quảng cáo. Đây có thể là một lựa chọn phù hợp nếu vùng quảng cáo thường được lấp đầy bằng các mẫu quảng cáo nhỏ hơn hoặc trong trường hợp tất cả kích thước mà vùng quảng cáo hỗ trợ đều tương tự nhau. Tuy nhiên, phương thức này sẽ dẫn đến việc thay đổi bố cục trong trường hợp mẫu quảng cáo lớn hơn kích thước được đặt trước được phân phát (mặc dù những thay đổi như vậy thường nhỏ hơn so với việc không đặt trước không gian).
Để tạo sự cân bằng giữa khoảng trống và sự thay đổi bố cục, bạn có thể đặt trước một khoảng không gian "trung bình" cho các vị trí quảng cáo. Ví dụ: việc đặt trước 100px theo chiều dọc sẽ tạo ra một chút không gian trống khi mẫu quảng cáo 320x50 được phân phát, nhưng lại làm giảm điểm số CLS (Mức thay đổi bố cục tích luỹ) so với việc không đặt trước không gian. Bạn cần thử nghiệm nhiều kích thước để tìm ra mức cân bằng tốt nhất cho trang web của mình.
Khi xác định lượng dung lượng cần đặt trước cho một vùng nhất định, việc kiểm tra dữ liệu lấp đầy trước đây từ báo cáo Google Ad Manager có thể giúp bạn đưa ra quyết định sáng suốt hơn. Cách tốt nhất để minh hoạ điều này là tìm hiểu một số ví dụ.
Ví dụ #1
| Kích thước mẫu quảng cáo (được phân phối) | Số lượt hiển thị của máy chủ quảng cáo (%) |
|---|---|
300x250 |
70% |
320x50 |
30% |
Trong trường hợp này, việc đặt trước 250px theo chiều dọc có thể làm giảm đáng kể CLS vì phần lớn mẫu quảng cáo được phân phát là 300x250.
Ví dụ 2
| Kích thước mẫu quảng cáo (được phân phối) | Số lượt hiển thị của máy chủ quảng cáo (%) |
|---|---|
970x90 |
60% |
728x90 |
10% |
320x50 |
20% |
728x250 |
(5%) |
300x250 |
(5%) |
Trong trường hợp này, phần lớn các quảng cáo đều cao tối đa là 90px. Vì vậy, việc đặt trước 90px theo chiều dọc sẽ tránh được tình trạng thay đổi bố cục trong hầu hết thời gian.
Cách đặt trước không gian
Bạn nên giải quyết vấn đề này bằng cách chỉ định kích thước của khung quảng cáo thông qua các thuộc tính CSS min-height và min-width:
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
Việc sử dụng các thuộc tính min-height và min-width cho phép bạn đặt trước một không gian tối thiểu cho vùng quảng cáo, trong khi vẫn cho phép trình duyệt tăng kích thước của vùng chứa nếu cần. Điều này đảm bảo rằng không có nội dung nào bị cắt bớt trong sự kiện có mẫu quảng cáo lớn hơn được phân phát.
Bạn có thể kết hợp kỹ thuật này với truy vấn nội dung đa phương tiện CSS để chỉ định các giá trị tối thiểu khác nhau cho các kích thước màn hình khác nhau:
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
Bạn nên tránh việc đặt trước không gian bằng JavaScript, vì việc này có thể dẫn đến việc thay đổi bố cục tại thời điểm tập lệnh tải. Việc đặt trước không gian bằng CSS sẽ giúp tránh được rủi ro này.
Vùng quảng cáo linh hoạt
Vị trí quảng cáo linh hoạt không chỉ định một bộ kích thước cố định mà chúng hỗ trợ. Thay vào đó, các khung này tự động đổi kích thước để phù hợp với nội dung mẫu quảng cáo được phân phát cho chúng, cho phép hỗ trợ các mẫu quảng cáo có kích thước không xác định. Do đó, bạn không thể đặt trước không gian cho các vị trí này trước khi yêu cầu nội dung quảng cáo và quảng cáo có kích thước linh hoạt luôn gây ra sự thay đổi bố cục.
Để giảm thiểu tác động của việc thay đổi bố cục khi làm việc với các khung quảng cáo linh hoạt, bạn nên làm như sau:
- Chỉ sử dụng kích thước
fluidcho các khe dưới màn hình đầu tiên. - Tìm nạp các vị trí linh hoạt càng sớm càng tốt để giảm thiểu khả năng người dùng cuộn chúng vào khung hiển thị trước khi vị trí được đổi kích thước.
Thu gọn và mở rộng vùng quảng cáo
Phương thức collapseEmptyDivs() cho phép bạn thu gọn các div vùng quảng cáo để không chiếm không gian trên trang khi không có nội dung quảng cáo nào để hiển thị. Tuy nhiên, bạn nên sử dụng tính năng này một cách thận trọng vì tính năng này có thể gây ra sự thay đổi bố cục ngoài ý muốn. Như đã lưu ý trong phần trước, việc thu gọn và mở rộng khung quảng cáo có thể khiến bố cục thay đổi tại hai điểm khác nhau trong vòng đời quảng cáo.
Nếu cần sử dụng tính năng này, bạn có thể giảm tác động của việc thay đổi bố cục bằng cách sử dụng dữ liệu lấp đầy trước đây trong báo cáo Ad Manager để triển khai các phương pháp hay nhất sau:
- Các khung có khả năng được lấp đầy phải luôn bắt đầu ở trạng thái mở rộng.
- Những vị trí không có khả năng lấp đầy phải luôn bắt đầu đã được thu gọn.
Để tham khảo ví dụ về cách triển khai, hãy xem mẫu Thu gọn vùng quảng cáo trống.