Cara menyesuaikan unit Konten yang sesuai dan responsif

Jika Anda memiliki persyaratan khusus untuk unit Konten yang sesuai dan responsif, tampilan unit ini dapat disesuaikan dengan menambahkan parameter pada kode iklan Anda. Parameter ini memungkinkan Anda mengubah berbagai hal seperti tata letak unit Konten yang sesuai dan menentukan cara baris dan kolom rekomendasi disusun di dalamnya.

Anda juga dapat menggunakan parameter tersebut untuk menetapkan setelan yang berbeda untuk seluler vs. desktop. Misalnya, jika Anda memberikan nilai tunggal pada parameter tata letak, unit Konten yang sesuai akan memiliki tata letak yang sama di seluler dan desktop. Sementara jika Anda memberikan dua nilai pada parameter tata letak, berarti unit Konten yang sesuai akan memiliki satu tata letak pada seluler (nilai pertama) dan tata letak yang berbeda pada desktop (nilai kedua). Parameter tersebut juga berfungsi dengan unit Konten yang sesuai AMP.

Perhatikan bahwa opsi ini hanya tersedia untuk unit Konten yang sesuai dan responsif, serta bahwa semua parameter diperlukan agar penyesuaian berfungsi. Setelah mengubah kode iklan, pastikan Anda menguji unit Konten yang sesuai pada berbagai perangkat dan layar untuk memastikannya berfungsi dengan baik.

Catatan: Contoh yang dijelaskan dalam artikel ini adalah perubahan yang dapat diterima pada kode iklan AdSense. Anda tidak akan melanggar kebijakan program AdSense dengan mengubah kode Konten yang sesuai menggunakan cara yang telah disetujui ini.

Mengubah tata letak unit Konten yang sesuai

Parameter tata letak (data-matched-content-ui-type) memungkinkan Anda mengontrol susunan teks dan gambar di unit Konten yang sesuai. Misalnya, Anda dapat memilih untuk memiliki gambar dan teks secara berdampingan, gambar di atas teks, dsb.

Tersedia opsi tata letak berikut:

Gambar dan teks bersisian

Di tata letak ini, gambar dan teks muncul bersisian. Untuk memilih tata letak ini, tambahkan parameter data-matched-content-ui-type="image_sidebyside" ke kode iklan Anda.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_sidebyside"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Gambar dan teks bersisian dengan kartu

Di tata letak ini, gambar dan teks muncul bersisian dalam kartu. Untuk memilih tata letak ini, tambahkan parameter data-matched-content-ui-type="image_card_sidebyside" ke kode iklan Anda.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_card_sidebyside"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Gambar menumpuk di atas teks

Di tata letak ini, gambar dan teks ini disusun menumpuk satu sama lain. Untuk memilih tata letak ini, tambahkan parameter data-matched-content-ui-type="image_stacked" ke kode iklan Anda.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_stacked"
     data-matched-content-rows-num="3"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Gambar ditumpuk di atas teks dengan kartu

Di tata letak ini, gambar dan teks ini disusun menumpuk satu sama lain di dalam kartu. Untuk memilih tata letak ini, tambahkan parameter data-matched-content-ui-type="image_card_stacked" ke kode iklan Anda.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_card_stacked"
     data-matched-content-rows-num="3"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Hanya teks

Tata letak hanya teks tanpa gambar. Untuk memilih tata letak ini, tambahkan parameter data-matched-content-ui-type="text" ke kode iklan.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="text"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Teks dengan kartu

Tata letak hanya teks dalam sebuah kartu. Untuk memilih tata letak ini, tambahkan parameter data-matched-content-ui-type="text_card" ke kode iklan Anda.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="text_card"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Menentukan jumlah baris dan kolom di unit Konten yang sesuai

Rekomendasi di dalam unit Konten yang sesuai disusun dalam grid. Anda dapat menentukan jumlah baris dan kolom yang ingin ditampilkan dalam grid. Misalnya, Anda dapat menetapkan unit Konten yang sesuai menjadi persegi berukuran 2x2, kolom berukuran 4x1, dsb.

Anda menetapkan jumlah baris dengan parameter data-matched-content-rows-num dan jumlah kolom dengan parameter data-matched-content-columns-num. Anda harus mengatur kedua parameter dan data-matched-content-ui-type bersama.

Catatan:

