Cara Sembunyikan/Tampilan Iklan Adsense yang berbeda Dalam Desktop & Mobile Tergantung Pada Resolusi Layar

 

Google Adsense

 Google AdSense telah memperkenalkan kembali iklan Responsif untuk memastikan Ad dapat ditampilkan tergantung pada resolusi layar. Sebagai contoh, ketika Anda memilih iklan responsif, iklan leaderboard 728 × 90 akan ditampilkan dalam versi desktop dan lebih kecil 468 × 60 banner pemirsa di tablet. Tetapi bagaimana jika Anda benar-benar ingin menyembunyikan iklan?
Banyak orang bertanya kepada saya berbagai pertanyaan seperti "Bagaimana untuk menampilkan iklan AdSense hanya di ponsel?", "Bagaimana untuk menampilkan iklan AdSense hanya di desktop?" Atau "Bagaimana untuk menampilkan iklan yang berbeda di desktop dan mobile?". Yah, aku telah menghadapi masalah ini sendiri beberapa bulan kembali dan datang dengan solusi, yang saya akan berbagi dengan semua orang sekarang. Ini mungkin akan memecahkan sebagian besar masalah Anda.

Different Ways To Achieve This:

Ada berbagai cara di mana Anda dapat memecahkan masalah ini. Anda dapat mencari plugin Wordpress atau Anda dapat menggunakan script khusus.

Menggunakan WordPress Plugin

Ada banyak plugin di WordPress yang akan memenuhi kebutuhan Anda. Anda dapat menggunakan plugin seperti Ad Inserter , Advanced Ads , dll Saya pribadi telah menggunakan mereka di beberapa blog saya. Mereka sangat efektif, mudah digunakan dan Anda tidak perlu pengetahuan teknis untuk bekerja dengan mereka.

Menggunakan CSS Media Query

Jika Anda pandai dasar HTML & CSS, ini akan menjadi solusi. Bahkan jika Anda tidak, saya akan mencoba untuk membuat Anda memahami cara kerjanya.
Berikut adalah naskah unit iklan ketika Anda membuat iklan baru.

  <Script async src = "// pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> </ script>

 <Ins class = "adsbygoogle"
  style = "display: inline-block; width: 336px; height: 280 piksel"
  Data-ad-client = "ca-pub-7525498198"
  Data-iklan-slot = "6727986783"> </ ins>
 <Script>
 (Adsbygoogle = window.adsbygoogle || []) mendorong ({}).;
 </ Script> 

Sembunyikan Iklan AdSense di ponsel menggunakan CSS:

Dengan membuat tweak sederhana dalam kode di atas, kita dapat menyembunyikan iklan di mobile dan membuatnya hanya menampilkan di desktop atau tablet.
Buat kelas CSS dan menggunakan query Media CSS, mengingat lebar layar . Di sini saya telah membuat sebuah kelas "hidead", yang tidak akan menampilkan isi jika ukuran layar kurang dari 480px.
Tambahkan kelas yang sama untuk kode AdSense Anda juga. Yang akan membuat kode terlihat seperti ini:

<Style>
 @media (max-width: 480px) {
 .hidead {
 ! Display: none penting;
 }
 }
 </ Style>

 <Script async src = "// pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> </ script>

 <Ins class = "adsbygoogle hidead"
  style = "display: inline-block; width: 336px; height: 280 piksel"
  Data-ad-client = "ca-pub-7525498198"
  Data-iklan-slot = "6727986789"> </ ins>
 <Script>
 (Adsbygoogle = window.adsbygoogle || []) mendorong ({}).;
 </ Script> 

 
Catatan: Ganti penerbit id (data-ad-client) dan id slot iklan (data-ad-slot) dengan ID AdSense Anda sendiri.

Sembunyikan Iklan AdSense di desktop atau tablet menggunakan CSS:

Ini hampir mirip dengan kasus di atas. Hanya ada satu perubahan yang Anda harus membuat untuk membuatnya bekerja. Menggantikan "max-width" di CSS dengan "min-width". Ini tidak akan menampilkan iklan jika ukuran layar  lebih dari 480px.
Berikut kode:

  <Style>
 @media (min-width: 480px) {
 .hidead {
 ! Display: none penting;
 }
 }
 </ Style>

 <Script async src = "// pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> </ script>

 <Ins class = "adsbygoogle hidead"
  style = "display: inline-block; width: 336px; height: 280 piksel"
  Data-ad-client = "ca-pub-7525498198"
  Data-iklan-slot = "6727986789"> </ ins>
 <Script>
 (Adsbygoogle = window.adsbygoogle || []) mendorong ({}).;
 </ Script> 

Menggunakan Custom Java Script

Memahami dasar-dasar javascript cukup untuk menangani dengan metode ini. Di sini, kita akan menggunakan kondisional jika tag untuk menyembunyikan atau menampilkan unit iklan tergantung pada resolusi layar.

Sembunyikan Iklan AdSense di ponsel menggunakan script khusus:

Kode iklan adalah hampir sama, berharap bahwa di sini kita akan menggunakan variabel (td_screen_width) yang mendefinisikan lebar layar. Dan kita menulis kondisi jika untuk menampilkan kode iklan sesuai dengan kebutuhan kita.
Berikut adalah kode:

  <Script async src = "// pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> </ script>
 <Script type = "text / javascript">
 var td_screen_width = document.body.clientWidth;

 jika (td_screen_width> = 468) {
  / * Monitor besar * /
  document.write ( '<ins class = "adsbygoogle" style = "display: inline-block; width: 300px; height: 250px" Data-ad-client = "ca-pub-75254981981XXXXX" Data-iklan-slot = "2626813281 "> </ ins> ');
  (Adsbygoogle = window.adsbygoogle || []) mendorong ({}).;
  }
  </ Script> 

Catatan: Ganti penerbit id (data-ad-client) dan id slot iklan (data-ad-slot) dengan ID AdSense Anda sendiri.

Sembunyikan Iklan AdSense di  komputer desktop atau tablet menggunakan script khusus:

Sekali lagi, kode ini mirip dengan yang di atas. Anda hanya perlu perubahan nilai dalam jika kondisi. Memeriksa kode di bawah ini:

  <Script async src = "// pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> </ script>
 <Script type = "text / javascript">
 var td_screen_width = document.body.clientWidth;

 jika (td_screen_width <468) {
  / * Telepon * /
  document.write ( '<ins class = "adsbygoogle" style = "display: inline-block; width: 300px; height: 250px" Data-ad-client = "ca-pub-75254981981XXXXX" Data-iklan-slot = "4971251185 "> </ ins> ');
  (Adsbygoogle = window.adsbygoogle || []) mendorong ({}).;
  }
  </ Script> 

Gunakan Iklan AdSense yang berbeda untuk mobile desktop pada lokasi yang sama:

Anda bahkan dapat menggunakan dua iklan yang berbeda untuk mobile dan desktop di lokasi yang sama. Berikut kode:

  <Script async src = "// pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> </ script>
 <Script type = "text / javascript">
 var td_screen_width = document.body.clientWidth;

                     jika (td_screen_width> = 468) {
                         / * Monitor besar * /
                         document.write ( '<ins class = "adsbygoogle" style = "display: inline-block; width: 468piks; height: 15px" Data-ad-client = "ca-pub-75254981981XXXXX" Data-iklan-slot = "3494921416 "> </ ins> ');
                         (Adsbygoogle = window.adsbygoogle || []) mendorong ({}).;
                     }
                
                     jika (td_screen_width <468) {
                         / * Telepon * /
                         document.write ( '<ins class = "adsbygoogle" style = "display: inline-block; width: 200px; height: 90px" Data-ad-client = "ca-pub-75254981981XXXXX" Data-iklan-slot = "4972194885 "> </ ins> ');
                         (Adsbygoogle = window.adsbygoogle || []) mendorong ({}).;
                     }
                 </ Script> 

Implementasi kode di atas akan membantu Anda dalam sebagian besar kasus yang anda alami. 

berikan  komentar Anda di bawah ini dan kami akan dengan senang hati membantu Anda.