Hiển thị quảng cáo adsense trong bài viết theo kích thước màn hình

Bài này mình đề cập vào 2 vấn đề thứ nhất đặt quảng cáo theo vị trí và thứ hai không sử dụng được thẻ điều kiện mobile. Trước hết theo tiêu đề bài viết nếu bạn muốn chèn mã quảng cáo adsense trong bài viết bạn có thể tham khảo bài Hướng dẫn triển khai mã quảng cáo adsense trong bài viết của blogspot mà mình đã viết trước đây.

Vị trí đặt quảng cáo tốt nhất trong bài viết dưới dấu ngắt nháy, giữa bài và cuối bài, và mã quảng cáo được lấy sử dụng được lấy bằng mã Quảng cáo trong bài viết của adsense. Bạn không nên đặt mã ngay dưới tiêu đề như vậy sẽ vi phạm Chính sách về vị trí đặt quảng cáo của Google vì đặt quảng cáo bên dưới tiêu đề gây nhầm lẫn.

Vấn đề chính mình muốn đề cập trong bài khi bạn đã chèn mã quảng cáo vào bài viết nhưng lại muốn quảng cáo chỉ hiển thị theo kích thước màn hình cụ thể là trên điện thoại. Nguyên do là cách phân bổ quảng cáo bên sidebar trong trường hợp bạn đã làm ẩn sidebar ví dụ với kích thước 800px trở xuống, lúc này khi tải trang sẽ tải mã quảng cáo trong bài viết.

Với Blog khi bạn đã tắt chế độ xem trên điện thoại hoặc có thể nguyên nhân do cấu trúc template mà không đọc được dữ liệu với thẻ điều kiện mobile lúc này bạn cần sử dụng đến javascript với điều kiện kích thước màn hình

Trong trường hợp bạn sử dụng mã quảng cáo cấp trang được chèn trước thẻ đóng </head> khi bạn lấy mã quảng cáo trong bài viết bạn chỉ cần lấy như vậy là đủ, ví dụ:

Copy

<ins class='adsbygoogle' data-ad-client='ca-pub-4331462841481508' data-ad-format='fluid' data-ad-layout='in-article' data-ad-slot='5990241907' style='display:block'/>

Trở lại với bài viết cũ về cách chèn mã quảng cáo trong bài viết bạn cần đặt đoạn mã này trong một thẻ div có id ví dụ

Copy

<div id='ads_Code'>

// mã quảng cáo

</div>

Bây giở bạn sẽ thay // mã quảng cáo bằng đoạn script như sau với kích thước màn hình 800px trở xuống

Copy

<script>

var mql = window.matchMedia('screen and (max-width: 800px)');if (mql.matches){

document.write("<ins class='adsbygoogle' data-ad-client='ca-pub-4331462841481508' data-ad-format='fluid' data-ad-layout='in-article' data-ad-slot='5990241907' style='display:block'></ins>");

};

</script>

Như vậy khi tải trang với kích thước màn hình 800px trở xuống thì đoạn mã quảng cáo mới được tải và hiển thị còn kích thước lớn hơn 800px thì đoạn mã không được tải và hiển thị. Sử dụng cách này rất có lợi hơn so với bạn đặt css cho id {display: none} vì làm như vậy mã quảng cáo vẫn tải nhưng không hiển thị và khi kiểm tra phần tử sẽ báo lỗi.

Bạn có thể thay thế 800px bằng số khác hoặc có thể thay max bằng min đều được

Tags: adsenseBlogblogspotdữ liệuđiều kiệnquảng cáotemplatescript