Tùy chỉnh Google Adsense tương thích với các loại thiết bị bằng CSS

Có lẽ đến thời điểm hiện tại việc dùng Smartphone hoặc Tablet để đọc tin tức đã không còn xa lạ nữa, nên việc thiết kế một trang web Responsive ( tương thích với các loại thiết bị có kích thước màn hình khác nhau như Laptop, Smartphone, Tablet… ) là điều tất yếu nhằm thỏa thị hiếu của người dùng.

Bên cạnh đó, khi bạn đặt quảng cáo Google Adsense bắt buộc cũng phải tương thích luôn, nếu không thì nó sẽ hiển thị không đẹp và bị vỡ trên trang web Responsive liền.

Hiện tại, thì Google Adsense cũng đã hỗ trợ người dùng bằng Quảng cáo đáp ứng, chỉ cần tạo là sử dụng được ngay. Nó có thể tương thích và tự điều chỉnh theo kích thước màn hình khác nhau. Nếu vậy thì mình viết bài này để làm gì? Đều có nguyên nhân hết các bạn ạ.

Tuy là nó tương thích nhưng lại không hiển thị như ý mình muốn. Ví dụ mình muốn nó hiển thị quảng cáo 300×250, quảng cáo này khi hiện trên Smartphone thì to hơn để thu hút người dùng hơn, và quảng cáo này thì được người dùng nhấp chuột vào nhiều nhất, mà nó lại hiện ra quảng cáo 468×100 nhỏ hơn.

Vì vậy mà mình mới viết bài này để tùy chỉnh theo ý mình muốn, và điều đặt biệt là với cách này đã được Google Adsense cho phép và không quy phạm chính sách của Google Adsense, nên bạn cứ yên tâm mà sử dụng nha.

Trừ khi, bạn áp dụng cái này cho quảng cáo đầu tiên trên màn hình Smartphone to hơn kích thước 300×250, tức là ở phần Header, nếu bạn để to đùng như vậy sẽ bị quy phạm chính sách của Google Adsense và sẽ có thư cảnh báo bạn trong 3 ngày, nếu không khắc phục thì sẽ chết Google Adsense, bạn nên để nó tùy chỉnh thành 468×60, hoặc 320×100 thì được, hoặc tổt nhất là bạn có thể cho nó quảng cáo đáp ứng là được. Còn những cái khác bạn có thể tùy chỉnh CSS theo hướng dẫn bên dưới của mình là được.

Hướng dẫn tùy chỉnh Google Adsense

Bước 1: Bạn vào tạo một mã quảng cáo Google Adsense bất kỳ, kích thước nào cũng được. Vì lát nữa mình sẽ tự thay đổi nó bằng CSS. Ví dụ, bạn có 1 đoạn mã như thế này, kích thước ban đầu là 728×90:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- GA_728_90 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-xxx"
     data-ad-slot="xxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Bước 2: Tùy chỉnh nó để khi hiển thị trên Laptop là 728×90, khi hiển thị trên điện thoại Smartphone là 336×280, khi hiển thị trên Tablet là 728×90, nó sẽ trở thành như này:

<div style="text-align:center"><style>
.ad-slot-1{ width: 336px; height: 280px; }
@media screen and (min-width:500px) { .ad-slot-1 {width: 468px; height: 60px;} }
@media screen and (min-width: 800px) { .ad-slot-1 { width: 728px; height: 90px; } 
@media screen and (max-width: 1024px) { .ad-slot-1 { width: 728px; height: 90px; }}
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- GA_728_90 -->
<ins class="adsbygoogle ad-slot-1"
     style="display:inline-block;"
     data-ad-client="ca-pub-xxx"
     data-ad-slot="xxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>

Các bạn chú ý trong thẻ <Style> ở trên:
– Dòng 1: dành cho hiển thị trên điện thoại Smartphone.
– Dòng 2: dành cho hiển thị trên Tablets màn hình nhỏ, hoặc khi nghiêng điện thoại Smartphone.
– Dòng 3: dành cho Tablets màn hình nhỏ.
– Dòng 4: dành cho Tablets màn hình lớn.
Bạn nhớ thay xxx thành id adsense của bạn, chú ý những chỗ đánh dấu vàng.
Tùy theo kích thước của trang web bạn như thế nào mà bạn có thể chỉnh width và height cho phù hợp.
Bạn xem hình ảnh tham khảo khi tùy chỉnh Google Adsense, hoặc bạn có thể xem trang web mình với các loại thiết bị để xem nó hoạt động có hiệu quả hay không.

– Khi xem trên Laptop

– Khi xem trên điện thoại

Bạn không được để quảng cáo Adsense ở Header lớn hơn kích thước 300×250, như vậy sẽ vi phạm chính sách Google Adsense.

Lời kết

Với cách hướng dẫn trên thì bạn có thể tùy thích tạo cho mình một mã quảng cáo Adsense hoạt động hiệu quả trên mọi thiết bị mà không vi phạm quy định của Adsense. Nó sẽ giúp bạn rất nhiều trong việc hiển thị những quảng cáo hay và chất lượng, nhằm cuốn hút người xem và nhấp chuột vào quảng cáo nhiều hơn. Nhờ thế mà doanh thu của bạn tăng đột biến đấy nhé.
Vậy là bạn đã hiểu được và biết cách thay đổi mã quảng cáo Google Adsense cho phù hợp với mọi thiết bị có kích thước màn hình khác nhau rồi phải không. Mọi thắc mắc vui lòng để comment bên dưới. Mình sẽ hỗ trợ bạn hết mình.
Chúc bạn thành công.