Unit iklan

Cara mengubah suai kod iklan responsif anda

Seterusnya: Garis panduan untuk unit iklan paparan bersaiz tetap

Jika anda mendapati bahawa kod iklan responsif kami tidak merangkumi semua ciri yang anda perlukan, anda boleh mengubah suai kod iklan anda untuk memenuhi keperluan laman responsif anda dengan lebih baik. Contoh dalam artikel ini menunjukkan cara membuat pengubahsuaian ini dengan betul kepada anda.

Sebelum anda bermula:

Jika anda baru menggunakan pertanyaan media CSS dan mengubah suai kod iklan anda, kami mengesyorkan agar anda bermula dengan contoh saiz unit iklan yang tepat mengikut lebar skrin.
Jika anda sudah biasa dengan pertanyaan media CSS dan mengubah suai kod iklan anda, anda boleh melangkau terus kepada bahagian contoh ciri kod iklan responsif lanjutan.

Nota: Contoh yang dijelaskan dalam artikel ini ialah pengubahsuaian yang boleh diterima pada kod iklan AdSense. Anda tidak akan melanggar dasar Program AdSense dengan mengubah suai kod iklan responsif anda melalui cara yang diluluskan.

Contoh saiz unit iklan yang tepat mengikut lebar skrin

Contoh ini menunjukkan kepada anda cara untuk mengubah suai kod responsif anda untuk menetapkan saiz unit iklan yang khusus bagi tiga julat lebar skrin, iaitu, mudah alih, tablet dan komputer. Anda tidak perlu mempunyai pengalaman yang terdahulu tentang pertanyaan media CSS atau mengubah kod iklan AdSense untuk mengikut contoh ini.

Berikut ialah beberapa kod iklan responsif diubah suai yang menetapkan saiz unit iklan tepat mengikut lebar skrin yang berikut:

Untuk lebar skrin sehingga 500px: unit iklan 320x100.
Untuk lebar skrin antara 500px hingga 799px: unit iklan 468x60.
Untuk lebar skrin 800px 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?client=i-gno/re-d1234567890123456" crossorigin="anonymous"></script>

  <!-- example_responsive_1 -->

  <ins class="adsbygoogle example_responsive_1"

       style="display:block"

       data-ad-client="i-gno/re-d1234567890123456"

       data-ad-slot="8XXXXX1"></ins>

  <script>

  (adsbygoogle = window.adsbygoogle || []).push({});

  </script>

Untuk menyesuaikan kod sampel ini bagi laman anda sendiri:

Buat unit iklan paparan dalam akaun AdSense anda, pastikan anda membiarkan Responsif dipilih dalam bahagian "Saiz iklan". Catat maklumat yang berikut daripada kod iklan responsif anda:
- ID penerbit anda, sebagai contoh, i-gno/re-d1234567890123456
- ID unit iklan anda (data-ad-slot), sebagai contoh, 1234567890.
Dalam kod sampel:
- Gantikan semua tika example_responsive_1 dengan nama unik, mis., Home_Page, front_page_123, l.
  Nota:
  - Nama unik anda hanya perlu mengandungi huruf bahasa Inggeris (AZ), nombor dan garis bawah. Aksara pertama hendaklah huruf bahasa Inggeris.
  - Anda hendaklah menggunakan nama unik yang berlainan setiap kali anda menyesuaikan kod sampel ini.
- Gantikan i-gno/re-d1234567890123456 dengan ID penerbit anda sendiri.
- Gantikan 8XXXXX1 dengan ID unit iklan anda sendiri.
Tentukan saiz yang anda mahu untuk unit iklan anda mengikut lebar skrin:
- Jika anda berpuas hati dengan saiz unit iklan sedia ada dalam kod sampel, maka anda tidak perlu membuat apa-apa perubahan tambahan.
- Jika anda mahu menetapkan saiz unit iklan yang berlainan mengikut lebar skrin, maka, dalam kod sampel:
  - Gantikan 320px dan 100px dengan lebar serta tinggi unit iklan yang anda mahu gunakan untuk lebar skrin sehingga 500px.
  - Ganti 468px dan 60px dengan lebar serta tinggi unit iklan yang anda mahu gunakan untuk lebar skrin antara 500px hingga 799px.
  - Gantikan 728px dan 90px dengan lebar serta tinggi unit iklan yang anda mahu gunakan untuk lebar skrin 800px dan yang lebih lebar.
