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, sự thay đổi này được dự định, chẳng hạn như khi một vùng chứa mở rộng do hành động của người dùng. Tuy nhiên, tính chất động của quảng cáo có thể dẫn đến thay đổi bố cục ngoài dự kiến, làm ảnh hưởng tiêu cực đến trải nghiệm người dùng và có thể gây ra những vấn đề nghiêm trọng về khả năng sử 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 khiến bố cục thay đổi
Quảng cáo thường được yêu cầu một cách 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 tìm nạp quảng cáo, phần còn lại của trang sẽ tiếp tục tải và nội dung không phải quảng cáo có thể hiển thị cho người dùng. Nếu bạn không dành đủ không gian cho quảng cáo được tải, thì quảng cáo có thể bị thay thế nội dung không phải quảng cáo hiển thị khi cuối cùng đượ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 điểm trong vòng đời quảng cáo nơi việc thay đổi bố cục có thể xảy ra:
- Thời điểm
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. - 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. Tại thời điểm này, một khe cũng có thể mở rộng hoặc thu gọn, tuỳ thuộc vào cách định cấu hình vị trí đó.
- Sau khi nội dung quảng cáo hiển thị. Một số loại quảng cáo nhất định được thiết kế để mở rộng sau khi xuất hiện trên trang.
Lưu ý rằng vùng quảng cáo nằm trong khung nhìn càng cao, thì vùng quảng cáo đó càng có nhiều nội dung có khả năng được thay thế. Đặc biệt chú ý với các khe gần đầu khung nhìn ban đầu (trong màn hình đầu tiên). Các vị trí này có thể khiến bố cục thay đổi không cân đối vì chúng có nhiều khả năng sẽ 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 về 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 và ngoài thực tế.
Ở phòng thí nghiệm
Các công cụ phòng thí nghiệm đo lường CLS một cách tổng hợp. Điều này có nghĩa là các trình xử lý này không dựa vào hoạt động tương tác thực của người dùng, nên rất phù hợp để sử dụng trong quy trình tích hợp liên tục và phát triển cục bộ. Tuy nhiên, những công cụ này thường chỉ đo lường hiệu suất trong quá trình tải trang và bị hạn chế trong 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 thực tế của người dùng.
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ể do các quảng cáo GPT chỉ định. Để biết thông tin chi tiết, vui lòng 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ụ của Chrome cho nhà phát triển để làm nổi bật những thay đổi về bố cục khi di chuyển trên trang web của mình. Bạn có thể sử dụng tính năng này để xác định theo cách thủ công các thay đổi về bố cục xảy ra gần các vùng quảng cáo trên trang.
Trên cánh đồng
Các công cụ tại trường đ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. Quy trình này thường gọi là quy trình theo dõi người dùng thực tế (CLS). CLS cho phép bạn quan sát mức độ ảnh hưởng của CLS đến các yếu tố thực tế, 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à hoạt động cá nhân hoá trang, 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 việc thay đổi bố cục
Cách duy nhất để tránh thay đổi bố cục là đặt trước một lượng đủ không gian cho một vùng quảng cáo nhất định bằng cách sử dụng CSS. Việc đặt chiều cao và chiều rộng cố định
ngay trên vùng quảng cáo div là cách hiệu quả nhất để làm việc này. Tuy nhiên, mặc dù cách này phù hợp với vùng 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ể cần có phương pháp chi tiết hơn. Chúng tôi sẽ giải thích một số trường hợp phổ biến trong các phần sau.
Vùng quảng cáo nhiều kích thước
Đối với những 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:
- Đặ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.
- Đặt trước 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 điền trong quá khứ từ báo cáo Google Ad Manager.
Chọn phương pháp phù hợp
Việc dành 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 về bố cục. Tuy nhiên, phương thức này có thể tạo thêm khoảng trống xung quanh quảng cáo, trong trường hợp quảng cáo nhỏ hơn kích thước đặt trước được phân phát. Việc thu hẹp vùng quảng cáo cho phù hợp với kích thước của mẫu quảng cáo được phân phát sẽ làm thay đổi bố cục thêm, vì vậy, bạn nên tránh làm như vậy. Thay vào đó, bạn có thể dùng tính năng Căn giữa theo chiều dọc và chiều ngang để giảm tác động đến hình ảnh của không gian trống thừa.
Mặt khác, việc dành riêng 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 việc thừa không gian trống xung quanh quảng cáo. Đây có thể là một lựa chọn tốt nếu vùng quảng cáo của bạn thường chứa các mẫu quảng cáo nhỏ hơn hoặc trong trường hợp tất cả các kích thước vùng quảng cáo hỗ trợ đều tương tự nhau. Tuy nhiên, phương thức này dẫn đến thay đổi bố cục trong trường hợp một mẫu quảng cáo lớn hơn kích thước đặt trước được phân phát (mặc dù những thay đổi đó thường nhỏ hơn khi so sánh với việc không dành riêng không gian).
Để cân bằng giữa không gian trống và việc thay đổi bố cục, bạn có thể đặt trước
lượng không gian "trung bình" cho các vùng quảng cáo. Ví dụ: việc đặt trước 100px
theo chiều dọc sẽ phát sinh một chút không gian khi phân phát mẫu quảng cáo 320x50, nhưng
sẽ làm giảm điểm CLS so với việc đặt trước không có dung lượng. Bạn sẽ cần
thử nghiệm với các kích thước khác nhau để tìm ra sự cân bằng tốt nhất cho trang web của mình.
Khi xác định khoảng không gian đặt trước cho một vùng nhất định, việc kiểm tra dữ liệu lấp đầy trong quá khứ 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. Điều này có thể được minh hoạ rõ nhất bằng cách khám phá 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 có chiề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 việc thay đổi bố cục trong hầu hết trường hợp.
Cách đặt chỗ
Bạn nên giải quyết vấn đề này bằng cách chỉ định kích thước của vùng 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 thuộc tính chiều cao tối thiểu và chiều rộng tối thiểu cho phép bạn đặt trước một lượng 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ỏ trong trường hợp phân phát mẫu quảng cáo lớn hơn.
Bạn có thể kết hợp kỹ thuật này với các truy vấn nội dung nghe nhìn CSS để chỉ định các mức tối thiểu khác nhau cho nhiều kích thước màn hình:
@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ải tập lệnh. Việc đặt trước không gian thông qua CSS sẽ giúp tránh rủi ro này.
Vùng quảng cáo linh hoạt
Vùng quảng cáo linh hoạt không chỉ định tập hợp kích thước cố định mà các vùng quảng cáo đó hỗ trợ. Thay vào đó, các vị trí này tự động đổi kích thước cho phù hợp với nội dung mẫu quảng cáo được phân phát, cho phép chúng 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 khiến bố cục thay đổi.
Để giảm thiểu tác động của việc thay đổi bố cục khi làm việc với vùng quảng cáo linh hoạt, bạn nên thực hiện những việc 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 sớm nhất có thể để giảm thiểu khả năng người dùng cuộn chúng vào khung nhìn trước khi thay đổi kích thước vị trí.
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 để chúng 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ể khiến bố cục thay đổi ngoài ý muốn. Như đã lưu ý trong
phần trước, việc thu gọn và mở rộng vùng quảng cáo có thể khiến bố cục
thay đổ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 chuyển bố cục bằng cách sử dụng dữ liệu lấp đầy trong quá khứ từ báo cáo Ad Manager để triển khai các phương pháp hay nhất sau đây:
- Các vị trí có khả năng được lấp đầy phải luôn bắt đầu mở rộng.
- Những vị trí không có khả năng lấp đầy sẽ luôn bắt đầu được thu gọn.
Hãy xem mẫu Thu gọn vùng quảng cáo trống để tham khảo ví dụ về cách triển khai.