• Ada beberapa batasan untuk jumlah baris dan kolom yang dapat Anda tetapkan. Total jumlah rekomendasi di unit Konten yang sesuai harus antara 1 dan 30. Jika Anda mencoba menampilkan kurang dari 1 atau lebih dari 30 rekomendasi, unit Konten yang sesuai akan terlihat kosong.
• Terkadang kami tidak dapat menampilkan jumlah baris dan/atau kolom yang tepat seperti yang Anda tetapkan. Misalnya, jika Anda telah menetapkan kolom dalam jumlah besar, namun unit Konten yang sesuai tidak cukup luas untuk menampung semuanya. Dalam kasus ini, kami akan menyesuaikan jumlah baris dan/atau kolom, sehingga rekomendasi Anda sesuai dengan ruang yang tersedia dan memberikan pengalaman yang baik kepada pengguna.

Contoh baris dan kolom

4x1 (seluler dan desktop)

Contoh kode ini menunjukkan cara membuat unit Konten yang sesuai dengan empat baris dan satu kolom yang menampilkan total empat rekomendasi.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

2x2 (seluler dan desktop)

Contoh kode ini menunjukkan cara membuat unit Konten yang sesuai dengan dua baris dan dua kolom yang menampilkan total empat rekomendasi.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-rows-num="2"
     data-matched-content-columns-num="2"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

3x3 (seluler dan desktop)

Kode contoh ini menunjukkan cara membuat unit Konten yang sesuai dengan tiga baris dan tiga kolom yang menampilkan total sembilan rekomendasi.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-rows-num="3"
     data-matched-content-columns-num="3"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

4x1 (seluler) dan 2x2 (desktop) untuk situs responsif

Contoh kode ini menunjukkan cara membuat unit Konten yang sesuai dengan petak 4x1 di seluler dan petak 2x2 di desktop. Sebaiknya gunakan penyiapan ini jika Anda memiliki situs responsif.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-rows-num="4,2"
     data-matched-content-columns-num="1,2"
     data-matched-content-ui-type="image_stacked,image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Bagikan masukan Anda

Kami ingin mendengar pendapat Anda tentang penyesuaian unit Konten yang sesuai. Anda dapat memberi tahu kami apa saja yang berhasil untuk Anda dan apa yang dapat ditingkatkan melalui formulir masukan ini.

Pemecahan masalah

Setelah disesuaikan, unit Konten yang sesuai mungkin tidak muncul seperti yang Anda harapkan. Berikut adalah beberapa masalah umum terkait unit Konten yang sesuai dan cara memperbaikinya:

Unit Konten yang sesuai kosong

Ada 2 alasan mengapa hal ini terjadi:

• Jumlah total rekomendasi di unit Konten yang sesuai kurang dari 1 atau lebih dari 30. Anda harus mengubah jumlah baris dan/atau kolom di unit Konten yang sesuai sehingga jumlah total rekomendasinya tidak melebihi batas.
• Unit Konten yang sesuai terlalu lebar untuk jumlah rekomendasi yang Anda tetapkan. Dalam hal ini, Anda harus mencoba mengurangi lebar unit Konten yang sesuai.

Unit Konten yang sesuai memiliki rekomendasi yang lebih rendah dari yang Anda harapkan

Hal ini dapat terjadi saat Anda tidak memiliki cukup ruang untuk menampilkan jumlah rekomendasi yang tepat seperti yang Anda tetapkan. Misalnya, jika Anda telah menetapkan rekomendasi dalam jumlah besar dan unit Konten yang sesuai terlalu sempit atau dilihat di layar kecil. Jika ini terjadi, kami akan menyesuaikan jumlah baris dan/atau kolom yang paling sesuai dengan ruang yang tersedia. Sebaiknya pertimbangkan untuk mengubah lebar unit konten yang sesuai atau menetapkan jumlah baris dan kolom yang berbeda untuk seluler vs. desktop.

Rekomendasi Anda hanya teks

Anda mungkin melihat masalah ini jika unit Konten yang sesuai terlalu sempit untuk jumlah rekomendasi yang Anda tetapkan. Dalam kasus ini, Anda harus mencoba meningkatkan lebar unit Konten yang sesuai.

Menggunakan konsol untuk menemukan error di unit Konten yang sesuai

Anda dapat menggunakan konsol di browser untuk memeriksa apakah Anda telah mengubah kode iklan Konten yang sesuai dengan benar. Misalnya, konsol dapat menginformasikan apakah kode iklan Anda kehilangan parameter yang diperlukan atau apakah parameter berisi nilai yang tidak valid.

Jika menggunakan Chrome, Anda dapat mengikuti langkah-langkah berikut untuk menguji kode iklan di Konsol DevTools:

1. Buka halaman dengan unit Konten yang sesuai.
2. Tekan Ctrl+Shift+J (Windows/Linux) atau Cmd+Opt+J (Mac).
3. Periksa panel Konsol apakah ada pesan error.