Nếu cho rằng mã quảng cáo thích ứng của chúng tôi không đáp ứng yêu cầu của bạn, thì bạn có thể sửa đổi mã quảng cáo để đáp ứng tốt hơn các yêu cầu của trang web thích ứng của mình. Các ví dụ trong bài viết này sẽ cho bạn biết cách thực hiện những nội dung sửa đổi này sao cho chính xác.
Trước khi bắt đầu:
- Nếu chưa quen với truy vấn phương tiện CSS và cách sửa đổi mã quảng cáo, bạn nên xem ví dụ về kích thước chính xác của đơn vị quảng cáo theo chiều rộng màn hình.
- Nếu bạn đã quen thuộc với truy vấn phương tiện CSS và biết cách sửa đổi mã quảng cáo, hãy xem ngay mục ví dụ về các tính năng nâng cao dành cho mã quảng cáo thích ứng.
Ví dụ về kích thước đơn vị quảng cáo chính xác cho mỗi độ rộng màn hình
Ví dụ này cho bạn biết cách sửa đổi mã quảng cáo thích ứng của mình để đặt kích thước đơn vị quảng cáo cụ thể cho ba phạm vi chiều rộng màn hình, đó là thiết bị di động, máy tính bảng và máy tính để bàn. Bạn không cần có kinh nghiệm trước về truy vấn phương tiện CSS hay việc sửa đổi mã quảng cáo AdSense để làm theo ví dụ này.
Sau đây là một số mã quảng cáo thích ứng đã sửa đổi có chức năng đặt kích thước đơn vị quảng cáo chính xác sau cho mỗi chiều rộng màn hình:
- Cho chiều rộng màn hình tới 500px: đơn vị quảng cáo 320x100.
- Cho chiều rộng màn hình từ 500px đến 799px: đơn vị quảng cáo 468x60.
- Đối với chiều rộng màn hình từ 800px trở lên: đơn vị quảng cáo có kích thước 728x90.
<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>Cách điều chỉnh mã mẫu này cho phù hợp với trang web của bạn:
- Tạo đơn vị quảng cáo hiển thị trong tài khoản AdSense của bạn và đảm bảo bạn đã chọn Thích ứng trong mục "Kích thước quảng cáo". Hãy ghi lại những thông tin sau đây trong mã quảng cáo thích ứng:
- Mã nhà xuất bản của bạn, ví dụ: ca-pub-1234567890123456
- Mã đơn vị quảng cáo của bạn (
data-ad-slot), ví dụ: 1234567890.
- Trong mã mẫu:
- Thay thế tất cả bản sao của mục
example_responsive_1bằng một tên riêng biệt, ví dụ: Home_Page, front_page_123, v.v.Lưu ý:- Tên riêng biệt chỉ được chứa các chữ cái tiếng Anh (A-Z), số và dấu gạch dưới, đồng thời, ký tự đầu tiên phải là một chữ cái tiếng Anh.
- Bạn phải sử dụng một tên riêng không trùng lặp mỗi lần điều chỉnh mã mẫu này.
- Thay thế
ca-pub-1234567890123456bằng mã nhà xuất bản của bạn. - Thay thế
8XXXXX1bằng mã đơn vị quảng cáo của bạn.
- Thay thế tất cả bản sao của mục
- Quyết định kích thước mà bạn muốn sử dụng cho đơn vị quảng cáo của mình theo chiều rộng màn hình:
- Nếu hài lòng với kích thước đơn vị quảng cáo hiện tại trong mã mẫu, thì bạn không cần thực hiện thêm thay đổi nào nữa.
- Nếu bạn muốn đặt kích thước đơn vị quảng cáo khác theo chiều rộng của màn hình, hãy thực hiện như sau trong mã mẫu:
- Thay thế kích thước
320pxvà100pxbằng chiều rộng và chiều cao bạn muốn sử dụng cho đơn vị quảng cáo đối với màn hình có chiều rộng tối đa là 500px. - Thay
468pxvà60pxbằng chiều rộng và chiều cao của đơn vị quảng cáo bạn muốn sử dụng cho chiều rộng màn hình từ 500px đến 799px. - Thay
728pxvà90pxbằng chiều rộng và chiều cao của đơn vị quảng cáo bạn muốn sử dụng cho chiều rộng màn hình là 800px trở lên.
- Thay thế kích thước
- Sao chép và dán mã quảng cáo đã sửa đổi vào mã nguồn HTML của trang mà bạn muốn quảng cáo xuất hiện.
Lưu ý: Sau khi đặt mã quảng cáo, bạn nên thử nghiệm quảng cáo trên các thiết bị và màn hình khác nhau để đảm bảo hành vi thích ứng diễn ra chính xác.
Ví dụ về các tính năng nâng cao dành cho mã quảng cáo thích ứng
Nếu cho rằng mã quảng cáo thích ứng của chúng tôi không đáp ứng yêu cầu của bạn, thì bạn có thể sửa đổi mã quảng cáo để chỉ định kích thước chính xác cho đơn vị quảng cáo của mình thông qua CSS.
Chỉ định chiều rộng có thể mở rộng và chiều cao cố định
Bạn có thể sửa đổi mã quảng cáo thích ứng để chỉ định chiều rộng mở rộng và chiều cao cố định cho đơn vị quảng cáo của mình qua CSS. Ví dụ sau cho bạn thấy cách thực hiện các sự sửa đổi này:
<ins class="adsbygoogle"
style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>Chỉ định kích thước chính xác theo chiều rộng màn hình
Bạn có thể sửa đổi mã quảng cáo thích ứng để chỉ định kích thước chính xác cho đơn vị quảng cáo của mình qua CSS. Ví dụ sau cho bạn thấy cách thực hiện các sự sửa đổi này:
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
style="display:block;"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
@media là cú pháp CSS3 và được hỗ trợ trên tất cả trình duyệt hiện đại. Xin lưu ý rằng việc đặt kích thước của đơn vị quảng cáo thông qua CSS trong biểu định kiểu bên ngoài chưa được hỗ trợ chính thức.Ẩn đơn vị quảng cáo
Trong một số trường hợp nhất định, cụ thể là trên thiết bị di động cỡ nhỏ, bạn có thể hoàn toàn không muốn hiển thị quảng cáo. Nếu muốn ẩn một đơn vị quảng cáo, thì bạn có thể đặt thông số có các truy vấn phương tiện CSS để không có yêu cầu quảng cáo nào được thực hiện và không có quảng cáo nào được hiển thị. Ví dụ sau cho bạn thấy cách thực hiện các sự sửa đổi này:
<style type="text/css">
.adslot_1 { display:block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
Trong ví dụ này, không có quảng cáo nào hiển thị nếu chiều rộng màn hình nhỏ hơn 400px.
