Unit iklan

Cara mengubah kode iklan responsif

Berikutnya: Panduan untuk unit iklan Display berukuran tetap

Jika merasa bahwa kode iklan responsif kami tidak memenuhi kebutuhan Anda, Anda dapat mengubah kode iklan untuk memenuhi persyaratan situs responsif Anda dengan lebih baik. Contoh berikut menunjukkan cara melakukan perubahan tersebut.

Penting:

Jika Anda baru mengenal kueri media CSS dan belum berpengalaman mengubah kode iklan, sebaiknya mulai dengan Contoh ukuran unit iklan yang tepat per lebar layar.
Jika Anda sudah memahami kueri media CSS dan terbiasa mengubah kode iklan, silakan langsung buka bagian Contoh fitur kode iklan responsif lanjutan.

Catatan: Contoh yang dijelaskan dalam artikel ini adalah perubahan yang dapat diterima pada kode iklan AdSense. Anda tidak akan melanggar kebijakan Program AdSense jika mengubah kode iklan responsif dengan cara yang telah disetujui ini.

Contoh ukuran unit iklan yang tepat per lebar layar

Contoh ini menunjukkan cara mengubah kode iklan responsif untuk menetapkan ukuran unit iklan yang spesifik untuk tiga rentang lebar layar, yaitu, seluler, tablet, dan desktop. Tidak diperlukan pengalaman sebelumnya tentang kueri media CSS atau mengubah kode iklan AdSense untuk mengikuti contoh ini.

Berikut ini beberapa kode iklan responsif yang diubah untuk menetapkan ukuran unit iklan yang tepat per lebar layar berikut:

Untuk lebar layar hingga 500 piksel: unit iklan 320x100.
Untuk lebar layar antara 500 piksel dan 799 piksel: unit iklan 468x60.
Untuk lebar layar 800 piksel dan yang lebih lebar: unit iklan 728x90.

<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>

Untuk mengadaptasi kode contoh ini bagi situs Anda sendiri:

Buat unit iklan bergambar di akun AdSense Anda, dan pastikan Anda membiarkan opsi Responsif tetap dipilih di bagian "Ukuran iklan". Catat informasi berikut dari kode iklan responsif:
- ID penayang, misalnya, ca-pub-1234567891234567
- ID unit iklan (data-ad-slot), misalnya, 1234567890.
Pada kode contoh:
- Ganti semua example_responsive_1 dengan nama unik, misalnya Home_Page, front_page_123, dsb.
  Catatan:
  - Nama khusus hanya boleh berisi huruf dalam bahasa Inggris (A-Z), angka, serta setrip garis, dan karakter pertama harus berupa huruf dalam bahasa Inggris.
  - Anda harus menggunakan nama khusus yang berbeda setiap kali Anda menyesuaikan kode contoh ini.
- Ganti ca-pub-XXXXXXX11XXX9 dengan ID penayang Anda sendiri.
- Ganti 8XXXXX1 dengan ID unit iklan Anda sendiri.
Tentukan ukuran yang ingin Anda gunakan di unit iklan per lebar layar:
- Jika puas dengan ukuran unit iklan yang ada di kode contoh, Anda tidak perlu membuat perubahan lagi.
- Jika Anda ingin menetapkan ukuran unit iklan per lebar layar yang berbeda, pada kode contoh:
  - Ganti 320px dan 100px dengan lebar dan tinggi unit iklan yang ingin Anda gunakan untuk lebar layar hingga 500 piksel.
  - Ganti 468px dan 60px dengan lebar dan tinggi unit iklan yang ingin Anda gunakan untuk lebar layar antara 500 piksel dan 799 piksel.
  - Ganti 728px dan 90px dengan lebar dan tinggi unit iklan yang ingin Anda gunakan untuk lebar layar 800 piksel dan yang lebih lebar.
Copy-paste kode iklan yang diubah ke kode sumber HTML di halaman tempat Anda ingin menampilkan iklan.
Catatan: Setelah menempatkan kode iklan, sebaiknya uji iklan di perangkat dan layar berbeda untuk memastikan perilaku responsif berfungsi dengan baik.

Contoh fitur kode iklan responsif lanjutan

Jika merasa bahwa kode iklan responsif kami tidak memenuhi kebutuhan Anda, ubah kode iklan untuk menentukan ukuran yang tepat bagi unit iklan Anda melalui CSS.

Catatan: Kami tidak menyarankan fitur lanjutan ini kecuali Anda yakin bisa mengubah kode iklan.

Menentukan lebar yang dapat diperluas dan tinggi tetap

Anda dapat mengubah kode iklan responsif untuk menentukan lebar yang dapat diperluas dan tinggi tetap untuk unit iklan melalui CSS. Contoh berikut menunjukkan cara melakukan modifikasi tersebut:

Contoh lebar yang dapat diperluas dengan tinggi tetap

Contoh ini menunjukkan cara mengubah kode iklan responsif untuk menentukan tinggi tetap 90 piksel dan lebar variabel dari minimum 400 piksel hingga maksimum 970 piksel:

<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>

Menentukan ukuran yang tepat per lebar layar

Anda dapat mengubah kode iklan responsif untuk menentukan ukuran yang tepat untuk unit iklan Anda melalui CSS. Contoh berikut menunjukkan cara melakukan modifikasi tersebut:

Contoh ukuran yang tepat per lebar layar

Jika ukuran unit iklan yang tepat per perangkat yang paling sesuai dengan situs responsif Anda sudah diketahui, Anda dapat menggunakan kueri media CSS3 untuk menetapkan ukuran unit iklan responsif. Contoh berikut menunjukkan cara mengubah kode iklan untuk menggunakan kueri media CSS3:

<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>

Aturan @media adalah sintaks CSS3, dan didukung di semua browser modern. Jika ingin mendukung browser lama, seperti Internet Explorer 7 atau versi sebelumnya, sebaiknya tentukan ukuran default terlebih dahulu. Hal ini akan memastikan penayangan iklan bahkan saat kueri media tidak didukung. Perhatikan bahwa menetapkan ukuran kode iklan melalui CSS di lembar gaya eksternal tidak didukung secara resmi.

Menyembunyikan unit iklan

Pada kasus tertentu, khususnya pada perangkat seluler yang lebih kecil, Anda mungkin tidak ingin menampilkan iklan sama sekali. Jika ingin menyembunyikan unit iklan, Anda dapat menetapkan parameter dengan kueri media CSS sehingga permintaan iklan tidak dibuat dan iklan tidak ditampilkan. Contoh berikut menunjukkan cara melakukan modifikasi tersebut:

Contoh menyembunyikan iklan untuk ukuran layar tertentu

Jika ingin hanya menampilkan iklan untuk ukuran layar tertentu, Anda dapat menggunakan CSS untuk melakukannya. Contoh berikut menunjukkan cara memodifikasi kode iklan untuk menggunakan kueri media CSS3 untuk menyembunyikan ukuran layar tertentu.

<style type="text/css">

    .adslot_1 { display:inline-block; width: 320px; height: 50px; }

    @media (max-width: 400px) { .adslot_1 { display: none; } }

    @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"

       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>

Di contoh ini, tidak ada iklan yang akan ditampilkan jika lebar layar kurang dari 400 piksel.

Meskipun Anda memiliki fleksibilitas ini, ingatlah untuk selalu mengikuti kebijakan penempatan iklan kami. Perhatikan bahwa hanya modifikasi terbatas pada kode yang diizinkan oleh kebijakan program kami.

Apakah ini membantu?

Bagaimana cara meningkatkannya?