Cara Atur Matched Content Google Adsense Agar Tetap Responsive di Mobile Dan Desktop

BLOG X KOMO Forum Google Adsense Discussion Cara Atur Matched Content Google Adsense Agar Tetap Responsive di Mobile Dan Desktop

This topic contains 0 replies, has 1 voice, and was last updated by Cara Atur Matched Content Google Adsense Agar Tetap Responsive di Mobile Dan Desktop Febri Tri Harmoko 6 days, 14 hours ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #8844

    Kali ini saya mau share pengalaman saya mengenai Matched Content dari Google Adsense agar tetap responsive meski tampil di desktop maupun mobile.
    Belakangan ini google sudah meng-upgrade fitur iklan milik-nya, salah satunya fitur pada matched content ads.

    Mereka menambahkan pengaturan untuk kolom dan baris pada iklan matched content.

    seperti yang sudah mereka jelaskan dengan detail di sini: https://goo.gl/9uU8nP

    Tapi ada masalah saat kita menambahkan pengaturan kolom dan baris pada matched content, karna tidak semua pengaturan di dukung sama fitur ini.
    contohnya pada iklan jenis text_card yang saya gunakan di blog ini.

    Saya ingin text_card tampil di desktop dengan 7 baris dan 2 kolom, sedangkan pada tampilan mobile 7 baris dan 1 kolom. setelah di setting ternyata iklan blank alias tidak mau tampil.

    Ini artinya pengaturan tersebut tidak di dukung sama fitur matched content yang baru.

    Bagaimana solusinya?
    Disini akan saya bagikan solusinya berdasarkan pengalaman saya.

    cukup kita membuat tag baru untuk mengatur atau melakukan trik di sini, misalnya kita bermain di tag media screen.

    lihat kode iklan yang saya gunakan berikut ini:

    
    <div class="iklan-desktop-hide-desktop">
    <ins class="adsbygoogle"
         style="display:block;"
         data-ad-client="ca-pub-xxxxxxxx"
         data-ad-slot="xxxxxxx"
         data-matched-content-ui-type="text_card"
         data-matched-content-rows-num="7"
         data-matched-content-columns-num="1"
         data-ad-format="autorelaxed"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    </div>
    <div class="iklan-desktop-hide-mobile">
    <ins class="adsbygoogle"
         style="display:block;"
         data-ad-client="ca-pub-xxxxxxxxx"
         data-ad-slot="xxxxxx"
         data-matched-content-ui-type="text_card"
         data-matched-content-rows-num="7"
         data-matched-content-columns-num="2"
         data-ad-format="autorelaxed"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    </div>
    

    Bisa di lihat kalau ada kode class “iklan-desktop-hide-desktop” & “iklan-desktop-hide-mobile” yang kita gunakan untuk bermain show / hide pada tampilan layar tertentu.

    Untuk mengaturnya, saya lebih memilih pengaturan seperti ini:

    
    .iklan-desktop-hide-desktop{
    display: none;
    }
    
    /* 767px and below screen sizes */@media (max-width:767px){
    
    /* 1439px and below screen sizes */.iklan-desktop-hide-desktop{
    display: block;
    }
    
    .iklan-desktop-hide-mobile{
    display: none;
    }
    
    }
    

    Kalian bisa atur sesuka hati sesuai kebutuhan, di atas adalah contoh penerapan dari trik yang ingin saya bagikan.
    Sisahnya tinggal improfisasi sendiri atau gunakan pengaturan yang sama seperti yang saya gunakan juga bisa.

    BTW, trik ini bisa berguna juga untuk memainkan iklan jenis billboard agar tetap responsive meski di mobile screen sekalipun.

    Semoga bermanfaat.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

Login to your account below

Retrieve your password

Please enter your username or email address to reset your password.