Nếu nhận thấy mã quảng cáo thích ứng của chúng tôi không thực hiện mọi thứ bạn cần, bạn có thể sửa đổi mã quảng cáo của mình để đáp ứng tốt hơn những yêu cầu của trang web đáp ứng của bạn. Các ví dụ sau cho bạn thấy cách thực hiện những sửa đổi này.
Quan trọng:
- Nếu bạn chưa quen với truy vấn phương tiện CSS và cách sửa đổi mã quảng cáo của mình, chúng tôi khuyên bạn nên bắt đầu với Ví dụ về kích thước đơn vị quảng cáo chính xác cho mỗi 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, vui lòng chuyển đến mục Ví dụ về các tính năng mã quảng cáo thích ứng nâng cao.
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.
- Cho chiều rộng màn hình từ 800px trở lên: đơn vị quảng cáo 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"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXX11XXX9"
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ị hình ảnh trong tài khoản AdSense của bạn, đảm bảo bạn đã chọn Thích ứng trong mục "Kích thước quảng cáo". Hãy nhớ ghi lại các thông tin sau từ mã quảng cáo thích ứng:
- ID nhà xuất bản của bạn, ví dụ: ca-pub-1234567891234567
- ID đơ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ả mục
example_responsive_1bằng một tên không trùng lặp, ví dụ: Home_Page, front_page_123, v.v.Ghi chú:- Tên không trùng lặp của bạn chỉ được chứa các chữ cái tiếng Anh (A-Z), số và các 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 không trùng lặp khác nhau mỗi lần điều chỉnh mã mẫu này.
- Thay
ca-pub-XXXXXXX11XXX9bằng ID nhà xuất bản của chính bạn. - Thay
8XXXXX1bằng ID đơn vị quảng cáo của chính bạn.
- Thay thế tất cả mục
- Quyết định kích thước bạn muốn 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 bất kỳ thay đổi nào.
- Nếu bạn muốn đặt kích thước đơn vị quảng cáo khác cho mỗi chiều rộng màn hình, thì hãy thực hiện như sau trong mã mẫu:
- Thay
320pxvà100pxbằ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ới 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
- Sao chép và dán mã quảng cáo đã sửa đổi vào mã nguồn HTML của các 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 hoạt động đúng cách.
Ví dụ về các tính năng mã quảng cáo thích ứng nâng cao
Nếu nhận thấy mã quảng cáo thích ứng của chúng tôi không đáp ứng hết mọi nhu cầu của bạn, 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 độ rộng có thể mở rộng và độ cao cố định
Bạn có thể sửa đổi mã quảng cáo đáp ứ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:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>Chỉ định kích thước chính xác cho 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:inline-block;"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
@media là cú pháp CSS3 và được hỗ trợ trên tất cả các trình duyệt hiện đại. Nếu muốn hỗ trợ các trình duyệt cũ hơn, như Internet Explorer 7 trở về trước, thì trước tiên bạn nên chỉ định kích thước mặc định. Điều này sẽ đảm bảo quảng cáo hiển thị khi truy vấn phương tiện không được hỗ trợ. Lưu ý rằng việc đặt kích thước của mã quảng cáo qua CSS trong tờ mẫu ngoài không đượ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:inline-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-1234"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
Trong ví dụ này, không có quảng cáo nào được hiển thị nếu chiều rộng màn hình nhỏ hơn 400px.
