Tutorial 2x How to limit the size of Google AdSense ads - Cách giới hạn kích thước của quảng cáo Google AdSense cho XenForo 2

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
13,215
Được Like
9,101
How to limit the size of Google AdSense ads - Cách giới hạn kích thước của quảng cáo Google AdSense cho XenForo 2

Code này trực tiếp từ bộ phận hỗ trợ của Google. Xin lưu ý rằng điều này sẽ không hoạt động cho AutoAds.


Nếu bạn nhận thấy rằng code 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 code quảng cáo của mình để đáp ứng tốt hơn các yêu cầu của trang web. Các ví dụ sau đây cho bạn thấy cách thực hiện chính xác các sửa đổi này.

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

Ví dụ về kích thước đơn vị quảng cáo chính xác trên mỗi chiều rộng màn hình
Ví dụ này cho bạn biết cách sửa đổi code đá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, tức 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 phải có bất kỳ kinh nghiệm nào trước đây về truy vấn phương tiện CSS hoặc sửa đổi code quảng cáo AdSense để làm theo ví dụ này.

Dưới đây là một số code quảng cáo đáp ứng được sửa đổi đặt các kích thước đơn vị quảng cáo chính xác sau trên mỗi chiều rộng màn hình:
  • Đối với chiều rộng màn hình lên đến 500px: đơn vị quảng cáo 320x100.
  • Đối với 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 728x90.

Mã:
<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>

Để điều chỉnh code mẫu này cho trang web của riêng bạn:
  1. Tạo đơn vị hiển thị quảng cáo trong tài khoản AdSense của bạn, đảm bảo rằng bạn đã chọn Responsivetrong phần "Ad size". Ghi lại thông tin sau từ code 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 code mẫu:
    • Thay thế tất cả các trường hợp của example_responsive_1 bằng một tên duy nhất, ví dụ: Home_Page, front_page_123, v.v.
      Ghi chú:
      • Tên riêng của bạn chỉ được chứa các chữ cái tiếng Anh (A-Z), số và dấu gạch dưới, và 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 khi bạn điều chỉnh code mẫu này.
    • Thay ca-pub-XXXXXXX11XXX9 thành ID nhà xuất bản của riêng bạn.
    • Thay 8XXXXX1 với ID đơn vị quảng cáo của riêng bạn.
  3. Quyết định kích thước bạn muốn đơn vị quảng cáo của mình nhận được trên mỗi chiều rộng màn hình:
    • Nếu bạn hài lòng với các kích thước đơn vị quảng cáo hiện có trong code 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 các kích thước đơn vị quảng cáo khác nhau trên mỗi chiều rộng màn hình, thì trong code mẫu:
      • Thay 320px và 100px thành 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ên đến 500px.
      • Thay 468px và 60px thành chiều rộng và chiều cao của đơn vị quảng cáo bạn muốn sử dụng cho các chiều rộng màn hình từ 500px đến 799px.
      • Thay 728px và 90px thành chiều rộng và chiều cao của đơn vị quảng cáo bạn muốn sử dụng cho các chiều rộng màn hình từ 800px trở lên.
  4. Sao chép và dán code quảng cáo đã sửa đổi của bạn vào mã nguồn HTML của trang mà bạn muốn quảng cáo xuất hiện.
    Ghi chú: Sau khi đặt code quảng cáo, chúng tôi khuyên bạn nên thử nghiệm quảng cáo của mình trên các thiết bị và màn hình khác nhau để đảm bảo rằng hành vi đáp ứng đang hoạt động chính xác.
Chỉ định chiều rộng có thể mở rộng và chiều cao cố định
Bạn có thể sửa đổi code quảng cáo đáp ứng của mình để chỉ định chiều rộng có thể mở rộng và chiều cao cố định cho đơn vị quảng cáo của mình thông qua CSS. Ví dụ sau cho bạn thấy cách thực hiện các sửa đổi này:

Chiều rộng có thể mở rộng với ví dụ về chiều cao cố định

Ví dụ này cho bạn biết cách sửa đổi code quảng cáo đáp ứng của mình để chỉ định chiều cao cố định là 90px và chiều rộng có thể thay đổi từ chiều rộng tối thiểu 400px đến chiều rộng tối đa 970px:

Mã:
<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 mỗi chiều rộng màn hình
Bạn có thể sửa đổi code 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 trên mỗi 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 trên mỗi thiết bị phù hợp nhất với trang web đáp ứng của mình, thì bạn có thể sử dụng truy vấn phương tiện CSS3 để đặt kích thước cho đơn vị quảng cáo đáp ứng của mình. Ví dụ sau cho bạn biết cách sửa đổi code quảng cáo của mình để sử dụng các truy vấn phương tiện CSS3:

Mã:
<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>

Chúc các bạn thành công.


Nguồn: xenforo.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hosting Giá rẻ

hosting free
hosting free
Top Bottom