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

Nếu nhận thấy mã quảng cáo đáp ứ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 là người mới sử dụng truy vấn phương tiện CSS và 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 với truy vấn phương tiện CSS và sửa đổi mã quảng cáo của mình, vui lòng đến thẳng phần Ví dụ về các tính năng mã quảng cáo đáp ứng nâng cao.

Hãy yên tâm rằng các ví dụ được mô tả trong bài viết này là các 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 đáp ứng của mình theo các cách đã được 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 chiều 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 đáp ứ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. Bạn không cần có kinh nghiệm trước về truy vấn phương tiện CSS hay 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 đáp ứng đã sửa đổi đặ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>

Để điều chỉnh mã mẫu này cho phù hợp với trang web của chính bạn:

1. Tạo đơn vị quảng cáo đáp ứng trong tài khoản AdSense của bạn và ghi lại các thông tin sau từ mã quảng cáo đáp ứng của bạn:
   • 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 tất cả các trường hợp example_responsive_1 bằng tên duy nhất, ví dụ: Home_Page, front_page_123, v.v.
     Ghi chú:

     • Tên duy nhất 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 duy nhất 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 cho mỗi chiều rộng màn hình:
   • Nếu bạn 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ì trong mã mẫu:
     • Thay 320px và 100px 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 468px và 60px 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 728px và 90px 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 nơi bạn muốn quảng cáo xuất hiện.
   Khi bạn đã đặt mã quảng cáo, chúng tôi khuyên 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 đáp ứng hoạt động chính xác.

Ví dụ về tính năng mã quảng cáo đáp ứng nâng cao

Nếu nhận thấy mã quảng cáo đáp ứng của chúng tôi không thực hiện mọi thứ bạn cần, thì bạn có thể sửa đổi mã quảng cáo của mình để chỉ định hình dạng chung (ngang, dọc và/hoặc hình chữ nhật) mà đơn vị quảng cáo của bạn phải tuân theo hoặc kích thước chính xác cho đơn vị quảng cáo của bạn qua CSS.

Lưu ý rằng chúng tôi khuyên bạn không nên sử dụng các tính năng nâng cao này trừ khi bạn tự tin về khả năng sửa đổi mã quảng cáo của mình.

Chỉ định hình dạng chung

Bạn có thể thực hiện sửa đổi đối với mã quảng cáo để chỉ định hình dạng chung (ngang, dọc và/hoặc hình chữ nhật) mà đơn vị quảng cáo của bạn phù hợp. Ví dụ sau cho bạn thấy cách thực hiện các sửa đổi này:

Ví dụ về dạng ngang

Ví dụ sau cho bạn thấy cách sửa đổi mã quảng cáo đáp ứng để chỉ định dạng ngang chung cho đơn vị quảng cáo:
<ins class="adsbygoogle"
    style="display:block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"
    data-ad-format="horizontal"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Theo mặc định, mã quảng cáo đáp ứng của chúng tôi bao gồm thẻ data-ad-format có giá trị "auto" cho phép hành vi định cỡ tự động cho đơn vị quảng cáo đáp ứng. Tuy nhiên, bạn có thể đặt dạng chung cho đơn vị quảng cáo đáp ứng bằng cách thay đổi giá trị data-ad-format thành một trong các giá trị sau: "rectangle", "vertical", "horizontal" hoặc bất kỳ kết hợp nào của những giá trị này được phân tách bằng dấu phẩy, ví dụ: "rectangle, horizontal".

Chỉ định chiều rộng mở rộng và chiều 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ử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 đáp ứ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ử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 bạn 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 đáp ứ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>

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 bạn muốn hỗ trợ các trình duyệt cũ hơn như Internet Explorer 7 trở xuống, chúng tôi khuyên bạn nên chỉ định kích thước mặc định trước. Đ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 trường hợp nào đó, cụ thể trên thiết bị di động nhỏ hơn, bạn có thể hoàn toàn không muốn hiển thị quảng cáo. Nếu bạn 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ử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 bạn chỉ muốn hiển thị quảng cáo cho các kích thước màn hình nào đó, 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 ẩ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ả với sự linh hoạt này, hãy nhớ luôn tuân theo chính sách vị trí đặt quảng cáo của chúng tôi. Lưu ý rằng bạn chỉ được phép thực hiện các sửa đổi có giới hạn đối với mã theo chính sách chương trình của chúng tôi.