Đơn vị quảng cáo

Cách sửa đổi mã quảng cáo thích ứng

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:

Lưu ý: Các ví dụ mô tả trong bài viết này là các nội dung sửa đổi chấp nhận được đối với mã quảng cáo AdSense. Bạn sẽ không vi phạm Chính sách chương trình AdSense nếu sửa đổi mã quảng cáo thích ứng theo những cách đã phê duyệt này.

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="//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:

  1. 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.
  2. Trong mã mẫu:
    • Thay thế tất cả mục example_responsive_1 bằ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-XXXXXXX11XXX9 bằng ID nhà xuất bản của chính bạn.
    • Thay 8XXXXX1 bằng ID đơn vị quảng cáo của chính bạn.
  3. 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 320px100px bằ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 468px60px bằ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 728px90px bằ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.
  4. 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.

Lưu ý: Bạn chỉ nên sử dụng các tính năng nâng cao này nếu biết rõ cách sửa đổi mã quảng cáo của mình.

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:

Ví dụ về chiều rộng mở rộng với chiều cao cố định
Ví dụ này cho bạn thấy cách sửa đổi mã quảng cáo đáp ứng của bạn để chỉ định chiều cao cố định là 90px và chiều rộng biến thiên từ chiều rộng tối thiểu là 400px đến chiều rộng tối đa là 970px:
<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="//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:

Ví dụ về kích thước chính xác cho chiều rộng màn hình
Nếu biết kích thước đơn vị quảng cáo chính xác cho mỗi thiết bị phù hợp nhất với trang web đáp ứng, thì bạn có thể sử dụng truy vấn phương tiện CSS3 để đặt kích thước đơn vị quảng cáo thích ứng. Các ví dụ sau cho bạn thấy cách sửa đổi mã quảng cáo để sử dụng truy vấn phương tiện CSS3:
<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="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
Các quy tắc @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:

Ví dụ về ẩn quảng cáo cho các kích thước màn hình cụ thể
Nếu chỉ muốn hiển thị quảng cáo cho các kích thước màn hình nhất định, bạn có thể sử dụng CSS để thực hiện việc này. Ví dụ sau cho bạn thấy cách sửa đổi mã quảng cáo để sử dụng truy vấn phương tiện truyền thông CSS3 nhằm ẩn quảng cáo cho các kích thước màn hình cụ thể:
<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="//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.

Ngay cả khi có thể ẩn quảng cáo một cách linh hoạt, bạn vẫn phải tuân thủ chính sách về vị trí đặt quảng cáo của chúng tôi trong mọi trường hợp. Xin lưu ý rằng Chính sách chương trình của chúng tôi chỉ cho phép bạn thực hiện các nội dung sửa đổi có giới hạn đối với mã.
Thông tin này có hữu ích không?
Chúng tôi có thể cải thiện trang này bằng cách nào?