Salin dan tampal kod iklan yang anda ubah suai kepada kod sumber HTML halaman yang anda mahukan untuk memaparkan iklan anda.
Petua: Selepas meletakkan kod iklan anda, kami mengesyorkan agar anda menguji iklan anda pada peranti dan skrin yang berlainan untuk memastikan bahawa gelagat responsif berfungsi dengan betul.

Contoh ciri kod iklan responsif lanjutan

Jika anda mendapati bahawa kod iklan responsif kami tidak merangkumi semua ciri yang anda perlukan, anda boleh mengubah suai kod iklan anda untuk menentukan saiz yang tepat bagi unit iklan anda melalui CSS.

Nota: Kami tidak mengesyorkan bahawa anda menggunakan ciri lanjutan ini melainkan anda yakin tentang cara mengubah suai kod iklan anda.

Nyatakan lebar yang boleh diperluas dan tinggi tetap

Anda boleh mengubah kod iklan responsif anda untuk menentukan lebar yang boleh diperluas dan tinggi tetap bagi unit iklan anda melalui CSS. Contoh berikut menunjukkan cara untuk membuat pengubahsuaian ini:

Contoh lebar yang boleh diperluas dengan tinggi yang tetap

Contoh ini menunjukkan kepada anda cara mengubah kod iklan responsif anda untuk menetapkan tinggi tetap sebanyak 90px dan lebar boleh diubah daripada lebar min 400px kepada lebar maks 970px:

<ins class="adsbygoogle"

       style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"

       data-ad-client="i-gno/re-d1234567890123456"

       data-ad-slot="5678"></ins>

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=i-gno/re-d1234567890123456" crossorigin="anonymous"></script>

    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Tentukan saiz yang tepat mengikut lebar skrin

Anda boleh mengubah suai kod iklan responsif anda untuk menentukan saiz yang tepat bagi unit iklan anda melalui CSS. Contoh berikut menunjukkan cara untuk membuat pengubahsuaian ini:

Contoh saiz yang tepat mengikut lebar skrin

Jika anda mengetahui saiz unit iklan yang tepat mengikut peranti yang paling sesuai dengan laman responsif anda, maka anda boleh menggunakan pertanyaan media CSS3 untuk menetapkan saiz unit iklan responsif anda. Contoh berikut menunjukkan kepada anda cara mengubah suai kod iklan anda untuk menggunakan pertanyaan 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:block;"

        data-ad-client="i-gno/re-d1234567890123456"

        data-ad-slot="5678"></ins>

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=i-gno/re-d1234567890123456" crossorigin="anonymous"></script>

    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Peraturan @media ialah sintaks CSS3 dan disokong pada semua penyemak imbas moden. Harap maklum bahawa tindakan menetapkan saiz unit iklan melalui CSS dalam helaian gaya luaran tidak disokong secara rasmi.

Menyembunyikan unit iklan

Dalam kes tertentu, terutamanya pada peranti mudah alih yang lebih kecil, anda mungkin tidak mahu memaparkan iklan sama sekali. Jika anda ingin menyembunyikan unit iklan, anda boleh menetapkan parameter melalui pertanyaan media CSS supaya tiada permintaan iklan dibuat dan tiada iklan dipaparkan. Contoh yang berikut menunjukkan cara untuk membuat pengubahsuaian ini:

Contoh menyembunyikan iklan untuk saiz skrin tertentu

Sekiranya anda hanya mahu memaparkan iklan untuk saiz skrin tertentu, anda boleh menggunakan CSS untuk berbuat demikian. Contoh yang berikut menunjukkan cara mengubah suai kod iklan anda untuk menggunakan pertanyaan media CSS3 bagi menyembunyikan iklan untuk saiz skrin tertentu:

<style type="text/css">

    .adslot_1 { display: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="i-gno/re-d1234567890123456"

       data-ad-slot="5678"></ins>

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=i-gno/re-d1234567890123456" crossorigin="anonymous"></script>

    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Dalam contoh ini, tiada iklan dipaparkan jika lebar skrin kurang daripada 400px.

Nota: Apabila anda mengubah suai kod iklan responsif yang telah disalin, anda perlu memadamkan dua baris ini:

data-ad-format="auto"

    data-full-width-responsive="true"

Nota: Walaupun terdapat kefleksibelan, anda perlu sentiasa mematuhi dasar peletakan iklan kami. Sentiasa ingat bahawa hanya pengubahsuaian terhad pada kod anda dibenarkan oleh Dasar program kami.

Adakah perkara ini membantu?

Bagaimanakah dapat kami meningkatkannya?